文章目录

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

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

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

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

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

css实现:

1
2
3
4
5
6
7
8
9
10
11
#motioner {
animation: path-animation 1s;
}
@keyframes path-animation {
0% {
motion-offset: 0;
}
100% {
motion-offset: '100%';
}
}

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

文章目录