第6章 计算机动画原理.ppt

1、数字媒体技术应用设计,第6章 计算机动画原理,第6章 计算机动画原理,1,第6章 大纲,6.1 动画的原理与发展 动画的视觉原理 动画的概念和发展 6.2 计算机动画的基本原理 实时动画与矢量动画 二维帧动画 帧动画的主要形式 三维动画,6.3 二维帧动画构成 GIF文件结构 简单帧动画的制作 GIF动画的应用 6.4 变形动画 变形的原理 变形动画的实现 6.5 综合案例 练习6 简单动画应用,第6章 计算机动画原理,2,6.1 动画的原理与发展,1 动画的视觉原理 案例6-1：动画的瞬间画面是静态图像 观摩案例,动画中帧的概念: 第1帧 中间帧 结束帧,第6章 计算机动画原理,3,视觉残留

2、原理： 反射到人眼的光影要在视觉中保留一段短暂的时间才会消失。 视觉残留实验 结论: （1）画面刷新率为每秒24帧（画面停留40毫秒)左右，则人眼看到的是连续的运动效果。 （2）电影放映的标准：每秒24帧的速率,能最有效地使运动的画面连续流畅。 （3） 24帧的速率画面还有闪烁，要消除画面的闪烁感，刷新率还要提高一倍。,6.1 动画的原理与发展,1 动画的视觉原理 案例6-2：视觉残留实验,第6章 计算机动画原理,4,6.1 动画的原理与发展,2 动画的概念和发展 案例6-3 传统动画片的概念 播放与观摩,案例 电脑动画片狮子王,第6章 计算机动画原理,5,6.1 动画的原理与发展,2 动画的

3、艺术特征 动画的基本要素: “绘画”、“动作”、“影片” 动画的创意与设计 （1）故事结构 （2）美术风格 （3）动作风格 观摩分析: “纯平爱情故事”,角色造型,动作设计,世界的转变,第6章 计算机动画原理,6,6.2 计算机动画的基本原理,1 实时动画与矢量动画,采用各种算法来实现物体的运动控制，计算机对输入的数据进行快速处理，并实时将结果显示出来。 实时动画的响应时间与许多因素有关： 计算机的运算速度； 图形的计算是使用软件或硬件; 所描述的景物是复杂或简单; 动画图像的尺寸。,第6章 计算机动画原理,7,6.2 计算机动画的基本原理,1 实时动画与矢量动画 矢量动画的特点 以”纯平爱情

4、故事”为例:,矢量文字,位图,矢量图形,放大后比较,第6章 计算机动画原理,8,6.2 计算机动画的基本原理,1 实时动画与矢量动画 矢量动画的特点,可类比矢量图与位图的不同特点,第6章 计算机动画原理,9,6.2 计算机动画的基本原理,1 实时动画与矢量动画,案例: “海上升明月”,Flash矢量动画 播放观摩,案例6-5: 64K Demo,实时运算动画 播放观摩,第6章 计算机动画原理,10,6.2 计算机动画的基本原理,2 二维帧动画,与矢量动画相对应，一幅画面称为一帧。 记录帧数据下来，并按照一定的编码方式构成动画文件。 帧动画又分成: 二维帧动画: 类似于传统卡通片; 三维动画:

5、类似于传统木偶片 案例6-6: TITANIC屏保动画 通过位图移动构成的二维动画, 动画观摩,第6章 计算机动画原理,11,6.2 计算机动画的基本原理,2 二维帧动画,案例6-6: TITANIC屏保动画 技巧: 通过位图移动构成的二维动画: 大小共22幅位图,通过色彩渐变、淡入/淡出、移动、叠加等处理和显示达到一种动态效果。 文件容量（数据+程序）：3.8MB 播放时间：2分钟； 文件格式：exe 播放观摩,第6章 计算机动画原理,12,6.2 计算机动画的基本原理,三维动画 计算机处理传统的木偶动画: 造型: 建立角色、实物和景物的三维数据模型 着色: 给各个模型“贴上”材料，相当于各

6、个模型有了外观 运动控制: 模型在计算机的控制下在三维空间里运动，或远或近，或旋转或移动，或变形或变色等等。 动画生成: “架上”虚拟的摄像机，调整好镜头，“打上”灯光， 最后形成一系列栩栩如生的影片画面。 案例6-9：麦克的新车,第6章 计算机动画原理,13,6.3 二维帧动画构成,GIF文件结构,特点: 可包含多帧不同幅面的位图 仅支持256色 可设置某种色为透明色 顺序显示各帧,即构成帧动画; 适合网络应用,动画图标等 图像格式,不能加入音频,交错扫描标志,图像数据,第6章 计算机动画原理,14,6.3 二维帧动画构成,2 二维帧动画,案例6-12 苹果落叶 用photoshop制作Gi

7、f动画,关键帧复制多层,编辑每层叶子的渐变效果,调整动画每帧（层）的延时,第6章 计算机动画原理,15,6.3 二维帧动画构成,3 GIF动画应用,案例6-13 动画小图标,6个关键帧,只有局部变化(运动),设置动画背景色为透明色,顺序播放形成简单动画,动画图标可与任何背景融合,第6章 计算机动画原理,16,6.3 二维帧动画构成,3 GIF动画应用,案例6-14 GIF动画的叠加,透明的雪花GIF动画,小幅面,共20帧,GIF雪人动画,只有幅面不同的2帧,其中一帧不透明,雪花GIF作为网页的平铺背景图 网页中可插入背景音乐 观摩 产生的综合动画效果,第6章 计算机动画原理,17,6.3 二维

8、帧动画构成,PPT版 平铺Gif雪花,3 GIF动画应用,案例6-14 GIF动画的叠加,叠加Gif雪人,插入音乐,第6章 计算机动画原理,18,6.3 二维帧动画构成,3 GIF动画应用,案例6-15 3000年代的孩子们,技术: 一个ppt文件串起一组GIF动画; 创意: 从孩子们的想象出发，描绘出1000年以后人们的日常生活场景，创意风趣，极具想象。 特点: 充分发挥了GIF的特点，每个动画用简单的几帧加上文字说明，很生动形象地表达了创意主题。 动画观摩,第6章 计算机动画原理,19,6.3 二维帧动画构成,3 GIF动画应用,案例6-16：动画图标的故事 透明的像素小动画 每个GIF只

9、有两帧，动作幅度很小,以像素计 图文故事 点击链接观摩,第6章 计算机动画原理,20,6.4 变形动画,变形的原理 计算机自动生成两个关键帧之间的中间帧 案例6-17：变形的实现过程 动画观摩,预先输入起始关键帧,输入的结束关键帧,起始关键帧的一点,对应结束关键帧上的一点,计算机自动生成中间帧,第6章 计算机动画原理,21,6.4 变形动画,2 变形动画的实现 创意: 选择合适的关键帧, 轮廓具有对应关系 技巧: 连续变形,产生叙事效果 案例6-18：成长中的孩子 选择一组关键帧图像(6个月6岁),动画观摩,第6章 计算机动画原理,22,6.4 变形动画,2 变形动画的实现 案例6-19：广告

10、短片香槟 创意: 世界是一个舞台，人们都是演员。 每个人都有自己的登场和退场时期，而且一生中扮演多个角色。一个人的演出可分为七个阶段，首先是婴儿期) 7个五官相似的演员,半分钟内演绎人一生的变化过程,动画观摩,第6章 计算机动画原理,23,6.5 综合案例：帧动画的设计制作,创意: 十年一瞬间 技巧: 图像处理关键帧; java 程序(或photoshop特效)产生倒影效果; GIF动画; 网页合成,加背景音乐 图像素材:,第6章 计算机动画原理,24,6.5 综合案例：帧动画的设计制作,GIF第一帧,第6章 计算机动画原理,25,6.5 综合案例：帧动画的设计制作,GIF第二帧,点击观摩,第6章 计算机动画原理,26,练习6 简单动画应用,内容 1. 帧动画练习 （1）自选主题，并选择一张素材图，在Photoshop中将其变换处理并顺序生成不同的图层，对应各个中间帧。 （2）切换到Image