小程序中的关键帧动画animate

3,514 阅读1分钟

最近做小程序手持弹幕时,需要通过动画实现一些弹幕特效

问题
如何控制文字Y轴滚动时,X轴同时震动?

X轴,Y轴运动时间不一致
X轴,Y轴位移距离不同

通过CSS的动画控制不能实现以上效果,因为X轴动画时间和Y轴动画时间是相冲突的,如上例动画中的Y轴滚动速度明显高于X轴抖动的速度

解决方法
微信官方关键帧动画

这个关键帧动画应该要新于之前的animation动画,还是比较好用的,上面给出了链接,大家可以去研究一下

我们使用关键帧动画配合css动画一起,实现将两种冲突的轴向动画融合一起

demo