前端开发：Javascript实现缓动动画效果。
1、主要使用setInterval定时函数
2、给需要动画的元素添加绝对定位和偏移量，注意它的父元素要给相对定位
3、多个元素执行动画，可以将动画代码封装成一个函数
4、元素调用定时函数，定时移动，定时函数里- – -计算出每次移动距离
公式：var step = (target – obj.offsetLeft) / 20;
obj 动画对象, target 目标左偏移量，20 控制的是动画速度，数值越大越慢，越小越快
5、定时函数里还可以接收回调函数，有的话，动画结束时执行回调函数
6、注意定时函数里最前面写上清除动画的代码- – -clearInterval(obj.timer);不写的话，每次触发元素动画会效果叠加；写上清除之前的动画影响
代码示例
HTML
x
156
156
1
2
<html lang="en">3
4
<head>5
<meta charset="UTF-8">6
<meta http-equiv="X-UA-Compatible" content="IE=edge">7
<meta name="viewport" content="width=device-width, initial-scale=1.0">8
<title>aninamate动画 | Web176教程web176.com</title>9
<style>10
* {11
margin: 0;12
padding: 0;13
}14
15
.content {16
width: 1000px;17
margin: 0 auto;18
}19
20
button {21
padding: 5px;22
margin: 60px 10px;23
border: 1px solid #666;24
outline-color: palevioletred;25
}26
27
.both {28
background-color: pink;29
color: #fff;30
background-color: palevioletred;31
}32
33
.box {34
position: relative;35
height: 210px;36
margin: 0px auto;37
background-color: #191b28;38
}39
40
.yutu {41
position: absolute;42
top: 0;43
left: 0;44
width: 180px;45
height: 210px;46
}47
48
.qiaojingjing {49
position: absolute;50
top: 0;51
left: 820px;52
width: 180px;53
height: 210px;54
}55
56
.word1 {57
display: none;58
position: absolute;59
top: -50px;60
left: 45%;61
}62
63
.word2 {64
display: none;65
position: absolute;66
top: -30px;67
left: 50%;68
}69
</style>70
</head>71
72
<body>73
<div class="content">74
<button class="btn1">于途前进</button>75
<button class="btn2">乔晶晶前进</button>76
<button class="both">双向奔赴</button>77
<button class="btn3">于途后退</button>78
<button class="btn4">乔晶晶后退</button>79
<div class="box">80
<img src="images/于途.png" alt="" class="yutu">81
<img src="images/乔晶晶.png" alt="" class="qiaojingjing">82
<span class="word1">余生请多指教！</span>83
<span class="word2">余生请多指教！</span>84
</div>85
</div>86
87
<script>88
var btn1 = document.querySelector('.btn1');89
var btn2 = document.querySelector('.btn2');90
var btn3 = document.querySelector('.btn3');91
var btn4 = document.querySelector('.btn4');92
var both = document.querySelector('.both');93
var yutu = document.querySelector('.yutu');94
var qiaojingjing = document.querySelector('.qiaojingjing');95
var word1 = document.querySelector('.word1');96
var word2 = document.querySelector('.word2');97
98
99
btn1.addEventListener('click', function() {100
animate(yutu, 340, function() {101
word1.style.display = 'block';102
});103
});104
105
btn2.addEventListener('click', function() {106
animate(qiaojingjing, 520, function() {107
word2.style.display = 'block';108
});109
});110
btn3.addEventListener('click', function() {111
animate(yutu, 0, function() {112
word1.style.display = 'none';113
});114
});115
116
btn4.addEventListener('click', function() {117
animate(qiaojingjing, 820, function() {118
word2.style.display = 'none';119
});120
});121
122
both.addEventListener('click', function() {123
animate(yutu, 340);124
animate(qiaojingjing, 520);125
word1.style.display = 'block';126
word2.style.display = 'block';127
128
});129
130
131
// 动画函数 obj动画对象, target目标左偏移量, callback回调函数132
function animate(obj, target, callback) {133
// 清除之前的动画134
clearInterval(obj.timer);135
obj.timer = setInterval(function() {136
// 计算出每次移动距离137
var step = (target - obj.offsetLeft) / 20;138
// 步数取整139
step = step > 0 ? Math.ceil(step) : Math.floor(step);140
obj.style.left = obj.offsetLeft + step + 'px';141
142
if (obj.offsetLeft == target) {143
// 停止动画144
clearInterval(obj.timer);145
// 如果有回调函数，执行回调函数146
if (callback) {147
callback();148
}149
}150
151
}, 30);152
}153
</script>154
</body>155
156
</html>阅读剩余 84%
作者：terry，如若转载，请注明出处：https://www.web176.com/news/frontend/7648.html
支付宝 
微信 