😘浅说react中的动画😘

什么是动画？

动画就是运动。

常见实现动画的方式

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)

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.

参考链接

JS动画效果

原生 JS 实现帧动画库

Using requestAnimationFrame

https://github.com/ustbhuangyi/animation

APNG

http://www.runoob.com/try/try.php?filename=tryjsref_animationstart

stats.js

作者： 曾小乱

喜欢写点有意思的东西 查看曾小乱的所有文章