WPF动画

Timeline介绍

所有的动画类型均继承自Timeline类,包括StoryBoard,因此所有动画都是专用类型的时间线。它提供的属性让你可以指定该时间段的长度、开始时间、重复次数以及该时间段内时间进度的快慢等。

属性 说明
Duration 获取或设置此时间线播放的时间长度,而不是计数重复。
AutoReverse 获取或设置一个值,该值指示时间线在完成向前迭代后是否按相反的顺序播放。
RepeatBehavior 获取或设置此时间线的重复行为。
FillBehavior 获取或设置一个值,该值指定 Timeline 在到达其有效期末尾后的行为。
AccelerationRatio 获取或设置一个值,该值指定在将时间消逝从零加速到其最大速率的过程中所占用时间线的 Duration 的百分比。
DecelerationRatio 获取或设置一个值,该值指定在将时间消逝从其最大速率减速到零的过程中所占用时间线的 Duration 的百分比。
SpeedRatio 获取或设置此 Timeline 的时间相对于其父级的前进速率。
BeginTime 获取或设置此 Timeline 应开始的时间。
Name 获取或设置此 Timeline 的名称。
DesiredFrameRate 获取或设置此时间线及其子时间线所需的帧速率。以上属性均为依赖属性,这个为附加属性

WPF动画中的关键对象

动画类(Animation)+故事板(StoryBoard)

一:故事板(StoryBoard):

  • 介绍
    1.Storyboard 是一种容器时间线,它为其包含的时间线提供目标信息( TargetName 和 TargetProperty)。
    2.Storyboard 在动画开发中也是十分重要的,相当于动画的舞台,控制动画的运行、开始、停止、恢复,而动画类则相当于动画的演员。舞台上根据时间线在指定的时间节点安排演员上场,组成完整动画。
    3.Storyboard 提供了开始,暂停,恢复,停止等方法来控制动画的播放流程。
  • 使用
    若要使用 Storyboard 组织和应用动画,可以将动画添加为 Storyboard 的子时间线。 Storyboard 类提供 Storyboard.TargetName 和 Storyboard.TargetProperty 附加属性。 可以在动画上设置这些属性以指定其目标对象和属性。
                DoubleAnimation doubleAnimation = new DoubleAnimation
                {
                    From = 0,
                    To = 1,
                    Duration = TimeSpan.FromSeconds(1),
                    AutoReverse = true,
                    RepeatBehavior = new RepeatBehavior(1)
                };
                Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(Image.OpacityProperty));
                Storyboard.SetTarget(doubleAnimation, this.winImg);
                Storyboard blinkAnimation = new Storyboard();
                blinkAnimation.Children.Add(doubleAnimation);
                // 启动动画
                blinkAnimation.Begin();

二:动画类(Animation):

动画类分三大类共43个动画类:简单线性动画、关键帧动画、路径动画

  • 动画的必要条件:
    对象必须实现Animatable接口(界面控件基本都实现了)。
    关联属性必须是依赖属性。
    需要有与属性对应类型的动画类,比如说控件的Width属性,其类型是Double类型,Double类型对应的动画类型为DoubleAnimation。而有些属性是没有对应的动画类的,比如string类型是没有对应的简单线性动画类的,此时如果是关键帧动画,而恰好要进行动画的属性是没有动画类型的,可以使用ObjectAnimationUsingKeyFrames。

  • 动画的选择:
    根据属性类型确定
    例如:width是double类型的,就可以选择double的动画
    改变大小、位置、颜色、显示等

  • From, To, Duration:
    From和To指定了动画的开始和结束值,而Duration决定了动画的持续时间。

  • 简单线性动画:18个类型名 + Animation

简单线性动画 简单线性动画 简单线性动画
ByteAnimation ColorAnimation DecimalAnimation
DoubleAnimation Int16Animation Int32Animation
Int64Animation Point3DAnimation PointAnimation
PopupAnimation QuaternionAnimation RectAnimation
Rotation3DAnimation SingleAnimation SizeAnimation
ThicknessAnimation Vector3DAnimation VectorAnimation

简单线性动画控件的常用属性
Duration:时间,时:分:秒,例:Duration="0:0:1"
From:起始数据,可以不设置,直接从当前控件对象中获取数据。
To:结束数据。
By:从控件对象对应属性的当前值开始增量变化到指定数值,比如原先是50,那么By设定成200的最终值就是250。设置了By属性则不需要在设置From和To

示例:

                    Image answerImage = GetImage(currentTopic.Answer);
                    // 创建一个DoubleAnimation来改变Image的Opacity属性
                    DoubleAnimation opacityAnimation = new DoubleAnimation
                    {
                        From = 1, // 初始透明度   
                        To = 0, // 目标透明度(隐藏)    
                        Duration = TimeSpan.FromSeconds(0.5), // 动画持续时间    
                        AutoReverse = true, // 动画结束后反向播放    
                        RepeatBehavior = new RepeatBehavior(2) // 动画重复2次(隐藏-显示-隐藏-显示)  
                    };
                    Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(Image.OpacityProperty));
                    Storyboard.SetTarget(opacityAnimation, answerImage);
                    // 创建Storyboard动画
                    Storyboard blinkAnimation = new Storyboard();
                    blinkAnimation.Children.Add(opacityAnimation);
                    // 启动动画  
                    blinkAnimation.Begin();
  • 关键帧动画:22个类型名+AnimationUsingKeyFrames
关键帧动画 关键帧动画 关键帧动画
BooleanAnimationUsingKeyFrames ByteAnimationUsingKeyFrames CharAnimationUsingKeyFrames
ColorAnimationUsingKeyFrames DecimalAnimationUsingKeyFrames DoubleAnimationUsingKeyFrames
Int16AnimationUsingKeyFrames Int32AnimationUsingKeyFrames Int64AnimationUsingKeyFrames
MatrixAnimationUsingKeyFrames ObjectAnimationUsingKeyFrames Point3DAnimationUsingKeyFrames
PointAnimationUsingKeyFrames QuaternionAnimationUsingKeyFrames RectAnimationUsingKeyFrames
Rotation3DAnimationUsingKeyFrames SingleAnimationUsingKeyFrames SizeAnimationUsingKeyFrames
StringAnimationUsingKeyFrames ThicknessAnimationUsingKeyFrames Vector3DAnimationUsingKeyFrames
VectorAnimationUsingKeyFrames
  • 路径动画:3个类型名 + AnimationUsingPath
路径动画 路径动画 路径动画
DoubleAnimationUsingPath PointAnimationUsingPath MatrixAnimationUsingPath
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • WPF动画是比较吸引人的地方,下面记录下各个动画基础,然后后续文章会给出利用动画做出的实例程序。竟然要学动画,那么...
    冰点雨阅读 1,213评论 0 1
  • WPF提供了一个更高级的模型,通过该模型可以只关注动画的定义,而不必考虑它们的渲染方式。这个模型基于依赖项属性基础...
    Dust_SongYunfei阅读 947评论 0 1
  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 5,126评论 3 23
  • 介绍 这是一个实验中的功能,此功能某些浏览器尚在开发中。 CSS animations 使得可以将从一个 CSS ...
    LK_EX阅读 401评论 0 0
  • 这篇文章主要是参考了官方文档 Core Animation Programming Guide[https://d...
    Allan_野草阅读 3,283评论 11 48