什么是动画?
动画就是运动。
常见实现动画的方式
GIF
图像互换格式(GIF,Graphics Interchange Format)是一种位图图形文件格式,以8位色(即256种颜色)重现真彩色的图像。它实际上是一种压缩文档,采用LZW压缩算法进行编码,有效地减少了图像文件在网络上传输的时间。
缺点:
- 不能控制播放和暂停;
- 不能捕捉动画完成的事件;
Animated PNG
APNG(Animated Portable Network Graphics)格式是PNG的位图动画扩展,但未获PNG组织官方认可。其扩展方法类似GIF 89a,仍对原版PNG保持向下兼容。APNG第1帧为标准PNG图像,剩余的动画和帧速等数据放在PNG扩展数据块,因此只支持原版PNG的软件会正确显示第1帧。APNG与Mozilla社区关系密切,格式标准文档设在Mozilla网站。
demo:here
video
demo:here
svg
canvas or webgl
setTimeout/setInterval
function draw () { console.log(jQuery.now()) var raf = jQuery('#raf') if (raf.width() < 900 ) { raf.css('width', raf.width() + 1); setTimeout(draw, 1000 / 60) } } draw()
requestAnimationFrame
function draw () { console.log(jQuery.now()) var raf = jQuery('#raf') if (raf.width() < 900 ) { raf.css('width', raf.width() + 1); requestAnimationFrame(draw) } } requestAnimationFrame(draw)
优点:
- The browser can optimize it, so animations will be smoother
- Animations in inactive tabs will stop, allowing the CPU to chill
- More battery-friendly
css3:demo
- 过度动画(transition)
- 关键帧动画(keyframes)
will-change
The will-change CSS property provides a way for authors to hint browsers about the kind of changes to be expected on an element, so that the browser can set up appropriate optimizations ahead of time before the element is actually changed. These kind of optimizations can increase the responsiveness of a page by doing potentially expensive work ahead of time before they are actually required.
animationstart
关键帧动画开始时触发。
animationend
关键帧动画结束时触发。
animationiteration
关键帧动画重复时触发。
性能监测工具
stats.js
(function(){ var script=document.createElement('script'); script.onload=function(){ var stats = new Stats(); requestAnimationFrame( function loop(){ stats.update(); requestAnimationFrame(loop) } ); document.body.appendChild(stats.domElement); }; script.src='//cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js'; document.head.appendChild(script); })()
FPS
帧率或帧率是用于测量显示帧数的量度。测量单位为“每秒显示帧数”(Frame per Second,FPS)或“赫兹”,一般来说FPS用于描述视频、电子绘图或游戏每秒播放多少幀。
MS
Milliseconds needed to render a frame. The lower the number the better.
参考链接
https://github.com/ustbhuangyi/animation
http://www.runoob.com/try/try.php?filename=tryjsref_animationstart