js----単純なアニメーション ライブラリのカプセル化

具体的なコードは次のとおりです:

~function(){var myEffect = {
        Linear:function(t,b,c,d){return c*t/d+b        },
        Quad: {//二次方的缓动（t^2）；easeIn: function(t,b,c,d){return c*(t/=d)*t + b;            },
            easeOut: function(t,b,c,d){return -c *(t/=d)*(t-2) + b;            },
            easeInOut: function(t,b,c,d){if ((t/=d/2) =2 ? myEffect[effect[0]][effect[1]] : myEffect[effect[0]]
        }else if(typeof effect === "function"){//我们的实际意义应该是:effect是不传递值的，传递进来的函数应该是回调函数的值callback = effect;
        }//在每一次执行方法之前，首先把当前元素之前正在运行的动画结束掉        window.clearInterval(curEle.timer);//根据target获取每一个方向的起始值begin和总距离changevar begin = {},change = {};for(var key in target){if(target.hasOwnProperty(key)){
                begin[key] = utils.css(curEle,key)
                change[key] = target[key] - begin[key];

            }
        }//实现多方向的运动动画var time = 0;
        curEle.timer = window.setInterval(function(){
            time+=10;//到达目标：结束动画，让当前元素的样式值等于目标样式值if(time>=duration){
                utils.css(curEle,target);
                window.clearInterval(curEle.timer);//在动画结束的时候，如果用户把回调函数传递给我了，我就把用户传递的回调函数执行,不仅执行还把this的指向改为当前操作的元素typeof callback === "function" ? callback.call(curEle) : null;//或者callback && callback()return;
            }//没到达目标:分别获取每一个方向的当前位置，给当前位置设置样式即可。for(var key in target){if(target.hasOwnProperty(key)){var curPos = tempEffect(time,begin[key],change[key],duration);
                    utils.css(curEle,key,curPos);
                }
            }
        },10)
    }

    window.myAnimate = move;
}()

以上がjs----単純なアニメーション ライブラリのカプセル化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。