<强> 1。js实现动画
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> animate
& lt; style>
.ball {
宽度:40像素;
高度:40像素;
margin-bottom: 5 px;
border - radius: 20 px;
}
.ball1 {
背景:红色;
}
.ball2 {
背景:蓝色;
}
.ball3 {
背景:黄色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="球ball1 "祝辞& lt;/div>
& lt; div类="球ball2 "祝辞& lt;/div>
& lt; div类="球ball3 "祝辞& lt;/div>
& lt; script>
var ball1=document.querySelector (“.ball1”);
var ball2=document.querySelector (“.ball2”);
var ball3=document.querySelector (“.ball3”);
动画(球,左,回调函数){
setTimeout(函数(){
var marginLeft=方法(ball.style。marginLeft 10);
如果(marginLeft===左){
回调,,回调();
其他}{
如果(marginLeft & lt;左){
marginLeft +=2;
其他}{
marginLeft -=2;
}
ball.style。marginLeft=marginLeft +“px”;
动画(球,左,回调);
}
13)};
}
动画(100年ball1函数(){
动画(200年ball2函数(){
动画(300年ball3函数(){
动画(200年ball1函数(){
动画(200年ball3函数(){
动画(180年ball2函数(){
动画(220年ball2函数(){
动画(200年ball2函数(){
console.log (“/?;
})
})
})
})
})
})
})
});
& lt;/script>
& lt;/body>
& lt;/html>
上述代码就可以实现一个动画。注意下面几点:
& # 8226;动画的实现往往依赖于setTimeout。
& # 8226;注意ele.style。marginLeft如果开始能够获取,必须从元素的风格中设置了才能获取,否则获取不到。
& # 8226;利用回调可以实现虽然使用了setTimeout还能串行执行。
但是这产生了回调地狱,代码简单点还好说,一旦代码复杂了,我们将很难处理其中的逻辑。所以这时就可以用到es6中的承诺了。
承诺的写法如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> animate
& lt; style>
.ball {
宽度:40像素;
高度:40像素;
margin-bottom: 5 px;
border - radius: 20 px;
}
.ball1 {
背景:红色;
}
.ball2 {
背景:蓝色;
}
.ball3 {
背景:黄色;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="球ball1 "祝辞& lt;/div>
& lt; div类="球ball2 "祝辞& lt;/div>
& lt; div类="球ball3 "祝辞& lt;/div>
& lt; script>
var ball1=document.querySelector (“.ball1”);
var ball2=document.querySelector (“.ball2”);
var ball3=document.querySelector (“.ball3”);
函数promiseAnimate(球,左){
返回新的承诺(函数(解决,拒绝){
函数动画(球,左){
setTimeout(函数(){
var marginLeft=方法(ball.style。marginLeft 10);
如果(marginLeft===左){
解决();
其他}{
如果(marginLeft & lt;左){
marginLeft +=2;
其他}{
marginLeft -=2;
}
ball.style。marginLeft=marginLeft +“px”;
动画(球,左);
}
13)};
}
动画(球,左);
});
}
promiseAnimate (ball1, 500)
不要犹豫(函数(){
返回promiseAnimate (ball2, 200);
})
不要犹豫(函数(){
返回promiseAnimate (ball3, 300);
})
不要犹豫(函数(){
返回promiseAnimate (ball1, 200);
})
不要犹豫(函数(){
返回promiseAnimate (ball3, 200);
})
不要犹豫(函数(){
返回promiseAnimate (ball2, 180);
})
不要犹豫(函数(){
返回promiseAnimate (ball2, 220);
})
不要犹豫(函数(){
返回promiseAnimate (ball2, 200);
})
& lt;/script>
& lt;/body>
& lt;/html>
这同样可以达到效果,并且这样做的好处是,修改更加容易一些。对于承诺,有几点需要注意:
1。在执行承诺相关函数的时候,要返回一个承诺对象,这是常用的做法。
2.只有返回了承诺对象,我们才能实用。
3,并且在然后中还要返回承诺对象,这样我们就可以不断的使用那么()来管理异步。
4。在保证执行之后,要使用解决()来表明这个承诺执行的结束。这样,才能执行然后方法。
