动画

2016-07-18 本文已影响0人 cooore

帧：是动画里的最小单位，它是静态的图像
帧频：是一秒钟播放的帧的数量
一个完整的动画是如何实现的呢？
首先它是由很多帧组成的，人眼是有视觉暂留效果的，当一系列相似的图像用时间轴串联起来之后，如果它的时间间隔足够的小，那么人眼感知的就是一幅流畅的动画。（完全流畅30帧以上）（电影24帧）

实现方式

gif
flash
CSS3
JS

三要素

对象 DOM
属性 width height opacity Left...
定时器 setInterval setTimeout requestAnimationFrame

setInterval

var intervalID = setInterval(func,delay[,param1,param2,...])

func 执行改变属性的操作
delay 触发的时间间隔，以毫秒为单位
每隔指定时间都会执行一次

clearInterval(intervalID)

setTimeout

var timeoutID = setTimeout(func,[delay,param1,param2,...])

delay 触发的时间间隔，默认值为0即立即触发,在指定的时间间隔后只执行一次

clearTimeout(timeoutID)

requestAnimationFrame

var requestID = requestAnimationFrame(func)
cancelAnimationFrame(requestID)

间隔时间是由显示器屏幕的刷新频率控制的（一秒刷新60次）

常用动画

形变改变宽高
位移改变相对位置
旋转
透明度
...

动画函数

var animation = function(ele,attr,from,to){
/*
ele 要进行动画的DOM对象
attr 要改变的属性
from to 属性值从哪个值到哪个值
*/
    var distance = Math.abs(to - from);//距离
    var stepLength = distance/100;//步长
    var sign = (to - from)/distance;//符号
    var offset = 0; //偏移
    var step = function(){
        var tmpOffset = offset + stepLength;
        if(tmpOffset < distance){//每次改变步长
            ele.style[attr] = from + tmpOffset*sign + 'px';
            offset = tmpOffset;
        } else{
            ele.stylep[attr] = to + 'px';
            clearInterval(intervalID);
        }
    }
    ele.style[attr] = from +'px';
    var intervalID = setInterval(step,10);
}

图片轮播

进度条

prcsswrap 对象的父元素
drtn 进度条的一个时间
intrvl 触发定时器的时间间隔
callback 回调函数

动画