Css3-animation画动画实战与心得

最近接到一个H5动画的任务,大概状况是这样:

整体动画长度超过10s,这是一个难点,也是唯一的难点。

关于动画的动作拆解和场景分离,先不在这里说,主要说下写大量animation的感受和问题。

总结出的问题:

问题1:为浏览器兼容产生了大量的重复代码;

问题2:连贯动画的执行方案;

问题3:如何保存动画执行后的状态。

 

关于系统限制的几个问题

animation所执行的动画执行后会回到原来的状态;

循环状态的animation在大多数浏览器在重播的时候会有时间差;

变化频率较高的动画会收到机能的限制,出现卡顿;

setTimeout方法的延时在触摸手机的时候会暂停。

 

想到的一些解决方案:

1、既要写animation又要写-webkit-animation(@keyframe也是如此),只是想想就知道一个几秒的动画脚本要写多少重复代码了。

我的解决方案是把动画脚本和普通样式分离,然后先只写webkit的脚本(方便调试),然后再起一个文件单独写通用样式,这样维护一个动画脚本就好了,不用每次修改效果都要改两个地方。(上述操作也可以自行写构建脚本自动化完成,less、sass看情况使用~)

2、经过测试,animation里的infinite属性在replay的时候,并不是无缝的,而是有时差的,而且各浏览器状况不一样,所以想用此属性跟其他元素做组合效果要有准备。

3、因为动画每次执行后都会回到最初的状态,所以我们需要一个方法保存执行后的状态,我的方法是用setTimeout同步动画的时间,在合适的时候加一个心得class来保存元素的当前状态以便在下一个场景中进行新的动画。但是在手机端,手指触摸屏幕会让js暂停运行(wp不会),虽然animation也会暂停,但仍会产生不可以预知的错误,具体解决方案还在研究中。

 

总结:

显然,只要方法得当,animation是完全可以胜任长时间动画的,这让我们摆脱了没有flash,动画实现门槛高的窘境,相反从某些角度,css3写一些动画灵活性更强。

发表回复