JS實現(xiàn)添加緩動畫的方法

更新時間：2022年07月04日 11:08:39 作者：setTimeout()

這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)添加緩動畫的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)添加緩動畫的具體代碼，供大家參考，具體內(nèi)容如下

在看這篇博客之前需要了解JS實現(xiàn)給不同元素設(shè)置不同的定時器

需要實現(xiàn)的效果：點擊移動到600按鈕之后下面的div會由快到慢移動到600px，點擊移動到800之后又會移動到800px，又點擊移動600的時候會倒回去移動到600px。

首先需要實現(xiàn)第一個功能：

1.緩動畫實現(xiàn)，緩動畫實現(xiàn)思路如下：

2.需要避免小數(shù)的出現(xiàn)，如果直接將上面的公式作為距離的話會出現(xiàn)小數(shù)，如果移動的距離是正數(shù)的話需要向上取整，如果移動的距離是負(fù)數(shù)（比如由800px移動到600px）的話需要向下取整。

完整代碼：

<!DOCTYPE html>
<html lang="en">
?
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>緩動畫</title>
? ? <style>
? ? ? ? div {
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 50px;
? ? ? ? ? ? left: 0px;
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: pink;
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? window.addEventListener('load', function() {
? ? ? ? ? ? function move(obj, target, callback) {
? ? ? ? ? ? ? ? window.clearInterval(obj.timer);
? ? ? ? ? ? ? ? obj.timer = window.setInterval(function() {
? ? ? ? ? ? ? ? ? ? // 把步長值改為整數(shù)，不要出現(xiàn)小數(shù)的情況 往上取整
?
? ? ? ? ? ? ? ? ? ? var step = (target - obj.offsetLeft) / 10;
? ? ? ? ? ? ? ? ? ? step = step > 0 ? Math.ceil(step) : Math.floor(step);
? ? ? ? ? ? ? ? ? ? // 回調(diào)函數(shù)寫在清除定時器里面
? ? ? ? ? ? ? ? ? ? if (obj.offsetLeft >= target) {
? ? ? ? ? ? ? ? ? ? ? ? window.clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? ? ? if (callback) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? callback();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? ? ? obj.style.left = obj.offsetLeft + step + 'px';
? ? ? ? ? ? ? ? ? ? ? ? // console.log(obj.style.left);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }, 15)
? ? ? ? ? ? }
? ? ? ? ? ? var div = document.querySelector('div');
? ? ? ? ? ? var btn600 = document.querySelector('.btn600');
? ? ? ? ? ? btn600.addEventListener('click', function() {
? ? ? ? ? ? ? ? move(div, 600)
? ? ? ? ? ? })
? ? ? ? ? ? var btn600 = document.querySelector('.btn800');
? ? ? ? ? ? btn600.addEventListener('click', function() {
? ? ? ? ? ? ? ? move(div, 800, function() {
? ? ? ? ? ? ? ? ? ? div.style.backgroundColor = 'violet'
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? })
? ? </script>
</head>
?
<body>
? ? <button class="btn600">點擊移動600</button>
? ? <button class="btn800">點擊移動800</button>
? ? <div></div>
</body>
?
</html>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: