当前位置:网站首页>JS slow motion animation principle teaching (super detail)
JS slow motion animation principle teaching (super detail)
2022-07-07 13:21:00 【Zhou million】
1、 Write first html and css style ,
<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 Move the box to 100</div>
<div class="gump">gump Move the box to 500</div>
The effect is shown in the figure : The important thing is to learn js technology , It doesn't matter whether the style is good-looking or not ~
2、 Next write js, I wrote it directly below , So it's no use load
3、 Encapsulate an animation function , Add click event , Call animation function in event , Click two boxes to realize gradient animation
4、 The explanation is super detailed , There are comments that need to be discussed ~
<script>
var box = document.querySelector('.box');
var gump = document.querySelector('.gump');
// Function encapsulates a gradient animation
function animate(obj, target) {
// Let there always be only one timer in the function
clearInterval(obj.timer);
obj.timer = window.setInterval(function() {
// If you reach the target position, stop ( Clear timer )
if (obj.offsetLeft == target) {
clearInterval(obj.timer)
}
// The timer is recalculated every time it is called step The length of , The target length remains unchanged , The current position is getting closer and closer to the target
// The absolute value of the difference between them is getting smaller and smaller , Reduce the length of each step in the interval , Realize the slowing effect
// First step :(500-100)/10 = 40 The second step :(500-140)/10 = 36 ......
var step = (target - obj.offsetLeft) / 10;
// If the step size is positive , Take a larger integer ; If the step size is negative , Take the smaller integer . The purpose is to take the larger absolute value
step > 0 ? step = Math.ceil((step)) : step = Math.floor(step);
// obj.style.left read-write , But you can only get the style in the line , So it's used to ” Write ” Excellent data
// obj.offsetLeft Only read , But he can read in-line patterns , embedded style , Outer chain style ,” read ” Excellent data
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>
边栏推荐
- [untitled]
- [learning notes] segment tree selection
- 【黑马早报】华为辟谣“军师”陈春花;恒驰5预售价17.9万元;周杰伦新专辑MV 3小时播放量破亿;法华寺回应万元月薪招人...
- MongoDB的导入导出、备份恢复总结
- ESP32系列专栏
- clion mingw64中文乱码
- RecyclerView的数据刷新
- 日本政企员工喝醉丢失46万信息U盘,公开道歉又透露密码规则
- “新红旗杯”桌面应用创意大赛2022
- Isprs2021/ remote sensing image cloud detection: a geographic information driven method and a new large-scale remote sensing cloud / snow detection data set
猜你喜欢
Blog recommendation | Apache pulsar cross regional replication scheme selection practice
详细介绍六种开源协议(程序员须知)
Smart cloud health listed: with a market value of HK $15billion, SIG Jingwei and Jingxin fund are shareholders
[learning notes] agc010
OSI seven layer model
Vscode编辑器ESP32头文件波浪线不跳转彻底解决
PAcP learning note 1: programming with pcap
Cinnamon 任务栏网速
Digital IC Design SPI
cmake 学习使用笔记(一)
随机推荐
RealBasicVSR测试图片、视频
User management summary of mongodb
MongoDB内部的存储原理
一文读懂数仓中的pg_stat
Star Enterprise Purdue technology layoffs: Tencent Sequoia was a shareholder who raised more than 1billion
Mongodb command summary
Shortcut key of Bash
[untitled]
Write it down once Net a new energy system thread surge analysis
How to continue after handling chain interruption / sub chain error removed from scheduling
【Presto Profile系列】Timeline使用
日本政企员工喝醉丢失46万信息U盘,公开道歉又透露密码规则
JNA learning notes 1: Concepts
分屏bug 小记
Summary of import, export, backup and recovery of mongodb
TPG x AIDU|AI领军人才招募计划进行中!
存储过程的介绍与基本使用
Practical case: using MYCAT to realize read-write separation of MySQL
Realbasicvsr test pictures and videos
Simple and easy-to-use code specification