JS实现匀速与减速缓慢运动的动画效果封装示例
作者:心郎 时间:2024-06-07 15:27:01
本文实例讲述了JS实现匀速与减速缓慢运动的动画效果。分享给大家供大家参考,具体如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.aspxhome.com JS匀速/减速运动</title>
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: pink;
margin-top: 10px;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 10px;
position: relative;
}
</style>
</head>
<body>
<button>匀速移动</button>
<button>减速移动</button>
<div class="box1" ></div>
<div class="box2" ></div>
<script>
// 动画原理 = 盒子位置 + 步长。
// 1.闪动。 (瞬间到达)
// 2.匀速。 (每次走一样距离)
// 3.缓动。 (开始特快越走越慢,步长越来越小)
// (类似刹车,电梯停止,压缩弹簧...)
// 好处:
// 1.有非常逼真的缓动效果,实现的动画效果更细腻。
// 2.如果不清除定时器,物体永远跟着目标在移动。
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
var but1 = document.getElementsByTagName("button")[0];
var but2 = document.getElementsByTagName("button")[1];
console.log(box1.offsetLeft);
but1.onclick = function () {
animate1(box1,200);
}
but2.onclick = function () {
animate2(box2,500);
}
//匀速动画
function animate1(ele,target){
//要用定时器,先清除定时器
//一个盒子只能有一个定时器,这样儿的话,不会和其他盒子出现定时器冲突
//而定时器本身讲成为盒子的一个属性
clearInterval(ele.timer);
//我们要求盒子既能向前又能向后,那么我们的步长就得有正有负
//目标值如果大于当前值取正,目标值如果小于当前值取负
var speed = target>ele.offsetLeft?3:-3;
ele.timer = setInterval(function () {
//在执行之前就获取当前值和目标值之差
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
//目标值和当前值只差如果小于步长,那么就不能在前进了
//因为步长有正有负,所有转换成绝对值来比较
if(Math.abs(val)<=Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30)
}
//缓动动画封装
function animate2(ele,target) {
clearInterval(ele.timer); //清楚历史定时器
ele.timer = setInterval(function () {
//获取步长 确定移动方向(正负值) 步长应该是越来越小的,缓动的算法。
var step = (target-ele.offsetLeft)/10;
//对步长进行二次加工(大于0向上取整,小于0项下取整)
step = step>0?Math.ceil(step):Math.floor(step);
//动画原理: 目标位置 = 当前位置 + 步长
console.log(step);
ele.style.left = ele.offsetLeft + step + "px";
//检测缓动动画有没有停止
if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
ele.style.left = target + "px"; //直接移动指定位置
clearInterval(ele.timer);
}
},30);
}
</script>
</body>
</html>
这里使用在线HTML/CSS/JavaScript代码运行工具:http://tools.aspxhome.com/code/HtmlJsRun,可得到如下运行效果:
希望本文所述对大家JavaScript程序设计有所帮助。
来源:https://blog.csdn.net/u011301203/article/details/52491774
标签:JS,运动,动画
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JavaScript基础知识学习笔记
2024-05-13 10:35:15
![](https://img.aspxhome.com/file/2023/3/125473_0s.png)
python实现简单温度转换的方法
2021-04-12 10:14:51
Python绘图库Matplotlib的基本用法
2023-04-27 15:44:34
![](https://img.aspxhome.com/file/2023/8/86568_0s.png)
ASP+Access数据库安全设置方法小结
2011-04-02 11:09:00
使用Python监控文件内容变化代码实例
2021-06-05 22:45:19
提高代码可读性的十大注释技巧分享
2023-05-28 21:55:35
TXT.WORD文档下载另存为,而不是在浏览器中打开
2007-10-25 11:43:00
Python爬虫使用bs4方法实现数据解析
2023-09-04 17:08:38
![](https://img.aspxhome.com/file/2023/2/86172_0s.png)
PyTorch搭建CNN实现风速预测
2022-09-11 17:40:19
![](https://img.aspxhome.com/file/2023/8/102328_0s.jpg)
JavaScript 在各个浏览器中执行的耐性
2009-02-06 15:26:00
ASP进阶学习之认识数学函数
2007-10-08 13:15:00
python实现K近邻回归,采用等权重和不等权重的方法
2021-12-21 19:29:26
导入pytorch时libmkl_intel_lp64.so找不到问题解决
2021-03-21 01:52:23
Django 解决开发自定义抛出异常的问题
2023-03-05 12:43:55
简单上手Python中装饰器的使用
2023-06-20 19:20:06
python连接远程ftp服务器并列出目录下文件的方法
2023-10-20 10:35:04
vue-element如何实现动态换肤存储
2024-04-27 15:57:35
![](https://img.aspxhome.com/file/2023/1/133081_0s.png)
python中csv文件的若干读写方法小结
2021-04-07 11:46:03
python实现串口自动触发工作的示例
2023-11-06 22:19:09
Django crontab定时任务模块操作方法解析
2022-08-01 03:50:56