学js的第十七天

1.平滑运动

• 需求：点击起飞 盒子开始移动 移动到1000px 盒子停止

    起飞
    

    

2.缓冲动画基础功能

• 需求：目标值是500和目标值是1000 所花费的时间是一样的

    起飞
    

    

• 问题1:永远到不了目标值

  • 原因：当current是491的时候 speed=0.9 left值=parseInt(491.9px) =491 所以current的值始终在491

  • 解决方法：让speed向上取整 Math.ceil

    起飞
    

    

    

3缓冲动画来回运动

• 需求：从left值是1000的位置 缓冲到500的位置

• 问题2：往回运动的时候 永远无法达到目标值

  • 分析：current是509的时候 speed的值是-0.9 Math.ceil之后就成了-0 speed的值最终是0 left值还是509 导致目标值永远都是509

  • 解决：让speed向下取整 Math.floor

    起飞
    

    

    

​

• 来回运动speed值的问题

  • 0-500 speed的值正数 Math.ceil

  • 1000-500 speed的值是负数 Math.floor

    起飞
    

    

    

4.来回运动函数封装

    起飞
    

    

    

5.透明度缓冲

• 问题3：缓冲透明度从1到0 没有缓冲动画

  • 分析：current是1的时候 speed的值-0.1 用Math.floor取整之后变成-1 opacity的值是0

  • 解决：是因为透明度的值太小了 将透明度的值放大n倍 放大100倍

6.缓冲任意属性

7.抽屉式运动

• 问题1：在移入事件的缓冲动画没有完成之前就移除 会造成盒子抽搐

  • 分析：是因为定时器累计的问题

  • 解决：在定义一个新的定时器之前就清除原先的定时器 确保只有一个定时器

• 问题2：同时运动多个盒子 盒子无法达到目标值

  • 分析：多个盒子都是调用buffMove函数 一进入这个函数就将之前的定时器清除掉了 共用了一个定时器的缘故

  • 解决：给每个盒子都单独定义一个timer，将每个盒子的定时器id都存储到元素的自定义属性timer上

    
1
    
2
    

8.多属性运动

• 问题1：运动多个属性的时候，无法多次调用buffMove函数，因为后者会覆盖前者

  • 解决：buffMove只能调用一次 可以每次传值的时候一个对象，对象存储格式为{"width":500,"height":500} {"样式名"：目标值}

• 问题2：如果多个属性的目标值不一致，个别属性无法到达目标点

  • 分析：如果某一个属性达到目标值 就会进到if(current==attrObj[name]) 就会清除定时器 导致剩余属性无法继续执行

  • 解决：

  1.假设所有属性都达到目标点再去清除定时器 var tag = true

  2.验证你假设的情况 一个一个属性的去验证

  3.验证之后你会得到一个结论 你的假设要么成立 要么不成立 如果成立清除定时器