当前位置：网站首页>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>

原网站

版权声明
本文为[Zhou million]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/188/202207071110499526.html

当前位置：网站首页>JS slow motion animation principle teaching (super detail)

JS slow motion animation principle teaching (super detail)

边栏推荐

猜你喜欢

随机推荐