基于tween的个人动画库封装

xiaoTuiMao

于 2015-08-31 10:45:24 发布

阅读量939

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签：动画库

本文链接：https://blog.youkuaiyun.com/xiaoTuiMao/article/details/48130701

本文介绍了如何基于tween算法封装个人动画库。主要内容包括理解动画需要的变量，如开始位置、目标位置、变化距离和总时间，以及如何利用这些参数在tween算法中计算当前位置。还提到了封装动画函数时需要考虑的元素选择、目标位置、持续时间和回调函数。最后，展示了如何实现更复杂的多维动画封装，并提到实际操作中setCss的遍历处理。有兴趣了解更多细节可联系作者。

在做动画之前我们需要搞清楚动画需要哪些变量
1：起步的位置（状态） begin
2：运动的终点 target
3：运动的距离 change=target-begin
4：运动所需的时总时间 duration
5：当前运动了多久 timer
当前所在的位置=timer/duration*change+begin
所以我们在写动画这个函数的时候，动画算法方面需要4这些参数
在tween算法中，算法已经设计好了我们只需要将timer duration change begin 这四个值传递进去即可得到我们所需的当前位置的值，
除了算法，我们还需要了解我们需要传递什么值给我们的动画的函数
1：指定运动的元素
2：运动的目的地即target
2：运动所需的时间 duration
3：可以传递也可以不传递即回调函数，即当动画执行完再执行的函数
了解了这些那么我们写一个简单的动画

function animate(ele, attr, target, duration,fnCallBack) {
   
   
        var begin = getCss(ele, attr);
        var change = target - begin;
        var timer = 0;