add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / fx / Animator.js

/**\r
 * @class Ext.fx.Animator\r
 *\r
 * This class is used to run keyframe based animations, which follows the CSS3 based animation structure.\r
 * Keyframe animations differ from typical from/to animations in that they offer the ability to specify values\r
 * at various points throughout the animation.\r
 *\r
 * ## Using Keyframes\r
 *\r
 * The {@link #keyframes} option is the most important part of specifying an animation when using this\r
 * class. A key frame is a point in a particular animation. We represent this as a percentage of the\r
 * total animation duration. At each key frame, we can specify the target values at that time. Note that\r
 * you *must* specify the values at 0% and 100%, the start and ending values. There is also a {@link #keyframe}\r
 * event that fires after each key frame is reached.\r
 *\r
 * ## Example\r
 *\r
 * In the example below, we modify the values of the element at each fifth throughout the animation.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.fx.Animator', {\r
 *         target: Ext.getBody().createChild({\r
 *             style: {\r
 *                 width: '100px',\r
 *                 height: '100px',\r
 *                 'background-color': 'red'\r
 *             }\r
 *         }),\r
 *         duration: 10000, // 10 seconds\r
 *         keyframes: {\r
 *             0: {\r
 *                 opacity: 1,\r
 *                 backgroundColor: 'FF0000'\r
 *             },\r
 *             20: {\r
 *                 x: 30,\r
 *                 opacity: 0.5\r
 *             },\r
 *             40: {\r
 *                 x: 130,\r
 *                 backgroundColor: '0000FF'\r
 *             },\r
 *             60: {\r
 *                 y: 80,\r
 *                 opacity: 0.3\r
 *             },\r
 *             80: {\r
 *                 width: 200,\r
 *                 y: 200\r
 *             },\r
 *             100: {\r
 *                 opacity: 1,\r
 *                 backgroundColor: '00FF00'\r
 *             }\r
 *         }\r
 *     });\r
 */\r
Ext.define('Ext.fx.Animator', {\r
\r
    /* Begin Definitions */\r
\r
    mixins: {\r
        observable: 'Ext.util.Observable'\r
    },\r
\r
    requires: ['Ext.fx.Manager'],\r
\r
    /* End Definitions */\r
\r
    /**\r
     * @property {Boolean} isAnimator\r
     * `true` in this class to identify an object as an instantiated Animator, or subclass thereof.\r
     */\r
    isAnimator: true,\r
\r
    /**\r
     * @cfg {Number} duration\r
     * Time in milliseconds for the animation to last. Defaults to 250.\r
     */\r
    duration: 250,\r
\r
    /**\r
     * @cfg {Number} delay\r
     * Time to delay before starting the animation. Defaults to 0.\r
     */\r
    delay: 0,\r
\r
    //  private used to track a delayed starting time\r
    delayStart: 0,\r
\r
    /**\r
     * @cfg {Boolean} dynamic\r
     * Currently only for Component Animation: Only set a component's outer element size bypassing layouts.  Set to true to do full layouts for every frame of the animation.  Defaults to false.\r
     */\r
    dynamic: false,\r
\r
    /**\r
     * @cfg {String} easing\r
     *\r
     * This describes how the intermediate values used during a transition will be calculated. It allows for a transition to change\r
     * speed over its duration.\r
     *\r
     *  - backIn\r
     *  - backOut\r
     *  - bounceIn\r
     *  - bounceOut\r
     *  - ease\r
     *  - easeIn\r
     *  - easeOut\r
     *  - easeInOut\r
     *  - elasticIn\r
     *  - elasticOut\r
     *  - cubic-bezier(x1, y1, x2, y2)\r
     *\r
     * Note that cubic-bezier will create a custom easing curve following the CSS3 [transition-timing-function][0]\r
     * specification.  The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2). All values must\r
     * be in the range [0, 1] or the definition is invalid.\r
     *\r
     * [0]: http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag\r
     */\r
    easing: 'ease',\r
\r
    /**\r
     * Flag to determine if the animation has started\r
     * @property running\r
     * @type Boolean\r
     */\r
    running: false,\r
\r
    /**\r
     * Flag to determine if the animation is paused. Only set this to true if you need to\r
     * keep the Anim instance around to be unpaused later; otherwise call {@link #end}.\r
     * @property paused\r
     * @type Boolean\r
     */\r
    paused: false,\r
\r
    /**\r
     * @private\r
     */\r
    damper: 1,\r
\r
    /**\r
     * @cfg {Number} iterations\r
     * Number of times to execute the animation. Defaults to 1.\r
     */\r
    iterations: 1,\r
\r
    /**\r
     * Current iteration the animation is running.\r
     * @property currentIteration\r
     * @type Number\r
     */\r
    currentIteration: 0,\r
\r
    /**\r
     * Current keyframe step of the animation.\r
     * @property keyframeStep\r
     * @type Number\r
     */\r
    keyframeStep: 0,\r
\r
    /**\r
     * @private\r
     */\r
    animKeyFramesRE: /^(from|to|\d+%?)$/,\r
\r
    /**\r
     * @cfg {Ext.fx.target.Target} target\r
     * The Ext.fx.target to apply the animation to.  If not specified during initialization, this can be passed to the applyAnimator\r
     * method to apply the same animation to many targets.\r
     */\r
\r
    /**\r
     * @event beforeanimate\r
     * Fires before the animation starts. A handler can return false to cancel the animation.\r
     * @param {Ext.fx.Animator} this\r
     */\r
\r
    /**\r
      * @event keyframe\r
      * Fires at each keyframe.\r
      * @param {Ext.fx.Animator} this\r
      * @param {Number} keyframe step number\r
      */\r
\r
    /**\r
     * @event afteranimate\r
     * Fires when the animation is complete.\r
     * @param {Ext.fx.Animator} this\r
     * @param {Date} startTime\r
     */\r
\r
     /**\r
      * @cfg {Object} keyframes\r
      * Animation keyframes follow the CSS3 Animation configuration pattern. 'from' is always considered '0%' and 'to'\r
      * is considered '100%'.<b>Every keyframe declaration must have a keyframe rule for 0% and 100%, possibly defined using\r
      * "from" or "to"</b>.  A keyframe declaration without these keyframe selectors is invalid and will not be available for\r
      * animation.  The keyframe declaration for a keyframe rule consists of properties and values. Properties that are unable to\r
      * be animated are ignored in these rules, with the exception of 'easing' which can be changed at each keyframe. For example:\r
 <pre><code>\r
keyframes : {\r
    '0%': {\r
        left: 100\r
    },\r
    '40%': {\r
        left: 150\r
    },\r
    '60%': {\r
        left: 75\r
    },\r
    '100%': {\r
        left: 100\r
    }\r
}\r
 </code></pre>\r
      */\r
    constructor: function(config) {\r
        var me = this;\r
        config = Ext.apply(me, config || {});\r
        me.config = config;\r
        me.id = Ext.id(null, 'ext-animator-');\r
\r
        me.mixins.observable.constructor.call(me, config);\r
        me.timeline = [];\r
        me.createTimeline(me.keyframes);\r
        if (me.target) {\r
            me.applyAnimator(me.target);\r
            Ext.fx.Manager.addAnim(me);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    sorter: function (a, b) {\r
        return a.pct - b.pct;\r
    },\r
\r
    /**\r
     * @private\r
     * Takes the given keyframe configuration object and converts it into an ordered array with the passed attributes per keyframe\r
     * or applying the 'to' configuration to all keyframes.  Also calculates the proper animation duration per keyframe.\r
     */\r
    createTimeline: function(keyframes) {\r
        var me = this,\r
            attrs = [],\r
            to = me.to || {},\r
            duration = me.duration,\r
            prevMs, ms, i, ln, pct, attr;\r
\r
        for (pct in keyframes) {\r
            if (keyframes.hasOwnProperty(pct) && me.animKeyFramesRE.test(pct)) {\r
                attr = {attrs: Ext.apply(keyframes[pct], to)};\r
                // CSS3 spec allow for from/to to be specified.\r
                if (pct === "from") {\r
                    pct = 0;\r
                }\r
                else if (pct === "to") {\r
                    pct = 100;\r
                }\r
                // convert % values into integers\r
                attr.pct = parseInt(pct, 10);\r
                attrs.push(attr);\r
            }\r
        }\r
        // Sort by pct property\r
        Ext.Array.sort(attrs, me.sorter);\r
        // Only an end\r
        //if (attrs[0].pct) {\r
        //    attrs.unshift({pct: 0, attrs: element.attrs});\r
        //}\r
\r
        ln = attrs.length;\r
        for (i = 0; i < ln; i++) {\r
            prevMs = (attrs[i - 1]) ? duration * (attrs[i - 1].pct / 100) : 0;\r
            ms = duration * (attrs[i].pct / 100);\r
            me.timeline.push({\r
                duration: ms - prevMs,\r
                attrs: attrs[i].attrs\r
            });\r
        }\r
    },\r
\r
    /**\r
     * Applies animation to the Ext.fx.target\r
     * @param {String/Object} target\r
     * @private\r
     */\r
    applyAnimator: function(target) {\r
        var me = this,\r
            anims = [],\r
            timeline = me.timeline,\r
            ln = timeline.length,\r
            anim, easing, damper, attrs, i;\r
\r
        if (me.fireEvent('beforeanimate', me) !== false) {\r
            for (i = 0; i < ln; i++) {\r
                anim = timeline[i];\r
                attrs = anim.attrs;\r
                easing = attrs.easing || me.easing;\r
                damper = attrs.damper || me.damper;\r
                delete attrs.easing;\r
                delete attrs.damper;\r
                anim = new Ext.fx.Anim({\r
                    target: target,\r
                    easing: easing,\r
                    damper: damper,\r
                    duration: anim.duration,\r
                    paused: true,\r
                    to: attrs\r
                });\r
                anims.push(anim);\r
            }\r
            me.animations = anims;\r
            me.target = anim.target;\r
            for (i = 0; i < ln - 1; i++) {\r
                anim = anims[i];\r
                anim.nextAnim = anims[i + 1];\r
                anim.on('afteranimate', function() {\r
                    this.nextAnim.paused = false;\r
                });\r
                anim.on('afteranimate', function() {\r
                    this.fireEvent('keyframe', this, ++this.keyframeStep);\r
                }, me);\r
            }\r
            anims[ln - 1].on('afteranimate', function() {\r
                this.lastFrame();\r
            }, me);\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Fires beforeanimate and sets the running flag.\r
     */\r
    start: function(startTime) {\r
        var me = this,\r
            delay = me.delay,\r
            delayStart = me.delayStart,\r
            delayDelta;\r
        if (delay) {\r
            if (!delayStart) {\r
                me.delayStart = startTime;\r
                return;\r
            }\r
            else {\r
                delayDelta = startTime - delayStart;\r
                if (delayDelta < delay) {\r
                    return;\r
                }\r
                else {\r
                    // Compensate for frame delay;\r
                    startTime = new Date(delayStart.getTime() + delay);\r
                }\r
            }\r
        }\r
        if (me.fireEvent('beforeanimate', me) !== false) {\r
            me.startTime = startTime;\r
            me.running = true;\r
            me.animations[me.keyframeStep].paused = false;\r
        }\r
    },\r
\r
    /**\r
     * @private\r
     * Perform lastFrame cleanup and handle iterations\r
     * @return a hash of the new attributes.\r
     */\r
    lastFrame: function() {\r
        var me = this,\r
            iter = me.iterations,\r
            iterCount = me.currentIteration;\r
\r
        iterCount++;\r
        if (iterCount < iter) {\r
            me.startTime = new Date();\r
            me.currentIteration = iterCount;\r
            me.keyframeStep = 0;\r
            me.applyAnimator(me.target);\r
            me.animations[me.keyframeStep].paused = false;\r
        }\r
        else {\r
            me.currentIteration = 0;\r
            me.end();\r
        }\r
    },\r
\r
    /**\r
     * Fire afteranimate event and end the animation. Usually called automatically when the\r
     * animation reaches its final frame, but can also be called manually to pre-emptively\r
     * stop and destroy the running animation.\r
     */\r
    end: function() {\r
        var me = this;\r
        me.fireEvent('afteranimate', me, me.startTime, new Date() - me.startTime);\r
    },\r
    \r
    isReady: function() {\r
        return this.paused === false && this.running === false && this.iterations > 0;\r
    },\r
    \r
    isRunning: function() {\r
        // Explicitly return false, we don't want to be run continuously by the manager\r
        return false;\r
    }\r
});\r