动画的概念:动起来的画面,就是动画。
运动的概念: 动起来的物体,运动。
动画的原理:改变:位置,形态,属性,而且是持续的改变:一直进行某个动作或行为。
生物学的概念:人的眼睛,在一秒内能识别的连续的图片18张(18帧)。
动画的三要素:起点、速度:(步长,频率) 、终点。在页面上做运动的话,得遵守以上这些规定。
我们以后会经常用到运动这个函数,所以把它封装起来,以后可以直接拿来用了。下面说说运动的封装:
一、运动的封装-匀速:
let obox = document.getElementById("box");
let t;
document.onclick = function(){
clearInterval(t);
t = setInterval(() => {
if(obox.offsetLeft === 1000){
clearInterval(t);
}else{
obox.style.left = obox.offsetLeft + 10 + "px";
}
}, 30);
}
解释:持续的改变:计时器,不断的执行,不断的left的增加。
速度:步长10px,频率1000 / 18 = 55.55556毫秒数
二、运动的封装-缓冲
let target = 600;
let obox = document.getElementById("box");
let t;
document.onclick = function(){
clearInterval(t);
t = setInterval(() => {
let speed = (target - obox.offsetLeft)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
if(obox.offsetLeft === target){
clearInterval(t);
}else{
obox.style.left = obox.offsetLeft + speed + "px";
}
}, 30);
}
解释:行业习惯,DOM元素的改变,最低不要低于30毫秒执行一次。
三、运动的封装-封装
function move(ele,attr,target){
// ele是一个元素对象,对象,对象可以做什么,存储数据
clearInterval(ele.t);
ele.t = setInterval(() => {
var s = getStyle(ele,attr); // 得到带有px的字符
var iNow = parseInt(s); // 借助parseInt的取整,得到整除部分,去掉px
let speed = (target - iNow)/10;
speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed);
if(iNow === target){
clearInterval(ele.t);
}else{
ele.style[attr] = iNow + speed + "px";
}
}, 30);
}
完成运动的封装后,把这些运动函数放在一个js库里面,往后如果哪个地方需要用到运动,直接调用即可,简单方便。