匀速运动（每次变化的值是一样的）
// 操作div的宽度变化
//匀速运动每次变化的值是固定的
//获取div
var div = document.querySelector('div')
//当前值 通过获取当前的样式来获取对应的宽度
var current = parseFloat(getStyle(div).width)
//变化值
var step = 10
//目标值
var target = 500
//点击div 匀速变化他的宽度
div.onclick = function () {
var timer = setInterval(()=>{
//每次将当前值去加上变化量 完成变化
current += step
//设置给对应的div
div.style.width = current + 'px'
//到达目标位置清除定时器
if(current == target){
clearInterval(timer)
}
},40)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
封装的匀速运动代码（如果设置值不一样那么动画将不会一起完成）
//匀速运动的方法
//element表示移动的元素 target 目标位置{width:100,left:500}
function uniformVelocityAnimation(element, targetObj) {
//遍历target得到他的样式
for (let key in targetObj) {//key是字符串
//获取移动的目标样式的值
let current = parseFloat(getStyle(element)[key])
//得到目标值
let target = targetObj[key]
//步长设置 如果目标值是小于我们当前的值那么对应变化的量为负值 如果目标值大于我们当前值
那么变化量为正值
let step = target>current?10:-10
//定时更改
let timer = setInterval(() => {
//判断是否到达目标位置
if (current >= target) {
clearInterval(timer)
} else {
//每次将对应的left值更改
current += step
//重新设置div的left值
element.style[key] = current + 'px'
}
}, 40)
}
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
if(window.getComputedStyle){
return window.getComputedStyle(element,'')
}else{
return element.currentStyle
}
}
缓冲运动 （每次变化的值是越来越小的）
//div位置变化 以缓冲运动进行变化
//获取div
var div = document.querySelector('div')
//运动三要素
//当前值
let current = parseFloat(getStyle(div).left)
//目標值
let target = 500
//给div添加点击事件
div.onclick = function () {
var timer = setInterval(() => {
//如果到了就清除定时器
if (current >= target) {clearInterval(timer)
} else {
//变化值 (目标值-当前值)/10 因为每次的值都会除10 那么对应的小数就会无限增加 就
会导致永远到不了（取整）
let step = Math.ceil((target - current) / 10)
//控制current的变化
current += step
//设置给对应的div
div.style.left = current + 'px'
}
}, 40)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element, '')
} else {
return element.currentStyle
}
}
