经过创立场景、创立元素、创立动画、播映动画,完成了一个简略的动画.可是作为一个杂乱项目,这一种方法远远不够.由于动画有先后顺序,有堆叠时刻,这时需求让每一段动画在适宜的时刻播映,所以需求一个智能的控制系统,去办理每一个动画.

红包火山升起喷射的动画做了四件工作:火山升起用时一秒;火山升起今后,火焰喷射用了0.4秒;火山升起今后一起岩浆往下流,也就是说,火焰喷射和岩浆活动一起开端,可是都在火山升起今后才履行;当火焰喷射今后,红包才开端喷射,岩浆本来一直在活动.这几段动画有一个先后顺序,也有堆叠联系.

这儿先简单说一下,CCS在处理这些动画时的短板,如火山升起用了1秒,紧接着让火焰柱喷射,这时,火焰柱开端喷射的时刻在CSS技能里有一个delay特点,比如说推迟1秒钟,然后再让火焰柱喷射;相应地,岩浆活动也是相同的道理,也会推迟1秒钟,然后让岩浆活动.火山升起的时刻,加上火焰柱喷的时刻,这么长的推迟今后再分发红包,这种技能计划尽管处理了疑问,可是没能进步功率.

所以在动画系统里,提出时刻轴的概念.创立时刻轴,并在参加一个动画,给该动画两个参数,即开端时刻和完毕时刻.当然,这两个时刻不仅仅可以用肯定时刻值,还可所以状况码.正常情况下,不会关怀火山升起用了多久,只关怀火山升起完毕的状况.相应地,火山喷射也有一个开端时刻和完毕时刻,但后续的动画并不关怀这个时刻,只需知道火焰喷射完毕这个状况就可以了,再持续下一个动画就可以了.CSS自身没有这么的才能,而JS就可以轻车熟路.