前端开发之 - 运动（setTimeout、transition、animation、transform）
总结下实现webapp动画的学习过程。
首先复习下pc端：
pc端动画离不开js计时器，无论是setInterval还是setTimeout。按照运动形式可以分为：匀速运动、缓冲运动、摩擦运动、以及其它高级运动。
缓冲运动：
下面封装了一个缓冲运动：（源于秒味）：
function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; if(attr == 'opacity'){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur = Math.round(parseFloat(getStyle(obj,attr))*100); }else{ iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; } }else{ iCur = parseInt(getStyle(obj,attr)) || 0; } var iSpeed = (json[attr] - iCur)/20; iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')'; obj.style.opacity = (iCur + iSpeed)/100; }else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }
缓冲运动是js运动世界中的最简单的运动，因为它的速度一直会递减到1，在像素的世界里，这使得物体最后可以恰恰好好运动到终点的位置，一个像素不差。
匀速运动：
运动的过程中速度恒定不变，所以运动到最后不一定恰好到达终点：
所以我们要在运动的最后增加判断，if下一次运动将超过终点（这里是400），就停止计时器，并把物体拉回到终点。示例如下：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width:100px; height: 100px; background: red; position: absolute; left: 0px; top: 30px;} </style> <script> window.onload = function() { var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); var iTimer = null; oBtn.onclick = function() { startMove(30,400); } function startMove(speed,target) { clearInterval(iTimer); iTimer = setInterval(function() { if (oDiv.offsetLeft >= target) { clearInterval(iTimer); oDiv.style.left = target+'px'; console.log(target) } else { oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } }, 30); } } </script> </head> <body> <input type="button" value="动起来" id="btn" /> <div id="div1"></div> </body> </html>
//.....................这里补充pc端的其它运动........................
那么在移动端我们如何做动画呢？
首先认识下简单的touch事件：
例如，我们做一个图片滑动切换效果，从来没有做过移动端的同学一般会把pc端做图片的思路把代码搬过来：
无外乎是pc端的onmousedown、onmousemove、onmouseup等事件...等等 这里可是移动端，这些事件还好使吗？对头，在移动端我们使用的是touch事件：
移动设备上面的click、mouseover、mousedown、mouseup扔然会触发，但是并不会真实的触发，在touchstart触发的300ms之后才会模拟触发click事件，mouseup、mousedown也将会在同一时刻触发。
webkit内的触摸事件：
event.touches数组是一组触摸事件所产生的触摸对象。
touches对象的相关属性：
触摸事件包含下列三个用于跟踪触摸的属性。
- touches:表示当前跟踪的触摸操作的Touch对象的数组（页面上的所有触摸）。
- targetTouches:特定于事件目标的Touch对象的数组（目标元素的所有当前触摸）。
- changedTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组（页面上最新更改的所有触摸-仅列出最后发生的触摸）。
如果你在使用touchend或者gestureend事件，那么changedTouches这个属性 非常重要。在这两种情况下，屏幕上都不会再出现手指，因此targetTouches和touches应该为空，但我们仍然可以通过 changedTouches数组来了解最后发生的事情 。
有了上面的一些参数，我们可以根据pc端的思路来组织一套代码：
setInterval版图片切换：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>。。。</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} /*photo*/ .photo {position:relative;width:100%;height:200px;overflow:hidden;} .photo .number{color:#fff;background:#000;padding:6px 10px;position:absolute;right:0;bottom:0;} .photo .number .page_now, .photo .number .page_all{padding:0 2px;} .photo_tit_box{position: absolute;bottom: 0px;left:0px;width:100%;height: 30px;background: #000;opacity:0.8;} .photo_tit{color: #fff;line-height: 30px;padding: 0 5px;float: left;width:70%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;} .photo_tit_page{float: right;margin-top: 12px;} .photo_tit_page li{height: 8px;line-height:8px;font-size:0px;width:8px;background: #fff;border-radius: 4px;background: #fff;float: left;margin-right: 5px;opacity:0.5;} .photo_tit_page li.active{opacity:1;} .detailpic_ul{position:absolute;top:0px;left:0px;} .detailpic_li{height:200px;text-align:center;background:#e1e1e1;float:left;background: #aad8f3;overflow: hidden;} .detailpic_li img{display:inline-block;height:200px;} /*photo end*/ </style> <script src="http://192.168.34.59:8080/target/target-script-min.js#anonymous"></script> </head> <body style="height:1000px;"> <div class="photo"> <ul class="detailpic_ul"> <li class="detailpic_li"><a href="http://www.baidu.com">1<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">2<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">3<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">4<img src="pic/2-1.jpg" alt="" /></a></li> </ul> </div> <script> function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } }; //缓冲类型运动 setInterval 设置 function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; var speed = 0; if(attr == 'opacity'){ if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){ iCur = Math.round(parseFloat(getStyle(obj,attr))*100); } else{ iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100; } }else{ iCur = parseInt(getStyle(obj,attr)) || 0; } iSpeed = (json[attr] - iCur)/4; iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn = false; } if(attr == 'opacity'){ obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')'; obj.style.opacity = (iCur + iSpeed)/100; } else{ obj.style[attr] = iCur + iSpeed + 'px'; } } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } },30); }; //详细页面 图片切换 function HousePicQh(option){ this.ulClass=option.ulClass; this.index=0; //记录index } //fn : 滑动完之后执行的函数 HousePicQh.prototype.init=function(){ var _this=this; var winW=document.documentElement.clientWidth || document.body.clientWidth; var ulW=0; _this.oUl=document.querySelector("."+_this.ulClass); _this.oLi=_this.oUl.getElementsByTagName("li"); _this.liLen=_this.oLi.length; _this.liW=winW; //初始化 ul li 宽度 for(var i=0;i<_this.liLen;i++){ _this.oLi[i].style.width=winW+"px"; ulW+=winW; }; _this.oUl.style.width = ulW+"px"; _this.oUl.addEventListener("touchstart",function(ev){ var touchs = ev.touches[0]; _this.downX=touchs.clientX; _this.downL=this.offsetLeft; _this.oUl.addEventListener("touchmove",function(ev){ var touchs = ev.touches[0]; var nowX=touchs.clientX; var L=_this.downL+nowX-_this.downX; clearInterval(this.timer) this.style.left=L+"px"; }); //ev.preventDefault(); }) _this.oUl.addEventListener("touchend",function(ev){ var touchs = ev.changedTouches[0]; var nowX=touchs.clientX; var disL=nowX-_this.downX; if(Math.abs(disL)>30){ //默认 滑动需要超过30 disL>0?_this.index--:_this.index++; _this.index=_this.index==-1?0:_this.index; _this.index=_this.index==_this.liLen?_this.liLen-1:_this.index; var L=-_this.index*_this.liW; //运动 startMove(_this.oUl,{"left":L}); _this.oUl.onmousemove=null; }; }); }; //传入参数：ul的class名 var HousePicQh1=new HousePicQh({"ulClass":"detailpic_ul"}); HousePicQh1.init(); </script> </body> </html>
上面代码中touchstart事件最后并没有阻止默认事件，如果阻止了默认事件，设备自带的页面滚动不会生效，点击图片上面的链接也不会跳转，不阻止的话会不会在不同的设备上有其它问题...这个怎么处理我也一直再找答案。
另外：touchend中的 var touchs = ev.changedTouches[0] 如果改成 var touchs = ev.touches[0] 是无效的，原因就是应为触发touchend后屏幕上面已经没有触摸点，所以这里只能用changedTouches捕获页面最后发生的触摸，这个需要注意下。
上面的代码是完全按照pc端做动画的思路来的，借用了这篇文章最开始我们封装的缓冲运动函数，这样的动画用到移动端会导致抖动，原因是：
在所有的浏览器中，js是单线程的，在某一时刻只能有一条语句执行，事件定时器等异步任务中，会加入到执行队列，然后等事件变得空闲时执行。如果浏览器在忙，需要等到空闲之后，下一帧的动画才会绘制，这样就造成了动画的抖动（不流畅）。可以想象，如果我们定时器中的代码执行太慢，会降低界面的相应速度，特别是在性能比较低的移动设备上面。所以我们应该尽量避免使用定时器（setInterval、setTimeout）来完成动画。
transition
我们来试试css过渡transition，它可以对付我们大多数的动画要求，让我们对上面的代码做一点改进。
我们要做的就是动态设置transition的值：（transition已经成为标准，要不要添加前缀取决于你想支持的浏览器版本）
--在touchend的时候设置 ul的样式： "-webkit-transition:left .2s ease-out; transition:left .2s ease-out; "，实现touchend后的动画；
--在touchmove的时候，我们是不需要这样的过渡的，我们需要的是图片列表紧密跟随手机移动，所以设置 "-webkit-transition:none; transition:none; "来取消过渡。
代码如下：
transition版图片切换：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} /*photo*/ .photo {position:relative;width:100%;height:200px;overflow:hidden;} .photo .number{color:#fff;background:#000;padding:6px 10px;position:absolute;right:0;bottom:0;} .photo .number .page_now, .photo .number .page_all{padding:0 2px;} .photo_tit_box{position: absolute;bottom: 0px;left:0px;width:100%;height: 30px;background: #000;opacity:0.8;} .photo_tit{color: #fff;line-height: 30px;padding: 0 5px;float: left;width:70%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;} .photo_tit_page{float: right;margin-top: 12px;} .photo_tit_page li{height: 8px;line-height:8px;font-size:0px;width:8px;background: #fff;border-radius: 4px;background: #fff;float: left;margin-right: 5px;opacity:0.5;} .photo_tit_page li.active{opacity:1;} /*图片切换*/ .detailpic_ul{position:absolute;top:0px;left:0px;} .detailpic_li{height:200px;text-align:center;background:#e1e1e1;float:left;background: #aad8f3;overflow: hidden;} .detailpic_li img{display:inline-block;height:200px;} /*photo end*/ </style> </head> <body style="height:1000px;"> <div class="photo"> <ul class="detailpic_ul"> <li class="detailpic_li"><a href="http://www.baidu.com">1<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">2<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">3<img src="pic/2-1.jpg" alt="" /></a></li> <li class="detailpic_li"><a href="http://www.baidu.com">4<img src="pic/2-1.jpg" alt="" /></a></li> </ul> </div> <script> //详细页面 图片切换 function HousePicQh(option){ this.ulClass=option.ulClass; this.index=0; //记录index } //fn : 滑动完之后执行的函数 HousePicQh.prototype.init=function(){ var _this=this; var winW=document.documentElement.clientWidth || document.body.clientWidth; var ulW=0; _this.oUl=document.querySelector("."+_this.ulClass); _this.oLi=_this.oUl.getElementsByTagName("li"); _this.liLen=_this.oLi.length; _this.liW=winW; //初始化 ul li 宽度 for(var i=0;i<_this.liLen;i++){ _this.oLi[i].style.width=winW+"px"; ulW+=winW; }; _this.oUl.style.width = ulW+"px"; _this.oUl.addEventListener("touchstart",function(ev){ var touchs = ev.touches[0]; _this.downX=touchs.clientX; _this.downL=this.offsetLeft; _this.oUl.addEventListener("touchmove",function(ev){ var touchs = ev.touches[0]; var nowX=touchs.clientX; var L=_this.downL+nowX-_this.downX; this.style.webkitTransition="none"; //新添加 this.style.transition="none"; //新添加 this.style.left=L+"px"; }); //ev.preventDefault(); }) _this.oUl.addEventListener("touchend",function(ev){ var touchs = ev.changedTouches[0]; var nowX=touchs.clientX; var disL=nowX-_this.downX; if(Math.abs(disL)>30){ //默认 滑动需要超过30 disL>0?_this.index--:_this.index++; _this.index=_this.index==-1?0:_this.index; _this.index=_this.index==_this.liLen?_this.liLen-1:_this.index; var L=-_this.index*_this.liW; this.style.webkitTransition="left .2s ease-out"; //新添加 this.style.transition="left .2s ease-out"; //新添加 this.style.left=L+"px"; //新添加 _this.oUl.onmousemove=null; }; }); }; //传入参数：ul的class名 var HousePicQh1=new HousePicQh({"ulClass":"detailpic_ul"}); HousePicQh1.init(); </script> </body> </html>
如果我想再动画完成之后添加一个回调函数，改怎么处理？例如我想在每一次图片切换完之后log一下当前显示的是第几张图片，改如何传入我的回调函数呢？
试试transitionend吧
首先需要针对不同的浏览器版本添加不同的前缀，并赋给eventName：
var trans="transition"; var eventName="transitionend"; var transitions = { 'transition':'transitionend', 'OTransition':'otransitionend', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd', 'MsTransition':'MSTransitionEnd' } for (t in transitions){ if(document.body.style[t]){ trans = t; eventName = transitions[t]; break; } }
剩下的就简单了，只需要给图片列表ul添加事件就可以了
_this.oUl.addEventListener(eventName,function(ev){ console.log(_this.index+1) });
完整代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta name="format-detection" content="telephone=no">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>...</title>
<style>
*{padding: 0px;margin: 0px;font-size: 12px;}
/*photo*/
.photo {position:relative;width:100%;height:200px;overflow:hidden;}
.photo .number{color:#fff;background:#000;padding:6px 10px;position:absolute;right:0;bottom:0;}
.photo .number .page_now,
.photo .number .page_all{padding:0 2px;}
.photo_tit_box{position: absolute;bottom: 0px;left:0px;width:100%;height: 30px;background: #000;opacity:0.8;}
.photo_tit{color: #fff;line-height: 30px;padding: 0 5px;float: left;width:70%;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;}
.photo_tit_page{float: right;margin-top: 12px;}
.photo_tit_page li{height: 8px;line-height:8px;font-size:0px;width:8px;background: #fff;border-radius: 4px;background: #fff;float: left;margin-right: 5px;opacity:0.5;}
.photo_tit_page li.active{opacity:1;}
/*图片切换*/
.detailpic_ul{position:absolute;top:0px;left:0px;}
.detailpic_li{height:200px;text-align:center;background:#e1e1e1;float:left;background: #aad8f3;overflow: hidden;}
.detailpic_li img{display:inline-block;height:200px;}
/*photo end*/
</style>
</head>
<body style="height:1000px;">
<div class="photo">
<ul class="detailpic_ul">
<li class="detailpic_li"><a href="http://www.baidu.com">1<img src="pic/2-1.jpg" alt="" /></a></li>
<li class="detailpic_li"><a href="http://www.baidu.com">2<img src="pic/2-1.jpg" alt="" /></a></li>
<li class="detailpic_li"><a href="http://www.baidu.com">3<img src="pic/2-1.jpg" alt="" /></a></li>
<li class="detailpic_li"><a href="http://www.baidu.com">4<img src="pic/2-1.jpg" alt="" /></a></li>
</ul>
</div>
<script>
//添加浏览器前缀
var trans="transition";
var eventName="transitionend";
var transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd',
'MsTransition':'msTransitionEnd'
}
for (t in transitions){
if(document.body.style[t]){
trans = t;
eventName = transitions[t];
break;
}
}
//详细页面 图片切换
function HousePicQh(option){
this.ulClass=option.ulClass;
this.index=0; //记录index
}
//fn : 滑动完之后执行的函数
HousePicQh.prototype.init=function(){
var _this=this;
var winW=document.documentElement.clientWidth || document.body.clientWidth;
var ulW=0;
_this.oUl=document.querySelector("."+_this.ulClass);
_this.oLi=_this.oUl.getElementsByTagName("li");
_this.liLen=_this.oLi.length;
_this.liW=winW;
//初始化 ul li 宽度
for(var i=0;i<_this.liLen;i++){
_this.oLi[i].style.width=winW+"px";
ulW+=winW;
};
_this.oUl.style.width = ulW+"px";
_this.oUl.addEventListener("touchstart",function(ev){
var touchs = ev.touches[0];
_this.downX=touchs.clientX;
_this.downL=this.offsetLeft;
_this.oUl.addEventListener("touchmove",function(ev){
var touchs = ev.touches[0];
var nowX=touchs.clientX;
var L=_this.downL+nowX-_this.downX;
this.style.webkitTransition="none";
this.style.transition="none";
this.style.left=L+"px";
});
//ev.preventDefault();
})
_this.oUl.addEventListener("touchend",function(ev){
var touchs = ev.changedTouches[0];
var nowX=touchs.clientX;
var disL=nowX-_this.downX;
if(Math.abs(disL)>30){ //默认 滑动需要超过30
disL>0?_this.index--:_this.index++;
_this.index=_this.index==-1?0:_this.index;
_this.index=_this.index==_this.liLen?_this.liLen-1:_this.index;
var L=-_this.index*_this.liW;
this.style.webkitTransition="left .2s ease-out";
this.style.transition="left .2s ease-out";
this.style.left=L+"px";
_this.oUl.onmousemove=null;
};
});
//下面是新添加代码
_this.oUl.addEventListener(eventName,function(ev){
console.log(_this.index+1)
});
};
//传入参数：ul的class名
var HousePicQh1=new HousePicQh({"ulClass":"detailpic_ul"});
HousePicQh1.init();
</script>
</body>
</html>
transitionend的使用还有一个问题:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{width:50px;height: 50px;background: #c50000;position: absolute;top:300px;left: 0px; z-index: 10;-webkit-transition: all 0.25s ease-in; } .obox.on{ left:100px;opacity: 0.5;} </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> <script> //添加浏览器前缀 var trans="transition"; var eventName="transitionend"; var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd', 'MsTransition':'msTransitionEnd' } for (t in transitions){ if(document.body.style[t]){ trans = t; eventName = transitions[t]; break; } } var n=0 var obox=document.querySelector("#obox"); obox.addEventListener(eventName,function(ev){ console.log(++n) //这里执行了两次 }); obox.addEventListener("click",function(){ this.classList.add("on") }) </script> </body> </html>
代码中的console.log(n++)执行了两次，也就是transitionend执行了两次。
因为物体添加class"on"后,实现了两个属性的过渡：left和opacity；如果将"-webkit-transition: all 0.25s ease-in"中的"all"改成"opacity"或者"left",就只会执行一次了。
这个往往和我们需要的效果相违背，我们一般需要的是等物体所有的状态执行完后，只执行一次transitionend。如何解决这个问题？
1、可以记录物体过渡的状态个数m，在脚本的头部声明一个变量n，每次执行transitionend时n++，如果n==m,则执行我们需要的回调函数:
对上个示例的代码稍加改造：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{width:50px;height: 50px;background: #c50000;position: absolute;top:300px;left: 0px; z-index: 10;-webkit-transition: all 0.25s ease-in; } .obox.on{ left:100px;opacity: 0.5;height: 100px;width:50px;} </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> <script> //添加浏览器前缀 var trans="transition"; var eventName="transitionend"; var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd', 'MsTransition':'msTransitionEnd' } for (t in transitions){ if(document.body.style[t]){ trans = t; eventName = transitions[t]; break; } } var n=0; //记录完成的状态数目 var m=3 //需要过渡完成的状态总数 var obox=document.querySelector("#obox"); obox.addEventListener(eventName,function(ev){ n++; if(n==m){ console.log(n); } }); obox.addEventListener("click",function(){ this.classList.add("on") }) </script> </body> </html>
2、记录完成整个过渡需要的时间t，设定setTimeout函数的时间间隔t1==t,在setTimeout中执行相关相关回调函数：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{width:50px;height: 50px;background: #c50000;position: absolute;top:300px;left: 0px; z-index: 10;-webkit-transition: all 0.2s ease-in; } .obox.on{ left:100px;opacity: 0.5;height: 100px;width:50px;} </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> <script> var delay=200; var obox=document.querySelector("#obox"); obox.addEventListener("click",function(){ this.classList.add("on"); setTimeout(function(){ console.log(1) },delay) }) </script> </body> </html>
感觉两个方法都很勉强，不知道有没有更好的解决办法？你要是看到了这里，碰巧你知道更好的解决办法，那么，留言吧。
下面我们来模仿一个失重状态下的小球：
利用传统计时器实现：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{width:50px;height: 50px;line-height: 50px;text-align: center; background: #c50000;position: absolute;top:100px;left: 100px;border-radius: 50%;color: #fff;} </style> </head> <body style="height:1000px;"> <div class="obox" id="obox">点击我</div> <script> var obox=document.querySelector("#obox"); obox.onclick=function(){ drop(this) } function drop(obj){ var speed=0; var a=10; //加速度 var d=document.documentElement || document.body; var winH=d.clientHeight; var h=obj.offsetHeight; var target=winH-h; //目标点 var timer=null; var nowH=obj.offsetTop; clearInterval(timer); timer=setInterval(function(){ speed+=a; nowH += speed; if(nowH == target && speed==0){ clearInterval(timer); return false; } if(nowH >= target){ nowH = target; speed*=-1; console.log(speed) } obj.style.top = nowH+"px"; },30) } </script> </body> </html>
利用transition实现：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{width:50px;height: 50px;line-height: 50px;text-align: center; background: #c50000;position: absolute;top:100px;left: 100px;border-radius: 50%;color: #fff;} </style> </head> <body style="height:1000px;"> <div class="obox" id="obox">点击我</div> <script> //添加前缀 var trans="transition"; var eventName="transitionend"; var transitions = { 'transition':'transitionend', 'OTransition':'oTransitionEnd', 'MozTransition':'transitionend', 'WebkitTransition':'webkitTransitionEnd', 'MsTransition':'msTransitionEnd' } for (t in transitions){ if(document.body.style[t]){ trans = t; eventName = transitions[t]; break; } } //小球运动 var obox=document.querySelector("#obox"); var down=1; //区分下落还是上抛 标记 var o = obox.offsetTop; var b = (document.documentElement.clientHeight || document.body.clientHeight) -obox.offsetHeight; obox.onclick=function(){ var _this=this; drop(this); obox.addEventListener( eventName,function(){ drop(_this); console.log(1) }) } function drop(obj){ if(down){ obj.style[trans]="top .3s cubic-bezier(1,0,0.96,0.91)"; obj.style.top = b+"px"; down = 0; }else{ obj.style[trans]="top .3s cubic-bezier(0,.27,.32,1)"; obj.style.top = o+"px"; down = 1; } } </script> </body> </html>
利用transition实现实现的例子中，ease-in、ease-out、ease-in-out不是我们要的效果，所以例子中用到了-立方赛贝尔，这里是一个非常强大的在线调试工具，你可以随心所欲的调出自己想要的效果。
这篇文章可以参考《贝塞尔曲线与CSS3动画、SVG和canvas的基情》
利用transition实现实现的例子中，效果并不完美，现实生活中会有摩擦损耗和碰撞损耗，且现实中每次运动所用的时间也不是恒定的。
css动画animation
关键帧规则需要为每一个浏览器制造商前缀重写一遍
用animation实现上面的动画（重力作用下的小球）可以完全不用js。
首先利用@keyframe创建关键帧：
@-webkit-keyframes fall{ 0%{ top:100px; -webkit-animation-timing-function:cubic-bezier(1,0,.96,.91); } 50%{ top:300px; -webkit-animation-timing-function:cubic-bezier(1,.27,.32,1); } 100%{ top:100px; -webkit-animation-timing-function:cubic-bezier(0,.27,.32,1); } }
将关键帧应用于选择器:
.obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:100px; left: 100px; -webkit-animation:fall .3s infinite; }
时间函数 animation-timing-function 可以应用到选择器的动画上，或者不同的时间函数可以应用到@keyframe规则中的任意一帧上，注意：定义在关键帧中的样式会覆盖定义到选择器中的样式。
完整实例代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} @-webkit-keyframes fall{ 0%{ top:100px; -webkit-animation-timing-function:cubic-bezier(1,0,.96,.91); } 50%{ top:300px; -webkit-animation-timing-function:cubic-bezier(1,.27,.32,1); } 100%{ top:100px; -webkit-animation-timing-function:cubic-bezier(0,.27,.32,1); } } .obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:100px; left: 100px; -webkit-animation:fall .3s infinite; } </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> </body> </html>
更强大的requestAnimationFrame（请求动画帧 ）
可以看下这篇文章 CSS3动画那么强，requestAnimationFrame还有毛线用
这个东西其实和 setTimeout 功能类似，只不过是使用方法不同，requestAnimationFrame 只需要一个回调函数作为参数，回调函数会在下一次浏览器重绘之后执行，不需要再人为的指定时间间隔。
requestAnimationFrame优点：
1、浏览器自行优化帧速率在内的东西，性能提高。跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那就这个间隔（16.7ms）绘制；如果浏览设备绘制间隔是10ms, 就10ms绘制。这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅。
2、可以达到完美的向下兼容（自己封装）。
3、可以用到css3不能涉及的地方（scrollTop等）。
4、可以支持更多的动画效果（可以支持css3不能支持的 Back、 Bounce 等缓动效果）。
缺点：需要前缀、不能在android浏览器上工作！（可以封装函数来解决）
浏览器支持情况：
我们来创建一个跨浏览器的请求帧方法：
var requestFrame = (function(){ var sFun=null, prefixList=['webkit','moz','ms']; for(var i=0;i<prefixList.length;i++){ sFun=prefixList[i]+"RequestAnimationFrame"; if(window[sFun]){ return function(fn){ window[sFun](fn); } } }; return function(fn){ setTimeout(fn,1000/60); //视频游戏多是60帧 }; })()
或者可以这样：
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })();
下面示例中我们将小球从0移动到300，每帧10：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:0px; left: 100px; -webkit-animation:fall .3s infinite; } </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> <script> var requestFrame = (function(){ var sFun=null, prefixList=['webkit','moz','ms']; for(var i=0;i<prefixList.length;i++){ sFun=prefixList[i]+"RequestAnimationFrame"; if(window[sFun]){ return function(fn){ window[sFun](fn); } } }; return function(fn){ setTimeout(fn,1000/60); //视频游戏多是60帧 }; })() var oBox=document.querySelector("#obox"); var start=0; var target=300; var speed=10; var L=0; move(); function move(){ console.log(1) L = L+speed; oBox.style.top = L+"px"; if(L<target){ requestFrame(move) } } </script> </body> </html>
上面这段代码执行时间的长短会因游览器的不同而不同，如何保证动画执行的总时间跟我们需要的一致？
我们可以定义时间戳，然后在浏览器重绘的时候计算时间差值，进而算出每帧的速度：speed=（target-origin）/ t ；t为浏览器每次重绘的时间间隔；
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} .obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:300px; left: 100px; } </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> <script> var requestFrame = (function(){ var sFun="requestAnimationFrame", prefixList=['webkit','moz','ms']; if(!window[sFun]){ for(var i=0;i<prefixList.length;i++){ sFun=prefixList[i]+"RequestAnimationFrame"; if(window[sFun]){ return function(fn){ window[sFun](fn); } } }; } return function(fn){ setTimeout(fn,1000/60); //视频游戏多是60帧 }; })() var oBox=document.querySelector("#obox"); var origin=0; var target=300; function animate(obj,origin,target,duration,fn){ var L=origin; var beginT=new Date().getTime(); var speed; move(); function move(){ var endT=new Date().getTime(); var diffT=endT-beginT; beginT=endT; speed=(target-origin)/duration*diffT;speed=Math.ceil(speed); if( Math.abs(target -L) > Math.abs(speed) ){ L = L+speed; obj.style.top = L+"px"; requestFrame(move); }else{ obj.style.top = target+"px"; fn && fn(); } } } animate(oBox,origin,target,1000) </script> </body> </html>
这个理论上可以，但是经过测试其实还是有误差的，不同的浏览器每帧的时间不一样，同一个浏览器每次重绘需要的时间也不是总是恒定的。
css变换transform
上面的代码中都是通过改变物体的top值来实现动画，transform变换则不同，它是在DOM被计算后，改变元素的绘出方式，它可以实现位移、缩放、旋转、倾斜等变化，类似ps中的ctrl+t。
transform的3D变换会使浏览器开启设备上面的GPU（设备内置的图形加速硬件），经过硬件加速的变换是目前最快的动画。-开启3d变换常被用来提高动画性能。比较下面两个示例代码：
这里只是将translate改为translate3d，并增加一个为0的Z值，这个在第三维度没有实质的变换，却开启了GPU。
2d变换：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} @-webkit-keyframes move{ 0%{ -webkit-transform:translate(0,0px); -webkit-animation-timing-function:cubic-bezier(1,0,0.96,0.91); } 50%{ -webkit-transform:translate(0,300px); -webkit-animation-timing-function:cubic-bezier(1,0.27,0.32,1); } 100%{ -webkit-transform:translate(0,0px); -webkit-animation-timing-function:cubic-bezier(0,0.27,0.32,1); } } .obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:100px; left: 100px; -webkit-animation:1s move infinite linear; } </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> </body> </html>
3d变换：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta name="format-detection" content="telephone=no"> <meta content="telephone=no" name="format-detection"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>...</title> <style> *{padding: 0px;margin: 0px;font-size: 12px;} @-webkit-keyframes move{ 0%{ -webkit-transform:translate3d(0,0px,0); -webkit-animation-timing-function:cubic-bezier(1,0,0.96,0.91); } 50%{ -webkit-transform:translate3d(0,300px,0); -webkit-animation-timing-function:cubic-bezier(1,0.27,0.32,1); } 100%{ -webkit-transform:translate3d(0,0px,0); -webkit-animation-timing-function:cubic-bezier(0,0.27,0.32,1); } } .obox{ width:50px; height: 50px; line-height: 50px; border-radius: 50%; color: #fff; text-align: center; background: #c50000; position: absolute; top:100px; left: 100px; -webkit-animation:1s move infinite linear; } </style> </head> <body style="height:1000px;"> <div class="obox" id="obox"></div> </body> </html>
translate3d可以用来加速我们的动画，但是仍然建议在动画完成后将3d转换为2d，也就是清除动画完成后清除3d变换。原因如下：
1、经过translate3d变换显示的GPU渲染的图像，而不是实际内容，如果你做的动画是放大的话，那么放大后就会模糊。
2、GPU的内存空间也是有限的，也会被填满，如果我们页面上用了过多的translate3d变换，浏览器会崩溃。
上面两个问题都可以通过transitionend、animationend事件将3d转换为2d来解决。
综上：做动画，移动端尽量不要再使用setTimeout定时器，我们可以选择css3的transition、animation配合transform来实现：transition可以实现两个状态之间的过渡；animation可以定义动画帧、利用requestAnimationFrame(请求动画帧)完成我们需要的大多数复杂动画；translate3d还可以为我们开启浏览器的GPU渲染，来加速动画。
结语：最近尝试了移动端webapp的一个小项目，从pc端转到移动端感觉各种坑，同时也体会了新技术的强大。
勤于总结 乐于分享
