移动端常见问题(动画演示)
程序员文章站
2022-07-02 11:30:09
移动端动画 红色勾勾代表强烈推荐 transition实现动画案例: 移动端动画
移动端动画
红色勾勾代表强烈推荐
transition实现动画案例:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100;//移动的距离 btn.addeventlistener("click",function(){ box.style.transform="translate3d("+dest+"px,0,0)"; },false); </script> </body> </html>
也可以提取成函数的写法:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;transition:transform 1s;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100;//移动的距离 btn.addeventlistener("click",function(){ move(box,dest); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } </script> </body> </html>
animation动画推荐一个animation库,animation.js
可以查看各种动画的样式:
一般情况下推荐使用css3的transition和animation来完成动画,如果不能满足需求,可以考虑js的requestanimationframe
不做css动画时,记得一定要去掉transition属性
requestanimationframe的特点是:调用一次只执行一帧;如果想要持续执行,就需要递归。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>移动端动画</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style> *{padding:0;margin:0;} .box{width:100px;height: 100px;background-color: pink;} </style> </head> <body> <button id="btn">start</button> <div class="box" id="box"></div> <script> //requestanimationframe的兼容性处理 var requestanimationframe=window.requestanimationframe|| window.webkitrequestanimationframe|| window.mozrequestanimationframe|| window.msrequestanimationframe|| window.orequestanimationframe|| function(fn){ settimeout(fn,16); } var btn=document.getelementbyid("btn"), box=document.getelementbyid("box"), dest=window.innerwidth-100,//移动的距离 speed=1, pos=0; btn.addeventlistener("click",function(){ requestanimationframe(step); },false); function move(el,pos){ el.style.transform="translate3d("+pos+"px,0,0)"; } function step(){ if(pos<dest){ //递归 pos+=speed; move(box,pos); requestanimationframe(step); }else{ pos=dest; move(box,pos); } } </script> </body> </html>
上一篇: DSP与STM32的对比浅见(二)
下一篇: 租用游艇问题(暴力法/动态规划)