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

}