JS动画
1、实现方式:
-gif
-flash
-css3
-JS
2、三要素:
*对象
DOM对象
*属性
*定时器
setInterval、setTimeout、requestAnimationFrame
①setInterval
var intervalID = setInterval(func,delay[,param1,param2,...])
clearInterval(intervalID)
-----func 参数:执行改变属性的操作
-----delay参数:触发的时间间隔
②setTimeout
var timeoutID = setTimeout(func,[delay,param1,param2,...])
clearTimeout(timeoutID)
setInterva与setTimeout的区别:
前一个是每隔一个时间间隔执行一次,后一个是只执行一次。
③requestAnimationFrame
var requestID = requestAnimationFrame(func)
cancelAnimationFrame(requestID)
与前两个定时器的区别:他的间隔时间是不由用户去控制的,而是由显示器的刷新时间控制的。
3、常见动画:
*形变
*位移
*旋转
*透明度
。。。
4、动画函数
var animation = function(ele, 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.style[attr] = to + 'px';
clearInterval(intervalID);
}
}
ele.style[attr] = from + 'px';
var intervalID = setInterval(step, 10);
}
示例:图片轮播
描述:轮播图下面都有缩略图,缩略图下面有一个进度条(当进度条完成时,该缩略图就播放完毕),当点击缩略图时,就播放相应的大图。
*进度条:
//使用setInterval
var process = function(prcsswrap, drtn, intrvl, callback){
var width = prcsswrap.clientWidth;
//获取对象
var prcss = prcsswrap.getElementsByClassName('prcss')[0];
var count = drtn/intrvl;
var offset = Math.floor(width/count);
var tmpCurrent = CURRENT;
//修改属性值
var step = function(){
if(tmpCurrent !== CURRENT){
prcss.style.width = '0px';
return;
}
var des = getNum(prcss.style.width) + offset;
if(des < width){
prcss.style.width = getNum(prcss.style.width) + offset + 'px';
}else if(des == width){ //说明动画已经完成,就要清除掉一个动画
clearInterval(intervalId);
prcss.style.width = '0px';
PREV = CURRENT;
CURRENT = NEXT;
NEXT ++;
NEXT = NEXT%NUMBER;
if(callback)
callback();
}else{
prcss.style.width = width + 'px';
}
}
//触发定时器
var intervalId = setInterval(step, intrvl);
};
//使用setTimeout
var process = function(prcsswrap, drtn, intrvl, callback){
var width = prcsswrap.clientWidth;
var prcss = prcsswrap.getElementsByClassName('prcss')[0];
var count = drtn/intrvl;
var offset = Math.floor(width/count);
var tmpCurrent = CURRENT;
var step = function(){
if(tmpCurrent !== CURRENT){
prcss.style.width = '0px';
return;
}
var des = getNum(prcss.style.width) + offset;
if(des < width){
prcss.style.width = getNum(prcss.style.width) + offset + 'px';
setTimeout(step, intrvl);
} else if(des == width){
prcss.style.width = '0px';
PREV = CURRENT;
CURRENT = NEXT;
NEXT ++;
NEXT = NEXT%NUMBER;
if(callback)
callback();
}else{
prcss.style.width = width + 'px';
}
}
var timeoutId = setTimeout(step, intrvl);
};
//使用requestAnimationFrame
var process = function(prcsswrap, drtn, intrvl, callback){
var width = prcsswrap.clientWidth;
var prcss = prcsswrap.getElementsByClassName('prcss')[0];
var count = drtn/intrvl;
var offset = Math.floor(width/count);
var tmpCurrent = CURRENT;
var step = function(){
if(tmpCurrent !== CURRENT){
prcss.style.width = '0px';
return;
}
var des = getNum(prcss.style.width) + offset;
if(des < width){
prcss.style.width = getNum(prcss.style.width) + offset + 'px';
requestAnimationFrame(step);
}else if(des == width){
prcss.style.width = '0px';
PREV = CURRENT;
CURRENT = NEXT;
NEXT ++;
NEXT = NEXT%NUMBER;
if(callback)
callback();
}else{
prcss.style.width = width + 'px';
}
}
var requestId = requestAnimationFrame(step);
};
*左右移动:
//左右移动
var animation = function(ele, from, to, callback){
var distance = Math.abs(to - from);
var cover = 0;
var symbol = (to - from)/distance;
var stepLength = Math.floor((distance*STEP)/SPEED);
var step = function(){
var des = cover + stepLength;
if(des < distance){
cover += stepLength;
ele.style.left = getNum(ele.style.left) + stepLength*symbol + 'px';
}else {
clearInterval(intervalId);
ele.style.left = to + 'px';
if(callback)
callback();
}
}
var intervalId = setInterval(step, STEP);
};