封裝緩動動畫3
阿新 • • 發佈：2018-09-26
修改 int 向上取整 code charset mat ext 清除 color
前面兩篇都是做了一些關於緩動動畫的基礎，現在，可以在前面的基礎上真正的封裝緩動動畫了。
單值傳入
$("btn").onclick = function () { clearInterval(timer); timer = setInterval(function () { var speed = (target - box.offsetLeft) * 0.2; speed = Math.ceil(speed); box.style.left = box.offsetLeft + speed + "px"; box.innerText = box.offsetLeft; if(box.offsetLeft === target){ clearInterval(timer); } }, 20); };
上面貼出來的是我們前面做的實驗，因為我們是讓元素左右移動，改變的是元素距離左邊邊框的距離，那麽，如果我們需要讓元素上下移動，就需要改變元素距離上邊框的距離，如果要改變元素的大小，就需要改變元素的寬高，也就是說，不能僅僅依靠於上面的offsetLeft了，而是需要按需改變屬性名稱和值，這就需要用到上一篇的知識了。
首先確定需要改變的屬性，並獲取初始值：
function getCSSAttrValue(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; }
其次要根據style[attr]動態改變該元素的值，讓元素運動起來。
因此，我們上面的函數需要稍作修改：
function buffer(obj, attr, target) { //清除定時器 clearInterval(obj.timer); //設置定時器 obj.timer = setInterval(function () { //獲取初始值 var begin = parseInt(getCSSAttrValue(obj, attr)); console.log(begin); //求出步長 var speed = (target - begin) * 0.2; // 判斷是否向上取整 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed); //動起來 obj.style[attr] = begin + speed + "px"; obj.innerText = begin; if(begin === target){ clearInterval(obj.timer); } }, 20); }
還是之前的效果，實現向左向右運動，我們就可以這樣寫了：
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var box = $("box");
$("btn").onclick = function () {
buffer(box, "left", 500);
};
當然，也可以實現元素的大小改變了：
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var box = $("box");
$("btn1").onclick = function () {
buffer(box, "width", 260);
};
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> </head> <body> <button id="btn">往右走</button> <button id="btn1">變大</button> <div id="box"></div> <script> window.onload = function () { // 0. 變量 var box = $("box"); // 1. 監聽按鈕的點擊 $("btn").onclick = function () { buffer(box, "left", 500); }; $("btn1").onclick = function () { buffer(box, "width", 260); }; }; function getCSSAttrValue(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } function buffer(obj, attr, target) { //清除定時器 clearInterval(obj.timer); //設置定時器 obj.timer = setInterval(function () { //獲取初始值 var begin = parseInt(getCSSAttrValue(obj, attr)); console.log(begin); //求出步長 var speed = (target - begin) * 0.2; // 判斷是否向上取整 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed); //動起來 obj.style[attr] = begin + speed + "px"; obj.innerText = begin; if(begin === target){ clearInterval(obj.timer); } }, 20); } </script> </body> </html>
封裝緩動動畫3