文章插图  
     
  
文章插图  
   晚上好，我不知道有多少朋友还没睡觉 。如果你还有精神，听陈先生谈谈中国风 PPT 出镜率高「卷轴展开」动画效果！  
   
  
   很多人可能看过卷轴动画教程，随便去 B 站上搜索「卷轴 PPT」，哇！教程种类繁多：  
   
  
     
  
文章插图  
   B 站上的卷轴动画教程视频近50 条  
   
  
   但是，陈老师随便看了几个，都比较基础，忽略了很多细节 。  
   
  
   并不是说这些教程的步骤不够具体，而是他们的动画方案在构思环节中错过了一些重要的细节，导致效果不够真实 。  
   
  
   例如，一些教程只在卷轴上添加了左右方向的路径动画，并在卷轴卷轴图片「劈裂」但是因为「劈裂」动画会在对象的两端增加虚拟效果，分裂速度不是线性的，这导致图片的展开速度快于卷轴：  
   
  
     
  
文章插图  
   
  
   或落后于卷轴的运动：  
   
  
     
  
文章插图  
   
  
   看看这个简短版本的效果，你就能理解「劈裂」动画是如何先慢后快导致露馅的:  
   
  
     
  
文章插图  
   
  
   为了避免这个问题，其他教程放弃了「劈裂」动画方案转而采用「障眼法」，用与背景颜色一致的矩形遮挡卷轴外侧的图片：  
   
  
     
  
文章插图  
   
  
   当卷轴在中间时，屏蔽的矩形也在中间，图片被屏蔽；当卷轴移动时，屏蔽矩形也同时移动到两侧，底部的图片显示：  
   
  
     
  
文章插图  
   
  
   这种做法的视觉效果明显优于第一种，但也有一个大问题，即页面背景只能是纯色或垂直渐变，否则阻挡矩形在移动时会暴露 。  
   
  
   对比一下，这是白色背景，好像还行吧？  
   
  
     
  
文章插图  
   添加背景图后……(看看这部动画的原理吧？  
   
  
     
  
文章插图  
   
  
   此外，几乎所有类似的教程（包括其他平台）都忽略了一点，即卷轴应该相对较厚，展开后会逐渐变薄：  
   
  
     
  
文章插图  
   右侧应为展开后的卷轴粗细，为了作对比没有将其分开  
   
  
   如果不做这个效果，在前两个卷轴并排放置时可以看到一小部分图片，这显然违背了现实:

• 少年儿童患2型糖尿病的为啥越来越多了 2型糖尿病最新进展
• 妇女在单位的重要性 女性在社会发展中的重要性
• 什么应当依法开展现场急救培训普及现场救护和卫生健康知识组织志愿者参加现场急救 卫生健康知识情况
• 数学对发展孩子的智力逻辑有什么价值
• 为什么有人说约会三次不能把女生发展为对象的话 三次约会定律
• 思维能力和智力发展有直接关系吗
• 神舟十二号任务内容
• 中国五大车展是哪些
• 影响职业生涯发展的主要因素有哪些
• 糖尿病前期发展到糖尿病要多久 糖尿病足的发展过程