js 原生封装的简单动画

最新推荐文章于 2023-02-02 14:44:52 发布

yan_gogo

最新推荐文章于 2023-02-02 14:44:52 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏：技术分享文章标签： js原生自己学习

本文链接：https://blog.youkuaiyun.com/yan_gogo/article/details/80870953

技术分享专栏收录该内容

17 篇文章

订阅专栏

/**
 * Created by luodianlei on 2018/5/12.
 */
//要封装一个函数.这个函数,既可以从左到右,也可以从右到左


// 第一个参数: 要操作的元素
// 第二个参数: 目标位置
// 第三个参数: 步数
// 第四个参数: 到达目标之后调用的函数

function animate(ele, target, step, time, fn){
  
  //防止注册多个定时器
  if(ele.timeid){
    clearInterval(ele.timeid);
  }
  
  // 1. 让元素缓慢移动
  ele.timeid = setInterval(function(){
    
    // 2. 获取当前的位置
    var current = ele.offsetLeft;
    // 3. 判断是从左往右还是从右往左
    if(target - current > 0){
      // 从左往右
      var final = current + step;
    }else{
      //从右往左
      var final = current - step;
    }
    // 4. 让元素动起来
    ele.style.left = final + 'px';
    
    // 5. 判断是否到底目标位置
    // 如何判断到达目标位置
    // Math.abs(目标位置 - 当前位置的差值) < step 就证明要到达目标位置了
    if(Math.abs(target - final) < step){
      ele.style.left = target + 'px';
      clearInterval(ele.timeid);  
      //如果fn被赋值,就要调用,如果fn不赋值就不调用
      if((typeof fn) === 'function'){
        fn();
      }else{
        // 证明传入进来的不是函数
        //报错,提示用户,传进来的不是函数
        // throw // 抛出去
      //  创建一个错误
      //     new Error('语法错误:第四个参数必须是函数');
   
        throw new Error('语法错误:第四个参数必须是函数');    
      } 
    }      
  }, time);
   
}