Transitioner

From Frontal Wiki

Introduction to the transitioner tag

The "transitioner" tag is used to specify how a manager tag transitions away from the current sibling or to the next one. (A transitioner tag must always be a child of a manager tag.) So typically, a container will contain at least two transitioner elements: one to transition the current sibling and one to transition the next. For example, here we implement a click-through slide show with fading transitions. (Just click on an image to go to the next. See the section on the "manager" tag for a discussion of the "frButtonNext" style class.)

<style><![CDATA[
    img { movie-registration-x: 320px; movie-registration-y: 240px; }
]]></style>
<div style="layout: stack; ">
    <manager id="mgr2" style="hide-unselected: true; tween-container-init: true;">
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="alpha" start="1" finish="0" duration="10" />
        <transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="alpha" start="0" finish="1" duration="10" delay="10" />
    </manager>
    <img class="frButtonNext" mgrId="mgr2" src="http://www.frontalcode.com/assets/images/image_1.jpg" />
    <img class="frButtonNext" mgrId="mgr2" src="http://www.frontalcode.com/assets/images/image_2.jpg" />
    <img class="frButtonNext" mgrId="mgr2" src="http://www.frontalcode.com/assets/images/image_3.jpg" />
</div>

We specify the target of a transitioner with the "target" attribute. The value is always either "current" or "next" but as we'll see later, a transitioner need not always be active for every transition so this is not a limitation. So in this example, the first transitioner is applied to the current sibling and the second to the next.

As mentioned, the "custom" attribute is used to choose the one transitioner built into Frontal, com.frontalcode.transitions.TweenTransition. (If you download the source code and build your own Frontal Renderer, custom transitioners may be easily added to Frontal if needed.) As its name suggests, this extension tweens some style of the sibling from a start value to a finish value over some period of time. We give the details of the attributes that control the tween below, but they should be pretty intuitive; the first transitioner is tweening the current sibling's alpha from 1 to 0 over 10 frames and the second transitioner is waiting 10 frames before tweening the next sibling's alpha from 0 to 1 over 10 frames.

Now let's say that when we transition, we want the current sibling to spin and scale to 0 as well as fade and we want the next sibling to slide in from the right as well as fade in. Let's add these transitioner tags to the ones we have already in the manager tag:

<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="rotation" start="0" finish="180" duration="10" style="tween-container-reset: true;" />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="current" property="scale" start="1" finish="0" duration="10" style=" tween-container-reset: true;"  />
<transitioner custom="com.frontalcode.transitions.TweenTransition" target="next" property="left" start="480" finish="0" duration="10" delay="10" />

As you can see, we can fairly easily build up a complex transition by using separate transitioner tags.

We can have even greater control by using the "transitions" attribute on the "transitioner" tag. With this attribute, we can specify that a transitioner should only be run when transitioning from certain siblings and to certain siblings. The value for this attribute is a comma-separated list of specifications of the form "fromIndex:toIndex" where each specification represents a transition from one sibling to another. So, for example, if a transitioner should only applied for the transition from the first sibling to the second, then we'd add this attribute and value:

transitions="1:2"

And if it should also be applied if we ever transition from the first to the third child then we'd write this:

transitions="1:2, 1:3"

We can use "*" to match any element so if a transition should be applied whenever leaving the third child then we would write this:

transitions="3:*"

As well as numeric indexes, we can also use names or ids in the value of the transitions attribute to identify candidate elements. When we do this, we need escape colons, asterisks, backslashes, dashes and commas with a backslash to avoid ambiguities. For example, if an element has the name "* hello, world *" and we want to apply a transition whenever going to it then we'd write:

transitions="*:\* hello\, world \*"

Finally, we can use a dash to represent a range of indexes. For example, this would limit the transitioner to those transitions that start at the first sibling and go to the first, second or third sibling:

transitions="1:1-3"

In our example, add the following to the rotation transitioner tag:

transitions="1:*"

And add this to the scale transitioner tag:

transitions="*:3"

Now when we run our example, the rotation on the current sibling only occurs when leaving the first sibling. And the scale only occurs when going to the third.

Implementation

The "transitioner" tag is a non-visual element implemented by the Transitioner class which extends the DocumentElement class.

Properties

In addition to the DocumentElement class's properties, ContainerManager adds these:

• target: The current Container this transitioner is acting on. Read-only.

Attributes

The full list of attributes specific to a transitioner tag are:

• target: Either "current" or "next."
• delay: How long to delay in the entire transition before starting this particular transitioner.
• useSeconds: "true" or "false," by default it is "false."

TweenTransition Attributes

The TweenTransition class extends the Transitioner class. Attributes particular to tags that use this class are:

• property: The style to tween on the target sibling.
• start: What value to start the style at.
• finish: What value to tween the style to.
• duration: How long to spend doing the tween.

TweenTransition Styles

There are also styles particular to the TweenTransition and they are:

• tween-container-init: This indicates that when a transition begins, the transitioner's start value should be applied to the style even if the transitioner is delayed. This may be set on each transitioner though in the example it is shown behaving in a cascading fashion and applying to all transitioners.
• tween-container-reset: This indicates that when the entire transition to the next sibling including all separate transitions ends, the transitioner's start value should be applied to the style. This is useful in those case where a transitioner is "one way" and so needing to be reset before it is run again.
• tween-container-ease: This is used to specify the easing function to use for the tween, e.g., "fl.motion.easing.Bounce.easeOut."