用JS修改或创建CSS3 animation @keyframes关键帧属性

JavaScript015

用JS修改或创建CSS3 animation @keyframes关键帧属性,第1张

CSS3动画以百分比表示关健帧,你可以随意从0%-100%自己定义每个关健帧的动作。0%就是开始,100%就是结束。

@-webkit-keyframes anime {

0%{把样式写这里}

50%{把样式写这里}

100%{把样式写这里}

}

使用缓动功能,您可以加快或放慢动画的开头或结尾速度,以获得更加逼真或更加令人愉悦的效果。该技术用于修改 Flash 计算补间中的属性关键帧之间的属性值的方式。如果不使用缓动,Flash 在计算这些值时,会使对值的更改在每一帧中都一样。如果使用缓动,则可以调整对每个值的更改程度,从而实现更自然、更复杂的动画。缓动是应用于补间属性值的数学曲线。补间的最终效果是补间和缓动曲线中属性值范围组合的结果。例如,在制作汽车经过舞台的动画时,如果让汽车从停止开始缓慢加速,然后在舞台的另一端缓慢停止,则动画会显得更逼真。如果不使用缓动,汽车将从停止立刻到全速,然后在舞台的另一端立刻停止。如果使用缓动,则可以对汽车应用一个补间动画,然后使该补间缓慢开始和停止。一个未应用缓动的运动路径。请注意帧沿路径的均匀分布。已应用“停止并启动(中)”缓动的同一运动路径。请注意路径末尾附近帧的浓度,产生更逼真的汽车加速和减速。可以在属性检查器或动画编辑器中应用缓动。在属性检查器中应用的缓动将影响补间中包括的所有属性。在动画编辑器中应用的缓动可以影响补间的单个属性、一组属性或所有属性。缓动可以简单,也可以复杂。Flash 包含一系列的预设缓动,适用于简单或复杂的效果。在动画编辑器中,还可以创建自己的自定义缓动曲线。缓动的常见用法之一是在舞台上编辑运动路径并启用浮动关键帧以使每段路径中的运行速度保持一致。然后可以使用缓动在路径的两端添加更为逼真的加速或减速。在向属性曲线应用缓动曲线时,属性曲线图形区域中将显示缓动曲线的可视叠加。通过将属性曲线和缓动曲线显示在同一图形区域中,叠加使得在测试动画时了解舞台上所显示的最终补间效果更为方便。因为动画编辑器中的缓动曲线可以很复杂,所以可以使用它们在舞台上创建复杂的动画而无需在舞台上创建复杂的运动路径。除空间属性 X、Y 和 Z 外,还可以使用缓动曲线创建其他任何属性的复杂补间。

实际开发中我们经常会有动图加载的需求,而Cesium不支持纹理贴动图,怎么样基于Cesium实现动图的加载,值得我们研究一波。cesium加载gif格式的动图有些场景能够满足我们的需求,但是有时候,图像的质量不高,颗粒感很明显,会有杂边,如何解决这个难题,又值得我们进入深层次的研究。

首先,查阅相关资料,容易得知:动图的格式有很多种,主要有gif、png、flv、swf等格式。而gif是我们最常见的动图格式,它的原理是通过对多帧图片按时间序列进行切换,从而达到动画的效果。apng格式动画原理和gif差不多。gif的特点是牺牲质量来降低大小,图像信息比较多的情况下,颗粒感明显,会有杂边。apng是普通png图片的升级版,它的后缀依然是.png,包含动态的情况下大小会比普通静态png大出数倍,但是可以做到无损动态展示。

其次,了解了apng动图优势过后,考虑到Cesium的Billboard支持单帧纹理贴图,如果能够将apng动图进行解析,获得时间序列对应的每帧图片,然后按照时间序列动态更新Billboard的纹理,即可实现动图纹理效果。

然后,我们如何进行apng动图的解析?经过不懈的探寻,发现 apng-js 第三方库能够将apng转化为一帧帧图像,正好能够满足我们的需求!!!

注:apng-js第三方库需要经过优化,才能通过script标签直接引用,优化后的链接已奉上!

完整demo可参见 practicalCesiumDemos 中loadApng。