32DOM高级操作 JS动画制作及封装

32DOM高级操作 JS动画制作及封装

一、运动的原理

让物体沿着某个方向随时间的变化改变位置，可以利用计时器setInterval，且间隔时间为30ms，因为电影播放每秒24帧，人眼就识别不出卡顿了，但是对于电脑来说，处理速度相对较快，需要每秒30帧以上才会显得流畅

二、缓冲运动

//缓冲动画公式

step = (target - beigin)/10

//走到最后几步的时候	Math.ceil(step)
//走到最后几步的时候	Math.floor(step)

三、使用计时器完成动画

布局

<button>盒子向左移动</button>
<button>盒子向右移动</button>
<div></div>

样式

* {
	margin: 0;
	padding: 0;
}

div {
	width: 200px;
	height: 200px;
	background: pink;
	position: absolute;
}

js

//获取button和div节点

var btn = document.querySelectorAll("button")
var div = document.querySelector("div")

//点击第一个按钮

btn[0].onclick = function(){
    
    //使用及时器之前，先清除计时器，以免多次点击按钮会使计时器叠加
    
	clearInterval(div.timer)
    
    //设置步长，且步长为缓冲运动的步长
    
	var step = Math.floor((0 - div.offsetLeft)/10)
    
    //使用计时器，时间为30ms，用于物体定时移动
    
	div.timer = setInterval(function(){ 
		div.style.left = div.offsetLeft - step + "px"
        
        //当移动到0位置时结束移动
        
		if(div.offsetLeft < 0){
			div.style.left = 0
			clearInterval(div.timer)
		}
	}, 30)
}

//点击第二个按钮

btn[1].onclick = function(){
    
    //使用及时器之前，先清除计时器，以免多次点击按钮会使计时器叠加
    
	clearInterval(div.timer)
    
    //设置步长，且步长为缓冲运动的步长
    
	var step = Math.ceil((800 - div.offsetLeft)/10)
    
    //使用计时器，时间为30ms，用于物体定时移动
    
	div.timer = setInterval(function(){ 
		div.style.left = div.offsetLeft + step + "px"
        
        //当移动到800位置时结束移动
        
		if(div.offsetLeft > 800){
			div.style.left = 800 + "px"
			clearInterval(div.timer)
		}
	}, 30)
}

四、将动画封装

封装的动画

//定义animation动画函数
//ele	需要绑定的节点	object
//target	需要移动的距离	number
//attr	需要移动的方向	string

function animation(ele, target, attr) {
    
    //使用及时器之前，先清除计时器，以免多次点击按钮会使计时器叠加
    
	clearInterval(ele.timer)
    
    //使用计时器，时间为30ms，用于物体定时移动
    
	ele.timer = setInterval(function () {
        
        //设置步长，且步长为缓冲运动的步长
        
		var step = (target - parseFloat(getStyle(ele, attr)))/10
        
        
        //走到最后几步的时候需要处理的步长
        
		step = step > 0 ? Math.ceil(step) : Math.floor(step)
        
        //设置定位的位置
        
		ele.style[attr] = parseFloat(getStyle(ele, attr)) + step + "px"
        
        //当到达目的位置是停止计时器的运行
        
        if(parseFloor(ele.style[attr]) == target){
            clearInterval(ele.timer)
        }
	}, 30)
    
    //定义getStyle函数。获取想要的位置参数的兼容写法
    
	function getStyle(ele, attr){
        
        //非IE写法
        
		if(window.getComputedStyle){
			return getComputedStyle(ele, null)[attr]
		}
        
        //IE写法
        
		else{
			return ele.currentStlye[attr]
		}
	}
}

那么想要计时器完成 三 的计时器的动画只需要在js改变为

//获取button和div节点

var btn = document.querySelectorAll("button")
var div = document.querySelector("div")

//点击第一个按钮引用函数animation

btn[0].onclick = function(){
	animation(div, 0, "left")
}

点击第二个按钮引用函数animation

btn[1].onclick = function(){
	animation(div, 800, "left")
}