使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题

html-css015

使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题,第1张

网页中使用gif动态图时,部分IE浏览器会出现动画不流畅的效果,体验很不好。故可以考虑使用CSS3 animation来控制动画播放,避免使用gif动态图。其实际原理为,把动态图拼接成当行排列的雪碧图,通过CSS3 animation控制雪碧图的移动速度,进而模拟gif的图片播放效果。

不光是css3,gif动画也是,不信你打开一个gif 滚动的时候看它还动不动。

iOS最先响应屏幕反应。响应顺序依次为Touch——Media——Service——Core架构,当用户只要触摸接触了屏幕之后,系统就会最优先去处理屏幕显示也就是Touch这个层级,然后才是媒体(Media),服务(Service)以及Core架构。

所以说,当系统接收到Touch事件之后会优先响应,此时会暂停屏幕上包括js、css的渲染。这个时候不光是css动画不动了,哪怕页面没有加载完如果你手指头还停留在屏幕上那么页面也不会继续加载,直到你的手松开。

解决办法有两个,各有瑕疵:

不要使用 scroll 事件(此事件会被暂停),而是采用 touchmove(此事件会在用户触屏滚动的时候不断触发)。瑕疵是,在结束触屏后惯性滚动的时间里,touchmove 无法被触发了(scroll 当然也不行);

基于上一种方法,在所有的 touchmove 事件中,强行 preventDefault 阻止掉事件,然后根据 event.pageY 来手工设置所滑动元素的 scrollTop 值。当然,这样一来就没有了惯性滚动。

你也可以在 touchend 之后,手工模拟惯性滚动,计算速度以及速度衰减,可以参考各种各样的滚动插件。

①:用css3rotate旋转的话,可以随时修改动画的背景色和旋转速度等,而gif只能重新修改图片再导出,但是有个缺点就是只有safari可以很好地支持,chrome下支持不是很好;

②:在比较复杂的动画,css3rotate需要通过控制多张图片,此时的代码量会很大,而是用gif图的话则不需要过多的代码;

③:在兼容性方面:css3只有高级版本的浏览器才兼容,而gif几乎所有浏览器都能够兼容。