可视化学习之动画篇

分类

• 固定帧动画

  预先准备好要播放的若干张静态图像（一般由美术提供现成图片的动画帧图像），然后将这些图依次播放

  .animateDiv {
    background-image: url(xxx);  
    animation: fly .5s step-end infinite;
  }
  //切换帧图片
  @keyframes fly {  
    0% {background-position: -178px -2px;}  
    33% {background-position: -90px -2px;}  
    66% {background-position: -2px -2px;}
  }
  

• 增量动画

  修改每一帧中某个或某几个属性的值，给它们一定的增量

  requestAnimationFrame(function update() {   
      block.style.transform = `rotate(${rotation++}deg)`;   
      requestAnimationFrame(update);  
  });
  

• 时序动画

  根据时间和动画函数计算每一帧中的关键属性值，然后更新这些属性，使用requestAnimationFrame函数。

setInterval 和 requestAnimationFrame(rAF)

1. 使用 setInterval 或 setTimeout 设置的帧频率不能和设备同步；对用户不可见的标签页也会进行绘制

2. rAF的回调函数执行次数通常与浏览器屏幕刷新次数相匹配；当rAF运行在后台标签页或者隐藏的<iframe>里时会被暂停调用。

rAF函数介绍

rAF接收一个回调函数作为参数，如果希望更新动画，需要在回调函数里再次调用rAF。 如果想取消动画，使用cancelAnimationFrame()。