The LzAnimatorGroup and LzAnimator Classes

The animator tag should be nested within the tag of the object you want to animate. The animator tag creates an LzAnimator object. The LzAnimator class is a subclass of LzAnimatorGroup, which in turn is a subclass of LzNode. All attributes in LzAnimator are inherited from LzAnimatorGroup and are given in Table 7.1.

Here are the methods defined in the LzAnimatorGroup class.

doStart()

This method is invoked to set the starting flags and value, raise the onstart event, and register the animator that will process the main idle loop.

pause(arg)

Pauses the animation if arg is true and resumes animation if arg is false.

setTarget(target)

Sets the target of the animation. The target argument must be a reference to an object.

stop()

This method is invoked when the animation is complete or when the animator is destroyed.

The Animator class adds two methods:

setMotion(motion)

Sets the motion style for the animator. The motion argument can be one of these: “easein”, “easeout”, “linear”, or “easeboth”. The default is “easeboth”.

setTo(value)

Assigns value to the destination value.

In addition, the animator and animatorgroup tags have the following events:

onstart

Triggered when the animation starts.

onstop

Raised when the animation stops.

onrepeat

Raised when the animation repeats.

There is also the onfinish event that has been deprecated and replaced by onstop.

As an example, the LZX application in Listing 7.1 shows a button that moves along a horizontal line.

Listing 7.1. A simple animation

<canvas height="400">
    <button width="70" text="Example">
        <animator attribute="x" from ="0" to="300" duration="1000"/>
    </button>
</canvas>

The button in Listing 7.1 cruises from x=0 to x=300. If the from attribute is missing, the current value of x is assumed as the start value.

To test this application, direct your browser to this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest1.lzx

Figure 7.1 shows the application in Listing 7.1.

Using Relative Values

If the relative attribute of the animator tag is set to true, the to attribute specifies a value that is relative to the current value. For example, the code in Listing 7.1 is rewritten in Listing 7.2

Listing 7.2. Using relative values

<canvas height="400">
    <button x="70" width="70" text="Example">
        <animator attribute="x" relative="true" to="70"
       duration="1000"/>
    </button>
</canvas>

Because the initial value of x is 70, after the animation, the button’s x attribute will be 140. If the relative attribute is taken out from the animator tag in Listing 7.2, the button will not move at all.

You can test the code in Listing 7.2 using this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest2.lzx

Multiple Animation Pieces

By employing more than one animator tag, you can move an object simultaneously in two or more directions. Consider the code in Listing 7.3. It will rotate as it moves along the X axis.

Listing 7.3. Using multiple animator tags

<canvas>
    <view y="100" x="100" width="70" height="50" bgcolor="gray">
        <animator attribute="x" to="200" duration="3000"/>
        <animator attribute="rotation" to="360" duration="3000"/>
    </view>
</canvas>

To test this application, use the following link:

http://localhost:8080/lps-4.0.x/app07/animationTest3.lzx

Figure 7.2 shows the result.

Starting Manually

The animation in the previous examples starts to move as soon as the generated application loads. To make it start only when it is told to do so, set the animator tag’s start attribute to false. Consider the code in Listing 7.4.

Listing 7.4. Starting animation manually

<canvas height="400">
    <button width="70" text="Click here" onclick="this.a.start()">
        <animator name="a" attribute="x" start="false"
                from ="0" to="300" duration="1000" motion="easein"/>
    </button>
</canvas>

This time, the button will be stationary, until it is clicked. The onclick event of the button is set to invoke the start method of the animator. If there is more than one animator tag, you must start all of them.

To compile and run the application in Listing 7.4, use this URL.

http://localhost:8080/lps-4.0.x/app07/animationTest4.lzx

Repeating Animation

The duration attribute of the animator tag can be set to determine how many times the animation repeats itself. Set it to “Infinity” to make the animation repeat for an indefinite number of times.

For example, the OpenLaszlo application in Listing 7.5 shows an animation that is repeated three times.

Listing 7.5. Repeating animation

<canvas width="200" height="200" bgcolor="silver" >
						<view bgcolor="black" x="100" y="100" width="40" height="40">
						<animator attribute="rotation" from="0" to="360"
						duration="3000" repeat="3"/>
						</view>
						</canvas>

To test the application, use this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest5.lzx

As another example, the code in Listing 7.6 shows a view that circles another view.

Listing 7.6. Moving along a circle

<canvas height="400">
    <view bgcolor="red" x="98" y="98" width="4" height="4"/>
    <view width="20" height="20" bgcolor="silver"
            x="${ 100 + 30 * Math.cos(angle*Math.PI/180)}"
            y="${ 100 + 30 * Math.sin(angle*Math.PI/180)}">
        <attribute name="angle" value="0"/>
        <animator motion="linear" attribute="angle" from ="0"
                to="360" duration="2000" repeat="Infinity"/>
        <animator motion="linear" attribute="rotation" from ="0"
                to="360" duration="2000" repeat="Infinity"/>
    </view>
</canvas>

This URL can be used to compile and run the animation in Listing 7.6.

Figure 7.3 shows the result

Using the animate Method

In the previous examples, we used the animator tag to create animation. The animate method of the LzNode class can also be used to achieve the same. This method has the following signature.

animate(property, to, duration, isRelative, args)

The parameters are as follows.

• property. Specifies the property to animate.

• to. The end value of the animation.

• duration. The duration of the animation in milliseconds.

• isRelative. Specifies if the value of the to argument is applied relative to the current value.

• args. A dictionary of attributes to pass to the LzAnimator constructor.

For example, the code in Listing 7.7 shows an LZX application that uses the animate method.

Listing 7.7. Using the animate method

<canvas height="300">
    <view width="200">
        <simplelayout axis="y"/>
        <button>Help
            <method event="onclick">
                if (parent.helpView.height==0) {
                    parent.helpView.animate("height",70, 300,
       false);
                } else {
                    parent.helpView.animate("height",0, 300, false);
                }
            </method>
        </button>
        <view name="helpView" bgcolor="#dddddd" height="0"
                width="${parent.width}" clip="true" >
            <text y="10" multiline="true" width="${parent.width}">
                You can use the animator and animatorgroup tags to
                create animation
            </text>
        </view>
    </view>
</canvas>

In the code in Listing 7.7, the button has an onclick event handler as follows:

<method event="onclick">
    if (parent.helpView.height==0) {
        parent.helpView.animate("height",70, 300, false);
    } else {
        parent.helpView.animate("height",0, 300, false);
    }
</method>

The parent keyword refers to the parent of the button, the view. The animate method checks the value of the height attribute of the helpView view and assigns 70 if it is 0, and 0 otherwise.

The if block can be replaced with a single line of code:

parent.helpView.animate("height",
        parent.helpView.height==0?70:0, 300, false);

You can use the following URL to compile and run the code in Listing 7.7.

http://localhost:8080/lps-4.0.x/app07/animationTest7.lzx

Figure 7.4 shows the result.

Using animatorgroup

You can use the animatorgroup tag to group multiple animator tags. Each individual animation can then be run simultaneously (by setting the process attribute to simultaneous) or sequentially (by assigning sequential to the process attribute). By default, the process attribute in the animatorgroup is sequential.

For instance, the code in Listing 7.8 shows the use of animatorGroup.

Listing 7.8. Using animatorGroup

<canvas height="400">
    <button width="70" text="Click here">
        <animatorgroup process="sequential">
            <animator attribute="x" from ="0" to="300"
                    duration="1000"/>
            <animator attribute="rotation" from ="0" to="90"
                    duration="1000"/>
        </animatorgroup>
    </button>
</canvas>

You can test the animation in Listing 7.8 by using this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest8.lzx

You can also nest an animatorgroup tag within another animatorgroup tag. Listing 7.9 shows an example.

Listing 7.9. Nesting animatorgroup

<canvas height="400">
    <button width="70" text="Click here">
        <animatorgroup >
            <animator attribute="x" to="300" duration="1000"/>
            <animator attribute="rotation" to="90" duration="1000"/>
            <animatorgroup process="simultaneous">
                <animator attribute="x" to="0" duration="1000"/>
                <animator attribute="rotation" to="0"
                        duration="1000"/>
            </animatorgroup>
        </animatorgroup>
    </button>
</canvas>

Note that the process attribute of the nested animatorgroup has the value of simultaneous. You can use this URL to test the code in Listing 7.9:

http://localhost:8080/lps-4.0.x/app07/animationTest9.lzx

Scrolling Text

As another example of animation, the LZX application in Listing 7.10 shows a piece of text that scrolls.

Listing 7.10. Scrolling text

<canvas height="90">
    <view width="400" bgcolor="white">
        <text id="t1" height="30" width="${parent.width}"
                fgcolor="red">
            <font face="Verdana" size="18">AJAX and Flash
       Development</font>
        </text>
    </view>
    <view width="400" bgcolor="white">
        <text id="t2" height="30" width="${parent.width}"
                fgcolor="green">
            <font face="Verdana" size="18">with OpenLaszlo</font>
        </text>
        <animatorgroup process="sequential" repeat="Infinity">
            <animator attribute="width" from ="0" to="400"
                    duration="2000"/>
            <animator attribute="width" from ="400" to="400"
                    duration="1000"/>
            <animator attribute="width" from ="400" to="0"
                    duration="2000"/>
            <animator attribute="width" from ="0" to="0"
                    duration="1000"/>
        </animatorgroup>

    </view>
</canvas>

To try the application, direct your browser to this URL:

http://localhost:8080/lps-4.0.x/app07/animationTest10.lzx

Figure 7.5 shows the result.