Web Animation API（五）

文章目录

最后我们来看看WAAPI中的路径问题。

上面这个例子需要在最新的Chrome浏览器中查看，motion-path定义了动画元素运行的路径：

#motioner {
  motion-path: path("M200 200 S 200.5 200.1 348.7 184.4z");
}

motion-offset设置了元素运行的起点和终点，用WAAPI实现如下：

var m = document.getElementById('motioner');
m.animate([
  { motionOffset: 0 },
  { motionOffset: '100%' }
], 1000);

css实现：

#motioner {
  animation: path-animation 1s;
}
@keyframes path-animation {
  0% { 
    motion-offset: 0;
  }
  100% { 
    motion-offset: '100%';
  }
}

最后一个属性是motion-rotation， 它定义了元素在运行轨迹上的旋转特性。