javaScript动画函数封装

别说谁变了你拦得住时间么 提交于 2019-12-06 04:59:36

封装一个原生JavaScript动画函数
  函数说明
    - startAnimation() 函数的入口。接收三个参数:
    - obj:被操作的Dom对象
    - json:{"预处理的属性":预处理属性值}
    - fn:startAnimation函数的回调,动画是否为联动/同步等形式。

  使用场景:
    - 缓动场景,透明度动画,多物体运动,多值运动,自动轮播图...。
  代码

            var speed = 0;   //起始定义一个运动速度变量。
            function startAnimation(obj, json, fn) {
                clearInterval(obj.timer);
                //在动画开始之前,先进行动画定时器的清理工作。
                obj.timer = setInterval(function () {
                    var cur = 0;
                    //定义一个初始值为零的变量,用来接收操作对象的属性
                    var flag = true; 
                    //如果所有的属性值都到达终点值,则为true
                    //透明度处理
                    for (var attr in json) {
                        switch(attr){
                            case 'opacity':
                                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                                break;
                            case 'scrollTop':
                                cur = obj[attr];
                                break;
                            default: cur = parseInt(getStyle(obj, attr));
                                break;

                        }
                        //1.求速度
                        speed = (json[attr] - cur) / 20;
                        speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
                        //2.临界处理
                        if (json[attr] !== cur) {
                            flag = false;
                        }
                        //3.运动起来
                        switch(attr){
                            case 'opacity':
                                obj.style[attr] = (cur + speed) / 100;
                                break;
                            case 'scrollTop':
                                obj.scrollTop = cur + speed;
                                break;
                            default: 
                                obj.style[attr] = cur + speed + 'px';
                                break;
                        }
                    }
                    if (flag) {
                        clearInterval(obj.timer);
                        if (fn) {
                            fn();
                        }
                        return;
                    }
                }, 30);
            }
            //获取属性的函数
            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    //兼容IE
                    return obj.currentStyle[attr];
                } else {
                    //主流浏览器
                    return getComputedStyle(obj, null)[attr];
                }
            }
              

            

  

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!