Windows Phone开发(41):漫谈关键帧动画之下篇

原文:Windows Phone开发(41):漫谈关键帧动画之下篇

也许大家已经发现,其实不管什么类型的动画,使用方法基本是一样的,不知道大家总结出规律了没有?当你找到规律之后,你会发现真的可以举一反六的,不骗你。

为了能帮助大家找到规律,今天,我们再来写两个例子。

 

一、DiscreteObjectKeyFrame

简单介绍一下这个吧,它只是为了方便我们进行一些大的切换而提供,但它也不是万能的,尽管它的目标类型是object类型,前提是它与其它动画一样,只能针对某对象的某属性进行动画处理。与Flash相比,Silverlight是少了一些灵活性,但我们知道,毕竟Silverlight并不是真的为了做动画而诞生的,微软推出它的意义是用于企业级应用。而所谓的对多媒体支持或动画之类,是为了提供更好的用户体验罢了,不要真把它当成娱乐专用哦。

好,F话就说到这里,下面开始练习,首先你可以参照下面XAML代码完成前台布局,随便你写在哪,反正你找到Grid控件当容器就行了。练习嘛也是很灵活的,我从来不会对大家做死搬硬套的要求。

    <Grid>
        <Rectangle x:Name="rec" Margin="100,200" Loaded="rec_Loaded"/>

        <Grid.Resources>
            <Storyboard x:Name="std">
                <ObjectAnimationUsingKeyFrames
                    Duration="0:0:8"
                    Storyboard.TargetName="rec"
                    Storyboard.TargetProperty="Fill"
                    RepeatBehavior="Forever">
                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                        <DiscreteObjectKeyFrame.Value>
                            <SolidColorBrush Color="Blue"/>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:3">
                        <DiscreteObjectKeyFrame.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                <GradientStop Color="Red" Offset="0"/>
                                <GradientStop Color="Yellow" Offset="0.5"/>
                                <GradientStop Color="Purple" Offset="1"/>
                            </LinearGradientBrush>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                    <DiscreteObjectKeyFrame KeyTime="0:0:5">
                        <DiscreteObjectKeyFrame.Value>
                            <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                                <GradientStop Color="Snow" Offset="0"/>
                                <GradientStop Color="Green" Offset="1"/>
                            </RadialGradientBrush>
                        </DiscreteObjectKeyFrame.Value>
                    </DiscreteObjectKeyFrame>
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
    </Grid>

上面代码中,我们定义了一个rec_Loaded事件处理程序,目的是启动动画,所以,在上面代码中的rec_Loaded处单击右键,从弹出的菜单中选择“导航到事件处理程序”,这样就生成了一个事件处理方法rec_Loaded了,接着我们在这里开始播放动画。

        private void rec_Loaded(object sender, RoutedEventArgs e)
        {
            this.std.Begin();
        }

 

现在请你调试运行,观赏一下效果吧。

 

 

 

二、LinearPointKeyFrame

这个东西大家一定熟悉,就是对两个点之间进行动画,前面的例子有,但这是关键帧动画,也就是说可以在N个点间产生动画,使用XAML时,它是PointAnimationUsingKeyFrames的子元素。

请参考下面的XAML代码构建UI界面。

    <Grid>
        <Ellipse x:Name="ell" Width="400" Height="400" Loaded="ell_Loaded">
            <Ellipse.Fill>
                <RadialGradientBrush Center="0,0.5" RadiusX="1" RadiusY="0.5">
                    <GradientStop Color="Gold" Offset="0"/>
                    <GradientStop Color="Red" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Grid.Resources>
            <Storyboard x:Name="std">
                <PointAnimationUsingKeyFrames
                        Duration="0:0:12"
                        Storyboard.TargetName="ell"
                        Storyboard.TargetProperty="(Ellipse.Fill).(RadialGradientBrush.Center)"
                        RepeatBehavior="Forever">
                    <LinearPointKeyFrame KeyTime="0:0:3" Value="0.5,1"/>
                    <LinearPointKeyFrame KeyTime="0:0:6" Value="1,0.5"/>
                    <LinearPointKeyFrame KeyTime="0:0:9" Value="0.5,0"/>
                    <LinearPointKeyFrame KeyTime="0:0:12" Value="0,0.5"/>
                </PointAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>
    </Grid>

不要忘了启动动画。

        private void ell_Loaded(object sender, RoutedEventArgs e)
        {
            std.Begin();
        }

好,看看效果如何。

 

 

不知道大家通过练习,感觉如何,如果你WPF基础很扎实的话,我相信这些例子你根本不用看都懂了,当然,如果你是初学者,也不要被这些东西吓,如果你真想学习,哪怕理论上的东西你搞不懂(其实,理论的东西没几个人真的会懂的)也不要紧,关键是多动手,多练习。还是那句话,你会穿衣服就行了,没有人说非得要懂得怎么做衣服后才能穿衣服的。是不是这个道理呢?如果你不理解农民伯伯是怎么把菜种出来的,难道你不吃菜了不成?

时间: 2024-09-20 05:56:15

Windows Phone开发(41):漫谈关键帧动画之下篇的相关文章

Windows Phone开发(40):漫谈关键帧动画之中篇

原文:Windows Phone开发(40):漫谈关键帧动画之中篇 一.DiscreteDoubleKeyFrame 离散型关键帧动画,重点,我们理解一下"离散"的意思,其实你查一下<新华字典>,"离"和"散"的意思相近.我们可以这样解释:每个关键帧之间是直接过渡,其间不经过动画插补.似乎这样理解有点苦涩难懂,所以,我们还是从实例入手. 请参考以下XAML代码写一个示例: <Grid Loaded="OnGridLoa

Windows Phone开发(39):漫谈关键帧动画上篇

原文:Windows Phone开发(39):漫谈关键帧动画上篇 尽管前面介绍的几种动画会让觉得很好玩了,但是,不知道你是否发现,在前面说到的一系列XXXAnimation中,都有一个共同点,那就是仅仅针对两个值的目标值之间产生动画,如果使用By,将在原值和加上By后的目标值之间进行动画处理:如果使用From,To,那就更好理解了,就是首尾两个值之间值的动画. 那么,如果我希望三个值呢?或者N多个值呢?每个值之间的时间间隔不一样呢?如果我还希望更复杂的动画效果呢?比如可以附加缓动函数的.显然,前

Windows Phone开发(42):缓动动画

原文:Windows Phone开发(42):缓动动画 前面在讨论关键帧动画的时候,我有意把几个带缓动动画的关键帧动画忽略掉,如EasingColorKeyFrame.EasingDoubleKeyFrame和EasingPointKeyFrame,其实为数不多,就这么几个.因为我希统一放到这节课程来吹一下缓动函数. 所谓缓动函数,就是我们在代数里面说的函数,说白了嘛,就是根特定的函数规则,用输入的值算出最终值,使得动画在两个关键帧之间不再是均衡过度,而是带有加/减速或其他效果,当然,还要取决于

Windows 8 Store Apps学习(19) 动画 线性动画, 关键帧动画, 缓动动画

介绍 重新想象 Windows 8 Store Apps 之 动画 线性动画 - 共有 3 种: ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline 关键帧动画 - 共有 4 种:ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames

Windows Phone开发(36):动画之DoubleAnimation

原文:Windows Phone开发(36):动画之DoubleAnimation 从本节开始,我们将围绕一个有趣的话题展开讨论--动画. 看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可能不少人说,Silverlight就是和Flash差不多吧,当你深入了解了Silverlight后,你会发现,其实不然,Silverlight更偏重于数据处和企业级应用.   好了,F话不多说,开始吹我们今天的牛皮吧

iOS开发UI篇—核心动画(关键帧动画)

一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为"关键帧"(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path:可以

背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

原文:背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimation, DoubleAnimation, PointAnimation 关键帧动画 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, Poin

重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画

原文:重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 [源码下载] 重新想象 Windows 8 Store Apps (19) - 动画: 线性动画, 关键帧动画, 缓动动画 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之 动画 线性动画 - 共有 3 种: ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline 关键帧动画

Windows Phone开发(38):动画之PointAnimation

原文:Windows Phone开发(38):动画之PointAnimation PointAnimation也是很简单的,与前面说到的两个Animation是差不多的,属性也是一样的,如By.From.To,不同的是,PointAnimation是目标值从一点到另一个点. 我有理由相信,大家一定懂的,所以,我不多介绍了,给两个例了热一下身就行了. 例一,让直线动起来. 这个例子,以LineGeometry作为动画的目标对象,通过对StartPoint属性和EndPoint属性进行动画来让直线(