JavaScript—动画
JavaScript—动画
Cikian.
发布于 2022-09-22 11:49:47
发布于 2022-09-22 11:49:47
代码可运行
运行总次数：0
代码可运行
JavaScript—动画
一、动画原理
通过定时器setInterval不断移动盒子位置。
步骤：
- 获得盒子当前位置；
- 让盒子在当前位置加上1个移动距离；
- 利用定时器不断重复这个操作；
- 结束定时器。
注意：元素需要加定位。
例：
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<div class="move">
</div>
<script src="js/js.js"></script>
</body>
</html>CSS代码：
.move{
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0;
};JS代码：
var div = document.querySelector('.move'); //获取需要移动的元素
var timer = setInterval(function() { //新建一个定时器
if (div.offsetLeft >= 400) { //停止定时器的条件：移动距离大于等于400px时停止
clearInterval(timer); //停止定时器
};
div.style.left = div.offsetLeft + 1 + 'px'; //定时器执行的操作：每1毫秒移动一个像素
};, 1)二、简单动画函数封装
注意函数需要传递的2个参数：动画对象和移动的距离。
function animate(obj,target) {
var timer = setInterval(function() {
if (obj.offsetLeft >= target) {
clearInterval(timer);
};
obj.style.left = obj.offsetLeft + 1 + 'px';
};, 1)
};
var div = document.querySelector('.move'); //获取元素
animate(div,300); //调用函数三、给不同元素记录不同定时器
function animate(obj,target) {
clearInterval(obj.timer); //一个元素同时只能存在一个定时器
obj.timer = setInterval(function() { //给不同元素添加定时器
if (obj.offsetLeft >= target) {
clearInterval(obj.timer);
};
obj.style.left = obj.offsetLeft + 1 + 'px';
};, 1)
};四、缓动效果原理
缓动动画就是让元素运动速度有所变化，如常见的“慢慢停下来”。
思路：
- 让盒子每次移动的距离变小，速度就会慢下来；
- 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长；
function animate(obj,target) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
};
obj.style.left = obj.offsetLeft + step + 'px';
};, 15)
};五、动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程叫做回调。
回调函数写的位置：定时器结束位置。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-02-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
