day16-运动上

1.什么是运动

运动（动画），操作对应的dom元素发生变化（这个变化要持续多次（修改样式）），每次间隔的时间是你肉眼察觉不出的（时间比较短）。当到达目标位置就停止。这个就是所谓的动画。

主要实现原理

• 利用定时器定时操作dom的样式
• 当对应的设置目标值到达以后清除对应的定时器

运动三大要素

• 当前值（current）
• 变化值 （step）
• 目标值 （target）

2.主要动画

匀速运动（每次变化的值是一样的）

示例（操作div的宽度变化）

// 操作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位置变化 以缓冲运动进行变化
//获取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
  }
}

缓冲封装

//缓冲运动封装
//element表示当前的元素 target表示目标对象
function bufferAnimation(element, targetObj) {
   //如果element为undefined就直接报错
   if(!element){
       throw new Error('元素不能缺少')
  }
   //给元素对象添加一个属性为timer他是一个定时器
   element.timer = setInterval(() => {
       var flag = true
       //遍历对象
       for (let key in targetObj) {
           //取出当前值
           let current = parseFloat(getStyle(element)[key])
           //取出目标值
           let target = targetObj[key]
           //判断当前如果是位置的变化及对应的宽度高度的变化
           if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
               //步长 负值向下取整 正值向上取整
               var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
               current += step
               element.style[key] = current + 'px'
          }
           //如果是透明度的变化
           if(key == 'opacity'){
               //步长 负值向下取整 正值向上取整
               var 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)
      }
  },80)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
   if (window.getComputedStyle) {
       return window.getComputedStyle(element, '')
  } else {
       return element.currentStyle
  }
}