day15 DOM运动

day15 DOM高级

1. 运动原理

1）运动原理

JavaScript实现运动的原理，就是通过定时器不断改变元素的位置，直至到达目标点后停止运动。通常，要让元素动起来，我们会通过改变元素的 left 和 top 值来改变元素的相对位置。

2）方法

• 1. 运动的物体使用绝对定位
• 1. 通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft（offsetRight）来控制左右移动

3) 步骤：

• 1. 开始运动前，先清除已有定时器（因为：如果连续点击按钮，物体会运动越来越快, 造成运动混乱）
• 1. 开启定时器，计算速度
• 1. 把运动和停止隔开（if/else), 判断停止条件，执行运动

2. 匀速运动

问题： 频繁点击按钮，由于每次点击 都要重新启动定时器， 相当于加速

解决： 每次启动定时器时,将上一个定时器清除

    
        
        
    
    
    
        启动
        

        

    

3. 往返运动

    
        
        
    
    
    
        <--
        -->
        

            
        
    

4. 匀速透明运动

注意两点：

非行内的读 getComputedStyle(Dom对象,false)['属性名'] 返回字符串；

Number(); 字符串转数字；

5. 缓冲运动

如果移动的像素小于半个像素，则会静止，看不到移动。所以是要关闭定时器的。

原理：//缓冲运动原理
     let speed = (target-obj.offsetLeft)/系数; 系数是速度变化率，系数越大,速度越慢 
    //速度取整
     speed =  speed>0 ? Math.ceil(speed) : Math.floor(speed);//核心算法

    
        
        
        
    
    
        启动
        

            
        
    

6. 反弹运动

核心思路： 当碰壁时将速度（位移）反向

    
        
        
        
    
    
        启动