快捷導(dǎo)航

JS實(shí)現(xiàn)添加緩動(dòng)畫的方法

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

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

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

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

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

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

1.緩動(dòng)畫實(shí)現(xiàn)，緩動(dòng)畫實(shí)現(xiàn)思路如下：

2.需要避免小數(shù)的出現(xiàn)，如果直接將上面的公式作為距離的話會(huì)出現(xiàn)小數(shù)，如果移動(dòng)的距離是正數(shù)的話需要向上取整，如果移動(dòng)的距離是負(fù)數(shù)（比如由800px移動(dòng)到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>緩動(dòng)畫</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ù)寫在清除定時(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">點(diǎn)擊移動(dòng)600</button>
? ? <button class="btn800">點(diǎn)擊移動(dòng)800</button>
? ? <div></div>
</body>
?
</html>

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

您可能感興趣的文章: