策略模式-3.策略模式的动画 

<!DOCTYPE html>
    <html>
    <head>
        <title>策略模式demo</title>
    </head>
    <body>
        <div style="position: absolute;background:blue;left: 0" id="div">我是div</div>        
    </body>
    <script type="text/javascript">
        //运动算法
        var tween = {
                linear: function( t, b, c, d ){
                    return c*t/d + b;
                },
                easeIn: function( t, b, c, d ){
                    return c * ( t /= d ) * t + b;
                },
                strongEaseIn: function(t, b, c, d){
                    return c * ( t /= d ) * t * t * t * t + b;
                },
                strongEaseOut: function(t, b, c, d){
                    return c * ( ( t = t / d - 1) * t * t * t * t + 1 ) + b;
                },
                sineaseIn: function( t, b, c, d ){
                    return c * ( t /= d) * t * t + b;
                },
                sineaseOut: function(t,b,c,d){
                    return c * ( ( t = t / d - 1) * t * t + 1 ) + b;
                }
            };
        var Animate = function (dom) {
            this.dom          = dom;//进行运行的dom节点
            this.startTime    = 0;//动画开始时间
            this.startPos     = 0;//dom的初始位置
            this.endPos       = 0;//dom的目标位置
            this.propertyName = null;//dom节点需要被改变的css属性名
            this.easing       = null;//缓动算法
            this.duration     = null;//动画持续时间
        }
        Animate.prototype.start = function (propertyName, endPos, duration, easing) {
            this.startTime    = +new Date;//动画启动时间
            this.startPos     = this.dom.getBoundingClientRect()[propertyName];//初始位置
            this.propertyName = propertyName;
            this.endPos       = endPos;
            this.duration     = duration;
            this.easing       = tween[ easing ]; // 缓动算法

            var _self  = this;
            var timeId = setInterval(function () {//启动定时器；开始动画
                if (_self.step() === false) {//如果动画结束；停止计时器
                    clearInterval(timeId);
                }
            },19)
        };
        Animate.prototype.step = function () {
            var t = +new Date;
            if (t>=this.startTime+this.duration) {
                this.update(this.endPos);
                return false;
            }
            //当前位置
            var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
            this.update(pos);
            console.log(pos);
        }
        Animate.prototype.update = function (pos) {
            this.dom.style[this.propertyName] = pos+'px';
        }

        //==========测试===========
        var div     = document.getElementById('div');
        var animate = new Animate(div);
        animate.start( 'left', 1000, 2000, 'sineaseOut' );
        
    </script>
    </html>

 

posted @ 2017-07-03 13:53  流年之外天空蓝  阅读(240)  评论(0)    收藏  举报