尽管前面介绍的几种动画会让觉得很好玩了,但是,不知道你是否发现,在前面说到的一系列XXXAnimation中,都有一个共同点,那就是仅仅针对两个值的目标值之间产生动画,如果使用By,将在原值和加上By后的目标值之间进行动画处理;如果使用From,To,那就更好理解了,就是首尾两个值之间值的动画。

那么,如果我希望三个值呢?或者N多个值呢?每个值之间的时间间隔不一样呢?如果我还希望更复杂的动画效果呢?比如可以附加缓动函数的。显然,前面我们提到的几个动画类是不能完成的。

不知道你以前有没有耍过Flash,若是在Flash里面,你会怎么做?对啊,我肯定会说——关键帧啊。是啊,那么,Silverlight for Windows phone里面有没有关键帧动画呢?答案显然是Yes的。

相对于前面说的简单动画而言,关键帧动画会显得更为复杂,更难理解,我问你,你怕了吗?

如果你怕了,那就不要往下看了,你只能中途而废了,回家被母亲骂了。如果你敢于挑战,那就不要犹豫,迎难而上!

先向大家透露一个好消息,其实在实际开发中,你不一定要手写XAML的,还记得那个人类历史上从未有过的强大设计工具——Express Blend吧,嗯,对D,必要的时候,你可以拿出来用一下,不要用这么好的东东在硬盘里生锈,会污染环境的哦。用那家伙,做动画就方便了,你会怀疑你在用Flash,说不定比Flash还爽。

如果你问我当初是怎么学习关键帧动画的,我只能通俗地回答你:唯Coding尔。至于你信不信,反正你想成为高手,你必须相信这句话。

扯蛋的话就不聊了,首先我们要先摸清一下与关键帧有关的一些类的大概线路。

从前面的课程中,大家一定知道,一个Storyboard里面可以放N个Timeline对象,但你知道,Timeline是抽象类,说白了,就是可以在其中放置从Timeline派生的类的对象,Storyboard除外,这个可不能嵌套。

也就是说,Storyboard里央也可以放N个关键帧时间线,和简单动画一个样,关键帧动画无非也是针对Double,Color,Point等目标值的。很好找,只要你看到有XXXAnimationUsingKeyFrames字样的,都是关键帧动画的时间线,为什么后面有个s,呵,复数形式,小学英语了,不用我解释了,既然是复数,当然一个时间线中可以有N个关键帧了。

现在,你一定是云里雾里的,所以说嘛,理论的东西讲得再多也是废话,还是实例可爱一点吧?

这一节先来讲一下DoubleAnimationUsingKeyFrames,里面的关键帧有三种:LinearDoubleKeyFrame、SplineDoubleKeyFrame和EasingDoubleKeyFrame,我们只玩前面两个,后面那个是带缓动函数的动画,由于缓动动画的原理都一样,可以举一反六,所以我打算放到专门的一节中去吹。

LinearDoubleKeyFrame是比较好懂的,其实它和DoubleAnimation很像,只是关键帧的特点就是一个时间点对应一个值,因此,记住这句话:任何关键帧都有KeyTime和Value一一对应的,一个时间点对应一个值。

而线性关键帧动画的特点就是“匀速直线运动”,复习一下初中物理知识。两个关键之间的两个值都是根据时间间隔的大小均匀计算的。

另外,再看一下SplineDoubleKeyFrame,这个东西比较难理解,其实,你不理解它也可以用的,真的,这世界上有些东西不一定非要你弄懂了才能用的,比如,你不太可能在吃药之前要研究一下药是怎么加工出来的再吃,你吃饭之前难道也要想明白大米是如何种出来才吃吗?显然不是的。

SplineDoubleKeyFrame被SDK文档翻译为样条内插,这更增加了神奇感。我在学习的时候,凡是遇到这种根本读不懂的东西的话,我第一时间就写代码来试,写不同的代码,从不同的角度去测试,玩多了,你的灵感就来了。

这个什么内插补间动画,说通俗一点,不就是“变速直线运动”了,你看,又复习中考物理了,唉,当年我差点考满分,就是被加速度这玩儿耍了。

其中关键的是有个KeySpline属性,它设置一个KeySpline对象,KeySpline类有两个属性:ControlPoint1和ControlPoint2,就是两个点,传说是贝塞尔曲线的两个控制点。

真的复杂了,如果你觉得真的难理解的话,有没有兴趣玩一下这个游戏?玩了之后,你一定对这个东东有更深的体会,游戏地址:http://samples.msdn.microsoft.com/Silverlight/SampleBrowser/index.htm#/?sref=KeySplineExample

这个游戏很好玩的,一定要认真玩啊。

下面,我们动手干活,先来一段美丽的XAML代码。+

[html] view plaincopyprint?
  1. <Grid Loaded="OnGridLoaded">
  2. <Ellipse VerticalAlignment="Top" HorizontalAlignment="Left"
  3. Width="100" Height="100" Fill="Blue">
  4. <Ellipse.RenderTransform>
  5. <TranslateTransform x:Name="trf"/>
  6. </Ellipse.RenderTransform>
  7. </Ellipse>
  8. <Grid.Resources>
  9. <Storyboard x:Name="storybrd">
  10. <DoubleAnimationUsingKeyFrames Duration="0:0:6"
  11. RepeatBehavior="Forever"
  12. Storyboard.TargetName="trf"
  13. Storyboard.TargetProperty="X">
  14. <LinearDoubleKeyFrame KeyTime="0:0:6" Value="420"/>
  15. </DoubleAnimationUsingKeyFrames>
  16. <DoubleAnimationUsingKeyFrames Duration="0:0:6"
  17. RepeatBehavior="Forever"
  18. Storyboard.TargetName="trf"
  19. Storyboard.TargetProperty="Y">
  20. <SplineDoubleKeyFrame KeyTime="0:0:2" Value="700">
  21. <SplineDoubleKeyFrame.KeySpline>
  22. <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>
  23. </SplineDoubleKeyFrame.KeySpline>
  24. </SplineDoubleKeyFrame>
  25. <SplineDoubleKeyFrame KeyTime="0:0:3" Value="550">
  26. <SplineDoubleKeyFrame.KeySpline>
  27. <KeySpline ControlPoint1="1,0" ControlPoint2="0.5,0"/>
  28. </SplineDoubleKeyFrame.KeySpline>
  29. </SplineDoubleKeyFrame>
  30. <SplineDoubleKeyFrame KeyTime="0:0:5" Value="95">
  31. <SplineDoubleKeyFrame.KeySpline>
  32. <KeySpline ControlPoint1="0,0" ControlPoint2="0,0.5"/>
  33. </SplineDoubleKeyFrame.KeySpline>
  34. </SplineDoubleKeyFrame>
  35. <LinearDoubleKeyFrame KeyTime="0:0:6" Value="730"/>
  36. </DoubleAnimationUsingKeyFrames>
  37. </Storyboard>
  38. </Grid.Resources>
  39. </Grid>

代码就这样的,看不懂后果自负,第一节中就说过了,先把WPF和Silverlight耍了,再来耍WP。

后台代码还要加一个,处理上面的OnGridLoaded事件。

[csharp] view plaincopyprint?
  1. private void OnGridLoaded(object sender, RoutedEventArgs e)
  2. {
  3. this.storybrd.Begin();
  4. }

由于是动画,截图没有意义,就不发了,自己运行一下吧。你的作品,你一定很高兴!

历史证明,一个例子是不够的,下面再来一“瓶”,这个例子我们对一个Image控件玩动画,让图片动着出来,动着滚蛋,主要用到透视变换。

[html] view plaincopyprint?
  1. <Grid Loaded="OnGridLoaded">
  2. <Image Name="img" Source="/PhoneApp1;component/1.jpg" Stretch="Uniform" Opacity="0">
  3. <Image.Projection>
  4. <PlaneProjection x:Name="prj" />
  5. </Image.Projection>
  6. </Image>
  7. <Grid.Resources>
  8. <Storyboard x:Name="std" RepeatBehavior="Forever" Duration="0:0:12">
  9. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img"
  10. Storyboard.TargetProperty="Opacity">
  11. <LinearDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
  12. <LinearDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
  13. <LinearDoubleKeyFrame KeyTime="0:0:12" Value="0"/>
  14. </DoubleAnimationUsingKeyFrames>
  15. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
  16. Storyboard.TargetProperty="LocalOffsetZ">
  17. <LinearDoubleKeyFrame KeyTime="0:0:0" Value="-6000"/>
  18. <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0" />
  19. <LinearDoubleKeyFrame KeyTime="0:0:12" Value='-12'/>
  20. </DoubleAnimationUsingKeyFrames>
  21. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
  22. Storyboard.TargetProperty="RotationZ">
  23. <SplineDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
  24. <SplineDoubleKeyFrame KeyTime="0:0:8" Value="0">
  25. <SplineDoubleKeyFrame.KeySpline>
  26. <KeySpline ControlPoint1="0,0" ControlPoint2="0.25,0.5"/>
  27. </SplineDoubleKeyFrame.KeySpline>
  28. </SplineDoubleKeyFrame>
  29. </DoubleAnimationUsingKeyFrames>
  30. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
  31. Storyboard.TargetProperty="RotationY">
  32. <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
  33. <LinearDoubleKeyFrame KeyTime="0:0:12" Value="90"/>
  34. </DoubleAnimationUsingKeyFrames>
  35. </Storyboard>
  36. </Grid.Resources>
  37. </Grid>

别忘了处理OnGridLoaded。

[csharp] view plaincopyprint?
  1. private void OnGridLoaded(object sender, RoutedEventArgs e)
  2. {
  3. this.std.Begin();
  4. }

这个嘛,还是发个图好点,免得有人说没真相,图片大家可以随便找,只要内容健康就行了。

还要告诉各位一件事,免得大家去“狗狗摆渡”,与动画相关的类,基本上都位于System.Windows.Media.Animation命名空间。

至于源码问题,大部分文章我会保留源码,我这个人比较落后,没有用网盘,所以,暂时这样吧,有需要源码的朋友,请留下你那个心爱的伊妹儿做人质吧,我会善待她的,放心。

转载于:https://www.cnblogs.com/songtzu/archive/2012/07/24/2607100.html

Windows Phone开发(39):漫谈关键帧动画上篇 转:http://blog.csdn.net/tcjiaan/article/details/7550506...相关推荐

  1. Windows Phone开发(40):漫谈关键帧动画之中篇 转:http://blog.csdn.net/tcjiaan/article/details/7559978...

    一.DiscreteDoubleKeyFrame 离散型关键帧动画,重点,我们理解一下"离散"的意思,其实你查一下<新华字典>,"离"和" ...

  2. Windows Phone开发(28):隔离存储B 转:http://blog.csdn.net/tcjiaan/article/details/7436959...

    上一节我们聊了目录的操作,这一节我们继续来看看如何读写文件. 首先说一下题外话,许多朋友都在摇摆不定,三心二意,其实这样的学习态度是很不好的,如果你对Windows phone开发有兴趣,如果你真想学 ...

  3. Windows Phone开发(36):动画之DoubleAnimation 转:http://blog.csdn.net/tcjiaan/article/details/7521388...

    从本节开始,我们将围绕一个有趣的话题展开讨论--动画. 看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可 ...

  4. Windows Phone开发(46):与Socket有个约会 转:http://blog.csdn.net/tcjiaan/article/details/7669315...

    不知道大家有没有"谈Socket色变"的经历?就像我一位朋友所说的,Socket这家伙啊,不得已而用之.哈,Socket真的那么恐怖吗? 其实这话一点也不假,Socket有时候真的 ...

  5. Windows Phone开发(7):当好总舵主 转:http://blog.csdn.net/tcjiaan/article/details/7281421...

    吹完了页面有关的话题,今天我们来聊一下页面之间是如何导航的,在更多情况下,我们的应用程序不会只有一个页面的,应该会有N个,就像我们做桌面应 用开发那样,我们一个应用程序中可能不止一个窗体(极简单的程序 ...

  6. Windows Phone开发(35):使用Express Blend绘图 转:http://blog.csdn.net/tcjiaan/article/details/7493010...

    上一节中我们简单扯了一下绘图指令,然而那也不是最简单的绘图法,今天,我再向大家推荐一种更好的绘图方案--Express Blend工具的使用. 这个工具是随SDK一起安装的,也是免费的,相信大家都知道 ...

  7. Windows Phone开发(16):样式和控件模板 转:http://blog.csdn.net/tcjiaan/article/details/7367260...

    在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...

  8. Windows Phone开发(27):隔离存储A 转:http://blog.csdn.net/tcjiaan/article/details/7425212...

    在很多资料或书籍上都翻译为"独立存储",不过,我想了一下,决定将IsolatedStorage翻译为"隔离存储",我想这样会更方便大家对这一概念的理解. 关于何 ...

  9. Windows Phone开发(32):路径之PathGeometry 转:http://blog.csdn.net/tcjiaan/article/details/7469512...

    说起路径这玩意儿,其实说的就是Path类,它藏在命名空间System.Windows.Shapes下,应该好找,它有一个很重要的属性Data,你不妨在"对象浏览器"中把它抓出来看看 ...

最新文章

  1. python request timeout是什么意思_request timeout是什么意思
  2. mapreduce编程实例(3)-求平均值
  3. 成功解决ModuleNotFoundError: No module named 'scipy._lib._ccallback'
  4. 系统重装后 Endnote 不能和Word联用的解决方法
  5. mysql 轨迹数据存储_python爬虫26 | 把数据爬取下来之后就存储到你的MySQL数据库...
  6. 实现 IE6 支持 position fixed 的 CSS 属性
  7. 抓住人工智能红利,百度AI达人养成营带你速成深度学习
  8. apache 2许可证_如何理解Apache 2专利许可
  9. mysql的备份与恢复_实验十一 MySQLl备份与恢复1
  10. sql server 规则
  11. lora 网关 linux,选择LoRaWAN网关的5大关键 很重要!
  12. linux 更改文件格式
  13. oracle := 和=,oracle中 =: 和 := 分别是什么意思?
  14. 最常见的管理误区,你中招了吗?
  15. 2021-07-03 DTS 驱动 rock1126 添加硬件ucam 驱动
  16. Windows系统的命令窗口
  17. [AD] 此地、钱多、站少、速来的来历
  18. 重型音乐金属核后期分轨混音教程教学培训(基础+进阶+重型音色调音指南+剪辑+修音+美感设计+实战+母带处理)|MZD Studios
  19. C语言中指针的介绍(终极版!!!)
  20. Android自动手绘,圆你儿时画家梦!

热门文章

  1. 2022-2028年中国增光膜行业市场研究及未来发展潜力报告
  2. pandas如何读取一个文件夹下的所有文件
  3. linux模拟器 cygwin源
  4. 深入理解BP神经网络的细节
  5. LeetCode中等题之删除链表的中间节点
  6. LeetCode简单题之设计停车系统
  7. Lambda 表达式基础理论与示例
  8. Nucleus-SE迁移:未实现的设施和兼容性
  9. 如何估算各种物体的重心
  10. Js touchg事件在移动端网页中左右滑动效果