第1篇一、引言手翻书动画，又称翻页动画，是一种通过连续翻动纸张上的画面来呈现动态效果的手工艺术形式。
它不仅具有丰富的视觉效果，还能锻炼人们的动手能力和创造力。
本文将介绍手翻书动画的制作过程，并通过实践教学，帮助读者掌握这一独特的艺术形式。
二、手翻书动画的制作原理1. 制作手翻书动画的关键在于纸张上的画面。
每个画面都代表动画的一个帧，画面之间的转换产生动态效果。
2. 动画中的画面应遵循一定的顺序，通过翻动纸张，使画面依次呈现，形成连续的动态效果。
3. 为了使动画更加流畅，画面之间的转换应尽量平滑，避免出现突兀的感觉。
三、手翻书动画的制作步骤1. 确定动画主题：首先，需要确定手翻书动画的主题，如故事、科普、广告等。
2. 设计画面：根据动画主题，设计一系列画面。
画面应具有鲜明的特点，便于观众理解。
3. 制作纸张：将设计好的画面打印或手绘在纸张上。
纸张的大小、材质应根据动画风格和制作要求选择。
4. 分割纸张：将制作好的纸张分割成多个部分，每个部分代表动画的一个帧。
5. 调整画面顺序：将分割好的纸张按照动画顺序排列，确保画面之间的转换自然流畅。
6. 添加文字和特效：在适当的位置添加文字和特效，增强动画的趣味性和观赏性。
7. 制作动画：按照顺序翻动纸张，观察动画效果。
如有需要，可对画面进行调整和优化。
四、手翻书动画教学实践1. 教学目标（1）让学生了解手翻书动画的制作原理和制作步骤。
（2）培养学生动手能力、创新能力和审美能力。
（3）提高学生对动画艺术的兴趣和认识。
2. 教学内容（1）手翻书动画的制作原理（2）手翻书动画的制作步骤（3）手翻书动画的制作技巧3. 教学方法（1）理论讲解：教师通过PPT、视频等形式，向学生讲解手翻书动画的制作原理和制作步骤。
（2）实践操作：学生分组进行手翻书动画的制作，教师巡回指导。
（3）作品展示：学生完成作品后，进行展示和交流，教师进行点评。
4. 教学过程（1）导入：介绍手翻书动画的起源、特点和应用领域，激发学生的学习兴趣。
利用几何画板怎样作图片的翻折动画？在几何画板中，作图片的翻折动画比普通几何图形的翻折动画要多一些环节，下面以一张花卉拼图为例谈谈其操作步骤，其图片做翻折动画的制作可以类推！1.首先把花卉图片导入几何画板中（可以采用直接拖入和复制粘贴的办法），用移动箭头工具移到一定的位置，同时按课件需要的图片大小进行拉伸缩放.2.按下面的位置在图片三个角的顶点处取三个点A B C 、、 （因为图片与点的“合并”默认的最多三个点，1个或2个点调整图片形态不方便，且要保证图片在合并过程中不扭曲变形，取点的位置也有讲究！），同时 在三个点A B C 、、和图片旁竖直画一条线段.3. 双击此线标记为对称轴（或选定此线段 → 变换 → 标记镜面也可.）→ 选定点A B C 、、 → 变换 → 反射即可得到点A B C 、、关于线段的对称点'''A B C 、、.4.复制点A B C 、、为点F E D 、、,且把F E D 、、稍微移开些便于与图片合并；用选择工具选定花卉图片→ 右键 → 编辑 →复制. → 依序选定E D F （要保证图片在与点F E D 、、合并后不扭曲变形且为正放，应从左下角的第一个点E 起依逆时针的顺序选定. ）右键 → 粘贴图片即可.5.依次选中“'''→→→F A D C E B 、、 ”→ 编辑 → 操作类按钮 → 移动 → 可将标签命名为如“向右翻折”→ 选好速度等 → 确定；6.单击按钮“向右翻折”→ 当四个动点还没有运动到目标图形''''A B C 之前 → 再次单击按钮“向右翻折”→ 让运动图形停下来.这一步还是由必要的，使设置下一个动画按钮“向左翻折”方便选点；（下面截图）7.依次选中“→→→F A D C E B 、、 ”→ 编辑 → 操作类按钮 → 移动 → 将标签改为“向左翻折” → 选好速度等 → 确定；（下面截图）8.制作系列组合动画按钮：可以选中刚才的“向右翻折”和“向左翻折”两个按钮 → 编辑→ 操作类按钮 → 系列 → 依序进行 → 设置好两个翻折动画之间的间隔时间等，这样做成一个动画组合按钮，单击系列动画按钮，图形即可连续作向右、向左的翻折运动，操作起来更方便.9.根据课件隐藏不需要的部分.点击动画按钮观看动画效果.下面是图片翻折到最左面、中左和最右面的截图.注：1.在制作图片的翻折动画时要注意选点的对应顺序，否则动画会扭曲变形；2.翻折动画可以看作是图形变换的“反射”和“平移”的结合，其它动画可借鉴.郑宗平 2018年5月20日编创C 'F。
css3实现书本翻页效果的⽰例代码关键要点：1.css3 3d动画的掌握2.如何解决翻转后页⾯内容的改变3.如何保持书本⼀直处于居中位置代码总览<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.book{margin: auto;margin-top: 2rem;transform: translate(0,0);perspective: 5000px;max-width: 40%;height: 800px;position: relative;transition:all 1s ease;}.page{position: absolute;width: 100%;height: 100%;top: 0;right: 0;background-color: pink;cursor: pointer;transition:all 1s ease;transform-origin: left center;transform-style: preserve-3d;}.active{z-index: 1;}.page.flipped{transform:rotateY(-180deg)}.back,.front{text-align: center;position: absolute;backface-visibility: hidden;width: 100%;height: 100%;}.back{transform:rotateY(180deg)}</style><body><div class="book"><div class="page active"><div class="front">封⾯</div><div class="back">1</div></div><div class="page"><div class="front">2</div><div class="back">3</div></div><div class="page"><div class="front">4</div><div class="back">5</div></div><div class="page"><div class="front">6</div><div class="back">尾⾯</div></div></div></body><script>let pages = document.getElementsByClassName('page')let book = document.getElementsByClassName('book')[0]function bookMove(drect){if(drect==='right'){book.style.transform = 'translate(50%,0)'}else if(drect==='left'){book.style.transform = 'translate(0,0)'}else{book.style.transform = 'translate(100%,0)'}}for(let i = 0;i<pages.length;i++){pages[i].addEventListener('click',()=>{if(pages[i].classList.contains('flipped')){pages[i].classList.remove('flipped')pages[i].classList.add('active')if(i===0){bookMove('left')}if(pages[i].nextElementSibling!==null){pages[i].nextElementSibling.classList.remove('active')}else{bookMove('right')}}else{pages[i].classList.add('flipped')pages[i].classList.remove('active')if(i===0){bookMove('right')}if(pages[i].nextElementSibling!==null){pages[i].nextElementSibling.classList.add('active')}else{bookMove('close')}}})}</script></html>要点分析css3动画属性解释：perspective: 5000px; 这⾥是透视属性,可以简单认为是实现了“近⼤远⼩”效果的属性这⾥需要注意perspective需要设置在进⾏了3d变换的元素的⽗元素上，因为进⾏3d变换的元素只有以⽗元素为背景做透视变换才能看到效果。
