概述 :
运动 ( 动画 ) , 就是操作对应的dom元素发生变化 , ( 这个变化要持续多次 ( 修改样式 ) ) , 每次间隔的时间是你肉眼察觉不到的 ( 时间比较短 ) . 当到达目标位置就停止 , 这个就是所谓的动画
主要实现原理
-
利用定时器定时操作dom的样式
-
当设置的目标值到达后 清除定时器
运动三大要素
-
当前值 ( current )
-
变化值 ( step )
-
目标值 ( target )
主要动画
匀速运动 ( 每次变化的值是一样的 )
-
示例 ( 操作div的宽度变化 )
//匀速运动每次变化的值 是固定的
//获取页面上的元素
var div = document.querySelector('div')
//获取当前的样式
var current = parseInt(getStyle(div).width)
//设置目标值
var target = 500
//设置步长(变化值)
var step = 10
//给div设置点击事件,并添加定时器,通过定时器来实现样式的变化
div.onclick=function(){
var timer = setInterval(()=>{
//判断当前值是否等于目标值,相等就清除定时器
if(current == target){
clearInterval(timer)
}else{
//否则给div设置样式
//每次将当前值加上变化值,完成变化
current += step
div.style.width = current + 'px'
}
},40)
}
//封装一个获取页面上样式的方法
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}
- 封装的匀速运动代码 ( 如果设置值不一样 , 那么动画将不会一起完成 )
//匀速运动的封装方法
//element表示移动的元素 , target是目标位置{width:500,left:500}
function yunsu(element,targetObj){
//遍历targetObj
for(let key in targetObj){//key是字符串
//获取当前样式
let current = parseFloat(getStyle(element)[key])
//获取目标值
let target = targetObj[key]
//获取步长(变化值)
let step = target - current >0?10:-10
//设置定时器,没有添加事件会自动开启定时器
let timer = setInterval(()=>{
//判断是否有到达目标位置,到了就清除清时期
if(current == target){
clearInterval(timer)
}else{
//否则给元素设置样式
//更改每次变化后的值(当前值+步长赋给当前值继续下一轮遍历)
current += step
element.style[key]=current + 'px'
}
},40)
}
}
//封装一个获取页面上样式的方法
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}
缓冲运动 ( 每次变化的值是越来越小的 )
-
示例 ( 操作div的位置变化 )
//div位置变化,以缓冲运动进行变化
//1.获取div
var div = document.querySelector('div')
//2.1.获取当前样式
let current = parseInt(getStyle(div).left)
//3.设置目标值
let target = 500
//5.给div添加点击事件并设置定时器
div.onclick=function(){
let timer = setInterval(()=>{
//6.判断当前样式值是否等于目标样式值,相等就清除定时器
if(current == target){
clearInterval(timer)
}else{
//4.设置步长
//变化值应是(目标值-当前)/10,因为每次的值都会除10会出现小数点然后无线增加,导致永远道不了目标值,所以要取下整数
let step = Math.ceil((target - current)/10)
//7.不相等就先获取当前的变化样式,再赋值给div
current += step
div.style.left = current + 'px'
}
},40)
}
//2.0封装一个获取页面上样式的方法
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}
-
缓冲封装
//封装一个获取样式的方法
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}
//封装缓存动画的方法,参数有元素和目标值对象
function buffer(element,targetObj){
//判断是否有元素,没有就直接报错,不往下走
if(!element){
throw new Error('元素不能少')
}
//给这个元素设置定时器
element.timer=setInterval(()=>{
//默认都能执行
var flag = true
//遍历目标值对象
for(let key in targetObj){
//取出当前样式值
let current = parseInt(getStyle(element)[key])
//取出目标值
let target = targetObj[key]
//判断当前是否是宽高及位置的变化
if(key == 'width' || key== 'height' || key =='left' || key == 'top'){
//是就先取出变化值,负值向下取整,正值向上取整
let step = target-current>0?Math.ceil((target-current)/10):Math.floor((target-current)/10)
//把变化值赋给当前值,并设置给元素
current += step
element.style[key] = current + 'px'
}
//判断是否为透明度的变化
if(key == 'opacity'){
//是就先取出变化值,负值向下取整,正值向上取整
let step = target - current>0?Math.ceil((target-current)*1000/10):Math.floor((target-current)*1000/10)
current += step /1000
element.style[key] = current
}
//如果是层高就直接赋值
if(key == 'zIndex'){
element.style[key] = target
}
//如果当前值不等于目标值,就是false
if(current != target){
flag = false
}
}
//如果全部走完了,就清除定时器
if(flag){
clearInterval(element.timer)
}
},40)
}
标签：target,element,current,day16,let,key,运动,div From： https://www.cnblogs.com/itlulu/p/16823038.html