Windows Phone开发(39):漫谈关键帧动画上篇 转:http://blog.csdn.net/tcjiaan/article/details/7550506...
尽管前面介绍的几种动画会让觉得很好玩了,但是,不知道你是否发现,在前面说到的一系列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代码。+
- <Grid Loaded="OnGridLoaded">
- <Ellipse VerticalAlignment="Top" HorizontalAlignment="Left"
- Width="100" Height="100" Fill="Blue">
- <Ellipse.RenderTransform>
- <TranslateTransform x:Name="trf"/>
- </Ellipse.RenderTransform>
- </Ellipse>
- <Grid.Resources>
- <Storyboard x:Name="storybrd">
- <DoubleAnimationUsingKeyFrames Duration="0:0:6"
- RepeatBehavior="Forever"
- Storyboard.TargetName="trf"
- Storyboard.TargetProperty="X">
- <LinearDoubleKeyFrame KeyTime="0:0:6" Value="420"/>
- </DoubleAnimationUsingKeyFrames>
- <DoubleAnimationUsingKeyFrames Duration="0:0:6"
- RepeatBehavior="Forever"
- Storyboard.TargetName="trf"
- Storyboard.TargetProperty="Y">
- <SplineDoubleKeyFrame KeyTime="0:0:2" Value="700">
- <SplineDoubleKeyFrame.KeySpline>
- <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>
- </SplineDoubleKeyFrame.KeySpline>
- </SplineDoubleKeyFrame>
- <SplineDoubleKeyFrame KeyTime="0:0:3" Value="550">
- <SplineDoubleKeyFrame.KeySpline>
- <KeySpline ControlPoint1="1,0" ControlPoint2="0.5,0"/>
- </SplineDoubleKeyFrame.KeySpline>
- </SplineDoubleKeyFrame>
- <SplineDoubleKeyFrame KeyTime="0:0:5" Value="95">
- <SplineDoubleKeyFrame.KeySpline>
- <KeySpline ControlPoint1="0,0" ControlPoint2="0,0.5"/>
- </SplineDoubleKeyFrame.KeySpline>
- </SplineDoubleKeyFrame>
- <LinearDoubleKeyFrame KeyTime="0:0:6" Value="730"/>
- </DoubleAnimationUsingKeyFrames>
- </Storyboard>
- </Grid.Resources>
- </Grid>
代码就这样的,看不懂后果自负,第一节中就说过了,先把WPF和Silverlight耍了,再来耍WP。
后台代码还要加一个,处理上面的OnGridLoaded事件。
- private void OnGridLoaded(object sender, RoutedEventArgs e)
- {
- this.storybrd.Begin();
- }
由于是动画,截图没有意义,就不发了,自己运行一下吧。你的作品,你一定很高兴!
历史证明,一个例子是不够的,下面再来一“瓶”,这个例子我们对一个Image控件玩动画,让图片动着出来,动着滚蛋,主要用到透视变换。
- <Grid Loaded="OnGridLoaded">
- <Image Name="img" Source="/PhoneApp1;component/1.jpg" Stretch="Uniform" Opacity="0">
- <Image.Projection>
- <PlaneProjection x:Name="prj" />
- </Image.Projection>
- </Image>
- <Grid.Resources>
- <Storyboard x:Name="std" RepeatBehavior="Forever" Duration="0:0:12">
- <DoubleAnimationUsingKeyFrames Storyboard.TargetName="img"
- Storyboard.TargetProperty="Opacity">
- <LinearDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
- <LinearDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
- <LinearDoubleKeyFrame KeyTime="0:0:12" Value="0"/>
- </DoubleAnimationUsingKeyFrames>
- <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
- Storyboard.TargetProperty="LocalOffsetZ">
- <LinearDoubleKeyFrame KeyTime="0:0:0" Value="-6000"/>
- <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0" />
- <LinearDoubleKeyFrame KeyTime="0:0:12" Value='-12'/>
- </DoubleAnimationUsingKeyFrames>
- <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
- Storyboard.TargetProperty="RotationZ">
- <SplineDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
- <SplineDoubleKeyFrame KeyTime="0:0:8" Value="0">
- <SplineDoubleKeyFrame.KeySpline>
- <KeySpline ControlPoint1="0,0" ControlPoint2="0.25,0.5"/>
- </SplineDoubleKeyFrame.KeySpline>
- </SplineDoubleKeyFrame>
- </DoubleAnimationUsingKeyFrames>
- <DoubleAnimationUsingKeyFrames Storyboard.TargetName="prj"
- Storyboard.TargetProperty="RotationY">
- <LinearDoubleKeyFrame KeyTime="0:0:8" Value="0"/>
- <LinearDoubleKeyFrame KeyTime="0:0:12" Value="90"/>
- </DoubleAnimationUsingKeyFrames>
- </Storyboard>
- </Grid.Resources>
- </Grid>
别忘了处理OnGridLoaded。
- private void OnGridLoaded(object sender, RoutedEventArgs e)
- {
- this.std.Begin();
- }
这个嘛,还是发个图好点,免得有人说没真相,图片大家可以随便找,只要内容健康就行了。
还要告诉各位一件事,免得大家去“狗狗摆渡”,与动画相关的类,基本上都位于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...相关推荐
- Windows Phone开发(40):漫谈关键帧动画之中篇 转:http://blog.csdn.net/tcjiaan/article/details/7559978...
一.DiscreteDoubleKeyFrame 离散型关键帧动画,重点,我们理解一下"离散"的意思,其实你查一下<新华字典>,"离"和" ...
- Windows Phone开发(28):隔离存储B 转:http://blog.csdn.net/tcjiaan/article/details/7436959...
上一节我们聊了目录的操作,这一节我们继续来看看如何读写文件. 首先说一下题外话,许多朋友都在摇摆不定,三心二意,其实这样的学习态度是很不好的,如果你对Windows phone开发有兴趣,如果你真想学 ...
- Windows Phone开发(36):动画之DoubleAnimation 转:http://blog.csdn.net/tcjiaan/article/details/7521388...
从本节开始,我们将围绕一个有趣的话题展开讨论--动画. 看到动画一词,你一定想到Flash,毕竟WP应用的一个很重要的框架是Silverlight,在WP中也发挥了Silverlight的许多优点,可 ...
- Windows Phone开发(46):与Socket有个约会 转:http://blog.csdn.net/tcjiaan/article/details/7669315...
不知道大家有没有"谈Socket色变"的经历?就像我一位朋友所说的,Socket这家伙啊,不得已而用之.哈,Socket真的那么恐怖吗? 其实这话一点也不假,Socket有时候真的 ...
- Windows Phone开发(7):当好总舵主 转:http://blog.csdn.net/tcjiaan/article/details/7281421...
吹完了页面有关的话题,今天我们来聊一下页面之间是如何导航的,在更多情况下,我们的应用程序不会只有一个页面的,应该会有N个,就像我们做桌面应 用开发那样,我们一个应用程序中可能不止一个窗体(极简单的程序 ...
- Windows Phone开发(35):使用Express Blend绘图 转:http://blog.csdn.net/tcjiaan/article/details/7493010...
上一节中我们简单扯了一下绘图指令,然而那也不是最简单的绘图法,今天,我再向大家推荐一种更好的绘图方案--Express Blend工具的使用. 这个工具是随SDK一起安装的,也是免费的,相信大家都知道 ...
- Windows Phone开发(16):样式和控件模板 转:http://blog.csdn.net/tcjiaan/article/details/7367260...
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...
- Windows Phone开发(27):隔离存储A 转:http://blog.csdn.net/tcjiaan/article/details/7425212...
在很多资料或书籍上都翻译为"独立存储",不过,我想了一下,决定将IsolatedStorage翻译为"隔离存储",我想这样会更方便大家对这一概念的理解. 关于何 ...
- Windows Phone开发(32):路径之PathGeometry 转:http://blog.csdn.net/tcjiaan/article/details/7469512...
说起路径这玩意儿,其实说的就是Path类,它藏在命名空间System.Windows.Shapes下,应该好找,它有一个很重要的属性Data,你不妨在"对象浏览器"中把它抓出来看看 ...
最新文章
- python request timeout是什么意思_request timeout是什么意思
- mapreduce编程实例(3)-求平均值
- 成功解决ModuleNotFoundError: No module named 'scipy._lib._ccallback'
- 系统重装后 Endnote 不能和Word联用的解决方法
- mysql 轨迹数据存储_python爬虫26 | 把数据爬取下来之后就存储到你的MySQL数据库...
- 实现 IE6 支持 position fixed 的 CSS 属性
- 抓住人工智能红利,百度AI达人养成营带你速成深度学习
- apache 2许可证_如何理解Apache 2专利许可
- mysql的备份与恢复_实验十一 MySQLl备份与恢复1
- sql server 规则
- lora 网关 linux,选择LoRaWAN网关的5大关键 很重要!
- linux 更改文件格式
- oracle := 和=,oracle中 =: 和 := 分别是什么意思?
- 最常见的管理误区,你中招了吗?
- 2021-07-03 DTS 驱动 rock1126 添加硬件ucam 驱动
- Windows系统的命令窗口
- [AD] 此地、钱多、站少、速来的来历
- 重型音乐金属核后期分轨混音教程教学培训(基础+进阶+重型音色调音指南+剪辑+修音+美感设计+实战+母带处理)|MZD Studios
- C语言中指针的介绍(终极版!!!)
- Android自动手绘,圆你儿时画家梦!