Heim > Artikel > Web-Frontend > Was ist der Quellcode für js, der die Kapselung von Animationen erleichtert? (Codebeispiel)
Was ist der Quellcode für js, der die Kapselung von Animationen erleichtert? (Codebeispiel)
- 云罗郡主nach vorne
- 2018-10-19 14:17:032497Durchsuche
Der Inhalt dieses Artikels befasst sich mit dem Quellcode von js, der die Kapselung von Animationen erleichtert. (Codebeispiel) hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Hauptsächlich verwendet offsetLeft, Math.ceil, Math.floor, Math.abs.
Beachten Sie, dass der von offsetLeft erhaltene Wert der gerundete Wert von style.left ist, offsetLeft = Math.round (der numerische Teil von style.left), zum Beispiel style.left = 369,4px, der erhaltene offsetLeft = 369.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>缓动动画</title>
<style>
#slow_action {
width: 100px;
height: 100px;
background: pink;
position: absolute;
}
</style>
</head>
<body>
<button id="btn1">运动到400</button>
<button id="btn2">运动到0</button>
<p id="slow_action"></p>
</body>
<script>
var btn1 = document.getElementById("btn1")
var btn2 = document.getElementById("btn2")
var p = document.getElementById("slow_action")
/**
* 动画原理 = 盒子位置 + 步长（步长越来越小）
* 盒子位置 = 盒子本身的位置 + (目标位置 - 盒子本身位置)/10
*/
btn1.onclick = function () {
fn(p,400)
}
btn2.onclick = function () {
fn(p,0)
}
function fn(ele, target) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
// var target = 400;
//最后10像素都是1px向目标位置移动 最后到达指定位置
var step = (target - ele.offsetLeft)/10;
//差值大于10的时候向上取整 小于0的时候向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step)
ele.style.left = ele.offsetLeft + step + "px";
//检测定时器是否停止
console.log(1)
//跳出条件 目标位置-当前位置的绝对值，小于步长
if(Math.abs(target - ele.offsetLeft) < Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer)
}
}, 30);
}
</script>
</html>Was ist der Quellcode für die Kapselung der Js-Easing-Animation? (Codebeispiele) Vollständige Einführung. Wenn Sie mehr über JavaScript-Video-Tutorial erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWas ist der Quellcode für js, der die Kapselung von Animationen erleichtert? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!