第6章 计算机动画原理

数字媒体数字媒体技术技术应用应用设设计计第第6 6章章 计算机动画原理计算机动画原理第第6 6章章 大纲大纲6.1 动画的原理与发展 u 动画的视觉原理 u 动画的概念和发展 6.2 计算机动画的基本原理 u 实时动画与矢量动画 u 二维帧动画 u 帧动画的主要形式 u 三维动画 6.3 二维帧动画构成 u GIF文件结构 u 简单帧动画的制作 u GIF动画的应用 6.4 变形动画 u 变形的原理 u 变形动画的实现 6.5 综合案例 u练习6 简单动画应用 1第6章 计算机动画原理 6.1 动画的原理与发展动画的原理与发展1 动画的视觉原理 案例6-1：动画的瞬间画面是静态图像 观摩案例动画中帧的概念:第1帧 中间帧 结束帧2第6章 计算机动画原理 视觉残留原理：反射到人眼的光影要在视觉中保留一段短暂的时间才会消失。视觉残留实验结论:（1）画面刷新率为每秒24帧（画面停留40毫秒)左右，则人眼看到的是连续的运动效果。（2）电影放映的标准：每秒24帧的速率,能最有效地使运动的画面连续流畅。（3）24帧的速率画面还有闪烁，要消除画面的闪烁感，刷新率还要提高一倍。6.1 动画的原理与发展动画的原理与发展1 动画的视觉原理 案例6-2：视觉残留实验3第6章 计算机动画原理 6.1 动画的原理与发展动画的原理与发展2 动画的概念和发展 案例6-3 传统动画片的概念 播放与观摩 案例 电脑动画片狮子王4第6章 计算机动画原理 6.1 动画的原理与发展动画的原理与发展 2 动画的艺术特征动画的基本要素:“绘画”、“动作”、“影片”动画的创意与设计 （1）故事结构 （2）美术风格 （3）动作风格 观摩分析:“纯平爱情故事”角色造型 动作设计 世界的转变 5第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理1 实时动画与矢量动画 采用各种算法来实现物体的运动控制，计算机对输入的数据进行快速处理，并实时将结果显示出来。实时动画的响应时间与许多因素有关：计算机的运算速度；图形的计算是使用软件或硬件;所描述的景物是复杂或简单;动画图像的尺寸。6第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理1 实时动画与矢量动画 矢量动画的特点 以”纯平爱情故事”为例:矢量文字 位图 矢量图形放大后比较 7第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理1 实时动画与矢量动画 矢量动画的特点可类比矢量图与位图的不同特点可类比矢量图与位图的不同特点8第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理1 实时动画与矢量动画 u案例:“海上升明月”Flash矢量动画播放观摩u案例6-5:64K Demo 实时运算动画播放观摩9第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理2 二维帧动画 与矢量动画相对应，一幅画面称为一帧。记录帧数据下来，并按照一定的编码方式构成动画文件。帧动画又分成:二维帧动画:类似于传统卡通片;三维动画:类似于传统木偶片案例6-6:TITANIC屏保动画 通过位图移动构成的二维动画,动画观摩10第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理2 二维帧动画 案例6-6:TITANIC屏保动画 技巧:通过位图移动构成的二维动画:大小共22幅位图,通过色彩渐变、淡入/淡出、移动、叠加等处理和显示达到一种动态效果。文件容量（数据+程序）：3.8MB播放时间：2分钟；文件格式：exe 播放观摩11第6章 计算机动画原理 6.2 计算机动画的基本原理计算机动画的基本原理3三维动画 计算机处理传统的木偶动画:造型:建立角色、实物和景物的三维数据模型着色:给各个模型“贴上”材料，相当于各个模型有了外观运动控制:模型在计算机的控制下在三维空间里运动，或远或近，或旋转或移动，或变形或变色等等。动画生成:“架上”虚拟的摄像机，调整好镜头，“打上”灯光，最后形成一系列栩栩如生的影片画面。案例案例6-9：麦克的新车麦克的新车 12第6章 计算机动画原理 标记/版本号循环选项透明色选择帧数据文件头GIF窗口大小背景色公共调色板注释选项帧控制透明色标志用户键入标志延时消隐方式图像尺寸图像位移交错扫描标志本地调色板标志本地调色板文本附加选项图像数据6.3 二维帧动画构成二维帧动画构成可可重重复复1GIF文件结构 特点:可包含多帧不同幅面的位图仅支持256色可设置某种色为透明色顺序显示各帧,即构成帧动画;适合网络应用,动画图标等图像格式,不能加入音频 交错扫描标志图像数据13第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成2 二维帧动画 u 案例6-12 苹果落叶 用photoshop制作Gif动画关键帧复制多层关键帧复制多层编辑每层叶子的渐变编辑每层叶子的渐变效果效果调整动画每帧（层）调整动画每帧（层）的延时的延时14第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成3 GIF动画应用u 案例6-13 动画小图标6 6个关键帧个关键帧,只有局部变化只有局部变化(运动运动)设置动画背景色为透明色设置动画背景色为透明色顺序播放形成简单动画顺序播放形成简单动画动画图标可与任何背景融合动画图标可与任何背景融合15第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成3 GIF动画应用u 案例6-14 GIF动画的叠加 透明的雪花透明的雪花GIFGIF动画动画,小幅面小幅面,共共2020帧帧GIFGIF雪人动画雪人动画,只有幅面不同的只有幅面不同的2 2帧帧,其中一帧不透明其中一帧不透明 雪花GIF作为网页的平铺背景图 网页中可插入背景音乐 观摩 产生的综合动画效果16第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成 PPTPPT版版 平铺平铺GifGif雪花雪花3 GIF动画应用u 案例6-14 GIF动画的叠加 叠加叠加GifGif雪人雪人 插入音乐插入音乐17第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成3 GIF动画应用动画应用u 案例案例6-15 6-15 3000年代的孩子们年代的孩子们 技术技术:一个一个ppt文件串起一组文件串起一组GIF动画动画;创意创意:从孩子们的想象出发，描绘出从孩子们的想象出发，描绘出1000年以后人年以后人们的日常生活场景，创意风趣，极具想象。们的日常生活场景，创意风趣，极具想象。特点特点:充分发挥了充分发挥了GIF的特点，每个动画用简单的几的特点，每个动画用简单的几帧加上文字说明，很生动形象地表达了创意主题。帧加上文字说明，很生动形象地表达了创意主题。动画观摩动画观摩18第6章 计算机动画原理 6.3 二维帧动画构成二维帧动画构成3 GIF动画应用动画应用案例案例6-16：动画图标的故事：动画图标的故事u 透明的像素小动画透明的像素小动画u 每个每个GIFGIF只有两帧，动作幅度很小只有两帧，动作幅度很小,以像素计以像素计u 图文故事图文故事u 点击链接观摩点击链接观摩19第6章 计算机动画原理 6.4 变形动画变形动画1变形的原理变形的原理计算机自动生成两个关键帧之间的中间帧计算机自动生成两个关键帧之间的中间帧案例案例6-17：变形的实现过程：变形的实现过程 动画观摩动画观摩预先输入起始关键帧预先输入起始关键帧输入的结束关键帧输入的结束关键帧起始关键帧的一点起始关键帧的一点对应结束关键帧上的一点对应结束关键帧上的一点 计算机自动生成中间帧20第6章 计算机动画原理 6.4 变形动画变形动画2 变形动画的实现变形动画的实现创意创意:选择合适的关键帧选择合适的关键帧,轮廓具有对应关系轮廓具有对应关系 技巧技巧:连续变形连续变形,产生叙事效果产生叙事效果案例案例6-18：成长中的孩子：成长中的孩子 选择一组关键帧图像选择一组关键帧图像(6个月个月6岁岁)动画观摩动画观摩21第6章 计算机动画原理 6.4 变形动画变形动画2 变形动画的实现变形动画的实现案例案例6-19：广告短片：广告短片香槟香槟 创意创意:世界是一个舞台，人们都是演员。每个人都有自己的登场和退场时期，而且一生中扮演多个角色。一个人的演出可分为七个阶段，首先是婴儿期)7个五官相似的演员,半分钟内演绎人一生的变化过程动画观摩动画观摩22第6章 计算机动画原理 6.5 综合案例：帧动画的设计制作综合案例：帧动画的设计制作创意创意:十年一瞬间十年一瞬间技巧技巧:图像处理关键帧;java 程序(或photoshop特效)产生倒影效果;GIF动画;网页合成,加背景音乐图像素材图像素材:23第6章 计算机动画原理 6.5 综合案例：帧动画的设计制作综合案例：帧动画的设计制作GIF第一帧24第6章 计算机动画原理 6.5 综合案例：帧动画的设计制作综合案例：帧动画的设计制作GIF第二帧 点击观摩25第6章 计算机动画原理 练习练习6 简单动画应用简单动画应用内容1.帧动画练习（1）自选主题，并选择一张素材图，在Photoshop中将其变换处理并顺序生成不同的图层，对应各个中间帧。（2）切换到ImageReady中，调整动画各帧的显示时间，以达到一个简单动画的效果。2简单动画设计按一定的创意重新设计图像系列文件，并生成GIF动画或变形动画。简要说明动画创意及使用的技巧。要求 1提交动画创意作品，简要说明动画创意及使用的技巧。注:变形动画可在第10章学习Flash后练习.26第6章 计算机动画原理 谢谢参与谢谢参与 27第6章 计算机动画原理