动画原理

《动画原理》由会员分享，可在线阅读，更多相关《动画原理（33页珍藏版）》请在装配图网上搜索。

1、单击此处编辑母版标题样式,,单击此处编辑母版文本样式,,第二级,,第三级,,第四级,,第五级,,,,*,动画原理,1、动画的根本原理,,2、直线动画,,3、曲线动画,,4、高级动画,,5、缓动,,6、高级缓动,什么是动画？,广义而言，把一些原先不活动的东西，变成会活动的东西，即为动画。,,通过逐帧播放而形成的动画效果,,通过程序控制而出现的动画效果,,动画分类,1、逐帧动画：显示位置不变，显示内容发生变化，一般来说，显示内容具备一定得相似性。利用人眼的生物特性而形成一种视觉效果。,,,2、轨迹(程序)动画：显示内容不变，显示位置和显示的大小或者形状发生变化。,,,,注：在游戏中，大局部都是两种

2、动画的结合体！,,逐帧动画,条件：,,1、一系列有序的图形或者图像,,2、能够在同一位置连续播放图形或者图像的程序,,,优点：制作简单，容易理解和修改。能够完全模拟现实中的一些动作。,,,缺点：消耗的资源(内存)相比照较庞大，效率比较低。,,,用处：一般用于制作一些人物或者怪物的动作，尤其是在2D和2.5D游戏中，使用的尤为常见。,,轨迹,(,程序,),动画,条件：,,1、一套用于控制图形或者图像的显示大小，位置和形状的API,,,优点：运行效率高，能够更加真实的模拟一些物理效果。增强游戏的欣赏性和趣味性。,,,缺点：消耗的CPU资源比较庞大，一些比较高级的动画效果，对CPU的消耗巨大。而且，

3、一些比较复杂的动画，实现方式相比照较难让人理解。,,,用处：一般用于制作图形或者图像的位置偏移和显示大小的控制。也可以用于模拟现实中的一些物理效果或者一些程序特效。,,实际上，不管是使用逐帧播放从而出现动画也好还是使用程序制作的动画也好，本质上来说都是为了让我们的游戏更加的鲜明和灵活。他们各自有各自的优点，在实际开发中，需要开发者去灵活选择和使用。,,,思考一个问题：,,,什么时候使用逐帧动画？,,什么时候使用轨迹,(,程序,),动画？,直线动画,,,移动,,A(0,100),,B(0,200),,一个显示对象从,A,点移动到,B,点，如何形成我们所谓的动画？,,,直线运动的元素：,,,起始

4、点,(0,100),,,目标点,(0,200),,,移动速度,(?),,,到达目标点所花费的移动时间,(?),s,v,t,一个简单的数学公式！,,s=t*v,,s：路程 t：时间 v：速度,,尽管这个公式很简单，但是会衍生出一系列的模型！以以下出几个常见的：,,明确起点和终点位置,,明确起点和速度,,明确起点和移动时间,,…,,,如果出现上面的情况，我们需要如何思考？,,,,移动,,A(0,100),,B(0,200),,对象S,,1,、自定义速度,v=5;,,Code:,,setInterval(1000,move),,move,函数中,Code:,,S+=5

5、,,移动需要的时间：,20,秒 移动的路程：,100,,2,、自定义时间,t=20;(,单位,/,秒,),,Code:,,setInterval(1000,move),,move,函数中,Code:,,S+=(200-100)/t,,移动需要的时间：,20,秒 移动的路程：,100,,,移动,,A(0,100),,B(100,200),,对象S,,如果运动不是单个轴向的运动，我们怎么办？,,实际上，在flash中，舞台的坐标示意图如下：,,(0,0),,X轴向,,Y轴向,,注：箭头指向的方向表示增大,,A(100,50),,B(300,100),,实际上，在现在的大局部游戏中，尤其

6、是2D游戏中，不管是运动速度多大，也不管运动的方向是什么，我们都可以将运动速度分解为X轴向的速度和Y轴向的速度两个子速度！,,,根据速度的大小和方向(和X或者Y轴向的夹角)，我们就能都获得到X轴向上的速度和Y轴向上的速度。速度计算公式如下：,,V总,,a,,Vx=V,总,*cos a,,Vy=V,总,*sin a,一个简单的粒子特效：,,1、创立一个Box类,,2、创立一个主类,,,在舞台中发生点击的时候，在点击所在的位置创立20个小粒子，然后这些粒子会朝着四面八方移动，当移出舞台的显示区域之后，那么被删除。,,,附加：,,1、给粒子添加不同的样式(样式随机),,2、当鼠标按下并放开中间延迟时

7、间的长短控制粒子的数量,,3、各个粒子的自动消失效果(控制透明度变化),,创立一个粒子发射器：,,1、创立一个Box类,,2、创立一个发射器类,,3、创立一个主类,,,在舞台中发生点击的时候，从指定的发射器出口，往外有规律的发射粒子。,,,附加：,,1、封装粒子类,,2、封装粒子发射器类,,直线动画,---,加速,/,减速运动,在游戏中的运动都会尽量的模拟现实中的运动，因为只有这样才能够让玩家具备更强的代入感，加大游戏本身的吸引力。,,,在现实中，很多的运动都不会是匀速的，一般的运动要么是加速运动要么是减速运动。匀速运动只是一种理想情况下的假设而已。,,,典型的加速运动：重力加速度,,典型的减

8、速运动：摩擦力,,加速运动：,,速度会根据运动时间的变长而越来越快,,,减速运动：,,速度会根据运动的时间变长而越来越慢,,,当然，不管是加速还是减速，在现实生活中都会有临界值，比方说，汽车的引擎好坏决定了汽车的最大速度。地面阻力的大小决定了汽车从急速到停止的时间。而且，注意一点，通常来说，汽车的阻力是不可能让汽车后退的。,,,实际上，在前面做直线运动的时候，运动的速度大小是恒定的。那么加速/减速运动只需要我们在原有的根底之上加上一个逻辑，使得速度按照一定得规律发生变化即可。,,创立一种导弹类型的粒子，具备一定的加速度，当速度到达指定大小(最大速度)之后，变成匀速运动。,,,创立一辆汽车，通过

9、使用键盘按键控制汽车的移动，必须实现：,,1、加速度,,2、最大速度,,3、摩擦力加速度,,4、转弯效果,,曲线动画,---,抛物线,实际上，我们只需要在前面运动的根底之上，稍微转换下思路。,,我们一般将运动分为X轴向的速度和Y轴向的速度，假设，我们让X轴向的速度恒定，然后在Y轴向上加上一个加速度，那会怎么样？,,运行之后的效果是很漂亮的！,,,如果Y轴向上的加速度是向下的，那么就变成了现实中的一种比较常见的抛物线运动。,,如果Y轴向上的加速度是向上的，那么就变成了气球在网上飘动的过程中，被风吹的效果。,,创立一个小球和一个模拟的地面，使用程序实现小球的原地弹动效果和抛物线效果。,,,模拟实现

10、现实中的雪花效果。,,要求：,,1、能够改变风向,,2、能够改变风的大小,,3、能够实现不同大小的雪花的不同飘动效果,,注：一般来说，越大的雪花，受到风力的影响越小,,高级动画,了解完前面的之后，我们开始进入一种随心所欲的动画编程阶段。,,在这个我引入了一个概念：速度向量！,,在数学中，具有一定长度和方向的线段被称为向量！,,,其实在物理运动中，一般都至少会包含两个东西：,,,速度的大小,,,速度的方向,,,如下：,100,,30,,60,,我们将坐标系统分为X轴和Y轴，在设定某个显示对象位置的时候，我们也是在控制这个显示对象的X轴向和Y轴向上的位置。,,,假设，我设定的速度是speed=

11、3,,我希望，某个显示对象能够沿着45度角(如下)方向，每帧移动3个像素的位置。那么我们需要如何实现？,,X轴向,,Y轴向,,45度,,在现实生活中，汽车在转弯的时候，并不会在原地以某个点位中心旋转，可能更多的时候，它需要往前开，然后每一次都会有个最大的旋转角度。,,为了让我们的程序尽量的模拟现实中的情况，我们引入下面几个概念。,,角速度：,,速度的角度偏移量,,速度修正：,,每次改变角速度的同时修正,X,轴向和,Y,轴向的速度,实现跟踪子弹效果,,要求：,,,能够设定子弹的角速度,,,能够设定子弹的跟随目标,,,能够设定子弹的总移动速度,,,补充说明：在完成上述功能之后，将子弹换成导弹

12、图片,,,支持将跟踪子弹设置为图形的功能,高级动画,—,动画的本质,实际上，动画本质上就是每隔一段时间让显示对象移动到指定的位置(这个指定的位置可以是每一次通过一定的规那么指定)，因为连续移动再加上人眼的视觉残留而导致的一种视觉效果。,,,也就是说，实际上，我们只需要通过一定得方式知道下一次显示对象应该出现的位置，然后持续不断的执行这个过程，就能够形成一种比较规律的动画效果。,一个显示对象的圆周运动,,,一个显示对象的椭圆运动,,,扩展：自定义运动轨迹,(,引导动画,),！,高级动画,—,AS3,中实现动画的方法,1,、侦听帧事件,,2,、使用,setInterval(),,3,、使用,se

13、tTimeout(),,4,、使用,Timer,类,分别使用这四种方法实现显示对象从,A,点,(100,100),移动到,B(400,100),点。,AS中实现动画的四种方式的比照：,,1、侦听帧事件,,执行效率在几种方式中是最高的，缺点是不能控制舞台中的某一个显示对象的运动速率。,,2、使用setInterval(),,使用简单，能够独立控制某一个显示对象。缺点是启动和停止相比照较占用资源，而且，当舞台中存在大量的可显示对象的时候，控制起来相对会比较麻烦。,,3、使用setTimeout(),,使用方式和特点与setInterval()差不多，相对来说， setTimeout()更加容易控制

14、触发频率，但是setTimeout()在制作一个相对复杂的应用的时候会加大理解的难度。,,4、使用Timer类,,使用事件机制实现延迟的循环动作，使用相对复杂，精度和setInterval()以及setTimeout()差不多。,,,注：在Flash中，我们一般会选择使用帧侦听的方式实现动画，因为相对来说，他的实现效率最高，而且效果最好！,缓动,在现实生活中，很多运动都是区别于以上的运动效果的。比方说，弹簧的运动，钟摆的运动等等。,,,在程序设计的过程中，为了加强与用户的交互以及用户的体验，我们需要给一些平淡物体的动画加上一些让人〞惊喜〞的元素——缓动！,,,思考：,,什么时候需要加缓动效果？

15、,,如何实现缓动效果？,三角函数的波形：,如果我们将波形和显示对象的位置对应起来，会产生什么样的变化？,如果我们绑定的是显示对象的大小呢？,心跳运动例如,,,,假设，我们使用一个波形控制位置，一个波形控制缩放？会得到怎么样的结果呢？,,,再假设，我们将一个波形控制X轴向一个波形控制Y轴向？又会得到什么样的结果？,,,再假设…,心跳运动例如,,,,假设，我们使用一个波形控制位置，一个波形控制缩放？会得到怎么样的结果呢？,,,再假设，我们将一个波形控制X轴向一个波形控制Y轴向？又会得到什么样的结果？,,,再假设…,Tween 类使您能够使用 ActionScript，通过指定目标影片剪辑的属性在假

16、设干帧数或秒数中具有动画效果，从而对影片剪辑进行移动、调整大小和淡入淡出操作。 Tween 类还使您能够指定各种缓动方法。,,“缓动〞是动画运行期间的渐进加速和渐进减速效果，有助于使动画显得更逼真。 fl.transitions.easing 包提供了很多缓动方法〔包括这种加速和减速的等式〕，它们会相应地更改缓动动画。,,Tween,假设要使用 Tween 类的这些方法和属性，请将 new 运算符用于构造函数来创立该类的一个实例，并指定一个缓动方法作为参数。,,例如：,,import fl.transitions.Tween; import fl.transitions.easing.*; var myTween:Tween = new Tween(myObject, "x", Elastic.easeOut, 0, 300, 3, true);,,Tween,的使用,