WPF动画----基础

WPF动画是比较吸引人的地方,下面记录下各个动画基础,然后后续文章会给出利用动画做出的实例程序。竟然要学动画,那么动画的类层次结构肯定要清楚,要知道在学什么,学到哪里,,这是重要的:


7b60d05fgx6BtPloVu921&690.jpg

下面简单分析一下,在TimeLine抽象类下面有三个继承与它的,分别是AnimationTimeline(这个是基于属性的动画系统,这个相当于个人表演),Media Timelie(用于播放视频等),TimelineGroup(这个就是同步时间线的动画,里面包括Storyboard,故事版,这个相当于戏剧了,多人表演)。
Media Timeline就不用多说了,这里不是重点,下面主要讲AnimationTimeline和TimelineGroup。
(一)AnimationTimeline:竟然是属性系统,那么肯定和属性是密不相关的,属性就有很多了啊,什么类型都有,例如Width(double),margin(thickness),还有point类型啊,color类型啊,十分多,那么这个属性为了对这些类型进行动画处理,自身就为绝大多数普通的类型设置好了专门的动画类,例如上面的DoubleAnimationBase,CorlorAnimationBase,StringAnimationBase等,还有很多,这是广度,,那么深度有哪些呢?将其深度就要了解基于属性的动画中,大概分为三类。1.线性插值动画。2.关键帧动画。3.基于路径的动画。那么深度自然就出来了,就拿DoubleAnimationBase来讲,里面包括DoubleAnimation(线性插值),DoubleAnimationUsingKeyFrames(关键帧),DoubleAnimationUsingPath(基于路径)。一切都明了了。
在讲深度方面的知识之前,在上层的基础属性要先讲讲既然TimeLine类,因为所有的动画都继承TimeLine类,所以TimeLine类的属性,在所有动画中都能用到,下面给出TimeLine类的所有基本的属性:
1.BeginTime :设置启动时间,例如设置 "0:0:10",那么10秒后启动,这个用于多个动画的协调是很有用的。
2.Duartion : 设置动画持续时间。
3.SpeedRatio : 提高或减慢动画速度,呈倍数增长。
4.AccelerationRatio和DecelerationRatio:0~1之间,例如前者设定了0.3,那么在前30%的时间内是加速的,但是后面70%会补偿回来。
5.AutoReverse :自动原路返回。
6.FillBehavior :枚举,分别有Stop和HoldEnd,前者是动画结束时立马返回原来的值,后者是固定为结束值啦。
7.RepeatBehavior:就是重复行为了,可以指定次数或者指定时间内的重复动画。
说了一大堆,其实这些都是有用的,因为他们都是动画基本类型。
下面讲一下深度,上面已经讲过,就拿DoubleAnimationBase来讲,其实广度的话,如果了解了一个,其他都会了。所以现在展开讲深度。
1.DoubleAnimation: 线性动画,线性动画有三个属性是比较重要的:
①from 就是设置动画属性从哪里开始,如果不设置的话默认为物体本身的那个值。
②to 就是设置动画属性去哪里,如果不设置的话就默认为物体本身的那个值。
③by 就是设置数量改变值,例如设置widthaAnimation.By=10,那么意思就是widthAnimation.To=widthAnimation.Width+10;
下面给出图,代码的方式启动动画并且动画之后怎么删除:


7b60d05fgx6BtRQAs6M54&690.jpg

都说过的了,其中有一个IsCuMulative,这个属性是设置动画间的融合的,就是说如果一个动画运行的时候插入另外一个动画,那么如果这个属性设置为true的话,就会融合一起,不会断开。AnimationTimeline大概就讲到这里了,其他属性一样的设置,变通一下。
2.DoubleAnimationUsingKeyFrame: 这个是关键帧动画。
7b60d05fgx6BtT7vcjg32&690.jpg

设定好各个关键帧,其实关键帧就有两个要设置的,一个KeyTime,到达Value的时间,第二个Value,这个关键帧要到达的值。所以你看上面是匀速的。
2.DoubleAnimationUsingPath: 这个是基于路径的动画。
下面给出利用路径的动画实例:


7b60d05fgx6BtTvzrIKfa&690.jpg

先把路径定义好。
然后就是使用了,很简单
<Canvas >
        <Ellipse Height="18" Width="30" Canvas.Left="353" Canvas.Top="27" Fill="Red" Name="image">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.MouseLeave">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)" Duration="0:0:10" PathGeometry="{StaticResource ResourceKey=path}" Source="X"></DoubleAnimationUsingPath>
                            <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:10" PathGeometry="{StaticResource ResourceKey=path}" Source="Y"></DoubleAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>

(一)TimelineGroup: 这个就有意思啊,利用xaml来创建动画,十分的多样化,话说上面也能用xaml的方式创建。这个类下面有一个叫Storyboard的类,这是故事板,大家都喜欢看故事,故事板就好像是一场戏剧,上面有很多东西在表演,形成了美丽的画面,我们下面开始记录故事板(Storyboard)。
首先故事板在xaml中能放很多位置啊,直接放在控件的Resource的Style的触发器下。能放在字典上面,然后通过引用引用到窗口的xaml代码中。故事板有两个附加属性比较重要,Storyboard.TargetName:如果这个放在Storyboard上面就应用到下面所有动画都是属于这个Target的,如果放到Storyboard里面的其中一个动画,你知道怎么了。Storyboard.TargetProperty,这个动画是设置要应用动画的属性。下一篇讲记录动画需要用到的各种触发器还有动画中的缓动函数(重头戏)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,752评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,100评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,244评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,099评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,210评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,307评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,346评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,133评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,546评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,849评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,019评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,702评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,331评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,030评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,260评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,871评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,898评论 2 351

推荐阅读更多精彩内容