当前位置:网站首页>JS缓动动画原理教学(超细节)
JS缓动动画原理教学(超细节)
2022-07-07 11:11:00 【周百万.】
1、先写出html和css样式,
<style>
* {
margin: 0;
padding: 0;
}
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
}
.ha {
position: absolute;
top: 300px;
left: 400px;
width: 200px;
height: 200px;
background-color: purple;
color: aliceblue;
}
body {
height: 1000px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">gump盒子移动到100</div>
<div class="gump">gump盒子移动到500</div>
效果如图所示:重要是学js技术,样式好看不好看无所谓啊~
2、接下来写js,我直接在下面写的,所以没用load
3、封装一个动画函数,添加点击事件,事件中调用动画函数,点击两个盒子实现渐变动画
4、解释超详细,有需要讨论的点评论即可~
<script>
var box = document.querySelector('.box');
var gump = document.querySelector('.gump');
// 函数封装一个渐变动画
function animate(obj, target) {
// 让函数中始终只有一个定时器
clearInterval(obj.timer);
obj.timer = window.setInterval(function() {
// 如果到达目标位置就停止(清除定时器)
if (obj.offsetLeft == target) {
clearInterval(obj.timer)
}
// 每调用一次定时器就重新计算一次step的长度,目标长度不变,现在的位置离目标距离越来越近
// 他们之间的差的绝对值也就越来越小,使得间隔时间内每一步的长度减小,实现渐慢效果
// 第一步:(500-100)/10 = 40 第二步:(500-140)/10 = 36 ......
var step = (target - obj.offsetLeft) / 10;
// 如果步长为正,取较大的整数;如果步长为负,取较小的额整数。目的都是取绝对值较大的
step > 0 ? step = Math.ceil((step)) : step = Math.floor(step);
// obj.style.left可读写,但只能获取行内的样式,所以用来”写” 数据极好
// obj.offsetLeft 只能读,但他能读行内样式,内嵌样式,外链样式,”读”数据极好
obj.style.left = obj.offsetLeft + step + 'px';
}, 20);
}var box1 = box.addEventListener('click', function() {
animate(gump, 100);})
var box2 = gump.addEventListener('click', function() {
animate(gump, 500);})
</script>
边栏推荐
- 2022 practice questions and mock examination of the third batch of Guangdong Provincial Safety Officer a certificate (main person in charge)
- 免费手机号码归属地API查询接口
- .Net下極限生產力之efcore分錶分庫全自動化遷移CodeFirst
- [difficult and miscellaneous]pip running suddenly appears modulenotfounderror: no module named 'pip‘
- API query interface for free mobile phone number ownership
- Cloud detection 2020: self attention generation countermeasure network for cloud detection in high-resolution remote sensing images
- 《ASP.NET Core 6框架揭秘》样章[200页/5章]
- ORACLE进阶(五)SCHEMA解惑
- JS中为什么基础数据类型可以调用方法
- HZOJ #240. 图形打印四
猜你喜欢
【学习笔记】AGC010
自定义线程池拒绝策略
Leetcode question brushing: binary tree 26 (insertion operation in binary search tree)
[untitled]
Practical example of propeller easydl: automatic scratch recognition of industrial parts
聊聊伪共享
处理链中断后如何继续/子链出错removed from scheduling
Cloud detection 2020: self attention generation countermeasure network for cloud detection in high-resolution remote sensing images
PACP学习笔记一:使用 PCAP 编程
达晨与小米投的凌云光上市:市值153亿 为机器植入眼睛和大脑
随机推荐
货物摆放问题
test
共创软硬件协同生态:Graphcore IPU与百度飞桨的“联合提交”亮相MLPerf
Sequoia China completed the new phase of $9billion fund raising
关于 appium 如何关闭 app (已解决)
leecode3. 无重复字符的最长子串
.Net下极限生产力之efcore分表分库全自动化迁移CodeFirst
云检测2020:用于高分辨率遥感图像中云检测的自注意力生成对抗网络Self-Attentive Generative Adversarial Network for Cloud Detection
Leetcode skimming: binary tree 20 (search in binary search tree)
Sample chapter of "uncover the secrets of asp.net core 6 framework" [200 pages /5 chapters]
Practical example of propeller easydl: automatic scratch recognition of industrial parts
飞桨EasyDL实操范例:工业零件划痕自动识别
红杉中国完成新一期90亿美元基金募集
《ASP.NET Core 6框架揭秘》样章[200页/5章]
Leetcode skimming: binary tree 25 (the nearest common ancestor of binary search tree)
Leetcode skimming: binary tree 27 (delete nodes in the binary search tree)
Layer pop-up layer closing problem
将数学公式在el-table里面展示出来
About how appium closes apps (resolved)
飞桨EasyDL实操范例:工业零件划痕自动识别