Functional and Design Specification

Glossary

Transition Interruption: What happens when the application is in the middle of running a transition from state A to B when some action occurs that causes the application to go to state C, where there is some transition defined between state B and state C. The way that that the A->B transition is ended or changed into the transition from B->C is the process of transition interruption, which this feature hopes to solve.

Animation Blending: combining independent animations running on a particular object to produce a single result. For example, an animation moving a button from x=0 to x=100 could be blended with an animation moving the same button from y=0 to y=100 to produce a final animation that moves the button in both x and y. The way that the animations are blended together to produce a smooth result, especially when the animations may start and end at different times, is the trick.

Summary and Background

One of the more difficult aspects of using transitions in Flex is that interrupting transitions and going to different states can cause disruptive behavior. Because Flex cannot currently play multiple effects simultaneously (or, to be more specific and correct, cannot play multiple effects that operate on the same targets/properties without artifacts), the transition engine simply ends any currently-running transition effect before launching the new ones. The process of ending the previous transition effect causes the effect to snap the targets to their end locations, which causes sudden and disturbing movement before the new animation begins.

The purpose of this feature is to enable more functionality and an API that enables transitions to smoothly move between the effects of different transitions.

The "autoReverse=true" feature in Flex 4 addressed the specific case of interruption behavior when the interrupting transition takes the application back to the state that the interrupted transition started from. So if the app is going from state A->B and there is an event that causes a return to state A, the reverse transition effect will be played from the same point in time that the A->B transition stopped.

This feature is more about how we switch between transitions which are not simply reverses of each other.

Usage Scenarios

A designer or developer expects the user to switch between states often, and would like a means of smoothing out the transition between states when an effect in progress is interrupted (due to a new state change).

Detailed Description

There are several distinct parts of this feature's implementation:

• API: There needs to be a way for developers to choose the interruption behavior they want. The choices might include:
  • the current behavior (end the current transition, start the next one from its b)
  • new 'stop' behavior: stop the current transition where it's at and start the new transition without jumping to the end of the active transition first.
  • optional: blend: finish the current transition, but gradually blend that effect with the effect of the new transition
  • optional: complete: we might also want to offer the choice of allowing the first transition to finish (letting it animate to the end) and then starting the next transition after that.
• Implementing the stop/switch behavior. This part of the feature should not be too difficult. We just need to stop the current effect and start the next one immediately.
• Implementing the blend behavior: This feature is much larger, requiring prototyping and research work. I'd put it at a B priority: we should have it eventually as part of transition interruption, but it's not required to make the basic feature of interruption work better than it does today.
• Implementing the 'complete' behavior: This part of the feature would also require more work, because everything in transitions is synchronous now. I think this behavior is probably less important than the other three; I'd give it a 'C' for priority.

API Description

The new InterruptionBehavior class which holds the const/enum strings for the new setting on Transition:

package mx.states
{
    /**
     *  The InterruptionBehavior class defines constants for use with the
     *  <code>interruptionBehavior</code> property of the Transition class.
     *
     *  @see Transition#interruptionBehavior
     */
    public final class InterruptionBehavior
    {
        /**
         * Specifies that a transition that interrupts another running
         * transition will end that other transition before starting.
         */
        public static const END:String = "end";

        /**
         * Specifies that a transition that interrupts another running
         * transition will stop that other transition in place before starting.
         */
        public static const STOP:String = "stop";
    }
}

The new property on Transition:

    /**
     *  This property controls how this transition behaves with respect to
     *  any currently-running transition. By default, the current transition will
     *  end, which snaps all values to their end values. This was the default
     *  behavior as of Flex 4, before this property existed. But if the value
     *  "stop" is selected for this property, the previous transition will stop
     *  in place, leaving values where they are and the next transition will
     *  start with those values.
     *
     *  <p>This property takes precedence over the <code>autoReverse</code>
     *  property, so that if <code>interruptionBehavior</code> is set to "stop"
     *  on a transition, that transition will stop a running transition in place
     *  and will be played, even if the previous transition is the reverse of the
     *  new one.</p>
     *
     *  @default InterruptionBehavior.END
     */
    public var interruptionBehavior:String = InterruptionBehavior.END;

B Features

The 'blend' interruption behavior as described above, will be deferred til post Flex 4.5.

Examples and Usage

In the example below, as the state changes the rectangle will stop its current transition and pick up the next transition where it left off prior.

<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               height="600" width="600" >

    <s:states>
        <s:State name="Left"/>
        <s:State name="Right"/>
        <s:State name="Bottom"/>
    </s:states>

    <s:transitions>
        <s:Transition fromState="*" toState="*" interruptionBehavior="stop">
            <s:Move target="{rect}" duration="1000"/>
        </s:Transition>
    </s:transitions>

    <s:HGroup>
        <s:Button label="Left" click="currentState = 'Left'"/>
        <s:Button label="Right" click="currentState = 'Right'"/>
        <s:Button label="Bottom" click="currentState = 'Bottom'"/>
    </s:HGroup>

    <s:Rect id="rect" width="100" height="100" x.Left="50" x.Right="450" y="50" x.Bottom="200" y.Bottom="300">
        <s:fill>
            <s:SolidColor color="#FF0000"/>
        </s:fill>
    </s:Rect>
</s:Application>

This section to be filled in after prototyping is completed

Additional Implementation Details

Enter implementation/design details for the feature here. This section may be updated after the spec signs off.

This section to be filled in after prototyping is completed

Compiler Work

Not applicable.

Backwards Compatibility

Syntax changes

Not applicable.

Behavior

Note that interruption behavior 'stop' takes precedence over autoReverse 'true', in that if interruptionBehavior is set to "stop" on a transition, that transition will stop a running transition in place and will be played, even if the previous transition is the reverse of the new one.

Supporting MX components with auto-reverse and interruption is not a goal for this feature.

Warnings/Deprecation

Not applicable.

Accessibility

Not applicable.

Performance

Not applicable.

Globalization

Not applicable.

Localization

Compiler Features

Not applicable.

Framework Features

Not applicable.

Cross-Platform Considerations

Not applicable.

Issues and Recommendations

Not applicable.

\