js 原生封装的简单动画

81 阅读 0 评论 54 点赞

我是靠谱客的博主重要糖豆，最近开发中收集的这篇文章主要介绍js 原生封装的简单动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

/**

 * 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);


}