HTML5 Builder – HTML5 CSS3 Animations Tutorial
By Al Mannarino, Embarcadero Technologies, Inc.
Introduction
This tutorial shows you how to use the HTML5 Builder CSS3 Animation component to define a series of animation that you can later associate to your controls. HTML5 Builder provides a CSS3 Animations Property Editor where you can visualize your animations as you define them.
For additional details on the Animations, see the HTML5 Builder Help:
http://docwiki.embarcadero.com/HTML5_Builder/en/Animations
STEPS:
1. Create a new Client Web Application
Do: Home > NEW > HTML5 Builder Projects > Client Web Application
A Client Web Application is a web application based on client-side web technologies.
Unlike server web applications, client web application do not have to rely on a web server to work, and you can open them in a web browser anywhere, without the need of an Internet connection.
You can still deploy them to a web server, as any other web application, for distribution purposes.
2. Place a Button onto the form
3. Drop the Animation component onto your form.
Hide image
Hide image
Hide image
4. On the Object Inspector, for the animation component, click on Items – Array
This opens the CSS3 Animations Editor.
5. Define some animations and name them so it’s easy to identify them later, i.e. if you stick with the defaults, just name your animation rotate, or Rotate360 to easily identify it later on.
Click New Item. You should get a 360 degree Rotation animation.
Set Caption = Rotation360
Set StartColor = BLUE (#0000CC)
Set EndColor = YELLOW (#FFFF00)
Click OK, to close the editor.
NOTES: Controls, like the Button we are using in this example, can be animated as a response to client-side events.
We have defined our animation, Rotate360, using an Animation component, and we used it's Items property to define one or a series of animation that we can later associate to our controls, Button.
Next we'll associate the animation to our Button.
The association between an animation and a control is performed in the Animations property of the control that triggers the animation when it is interacted with, as opposed to the control that is actually animated. For example, to animate a Label when a Button is clicked, you would associate the Label with the target animation using the Button’s Animations property. This way, you can get the same event to animate several controls.
6. Select the triggering control, the Button, on the Designer, and from the Object Inspector, double-click the value of the Animations property to open the Animations Editor.
Notes: It is important to understand that animations are not something that you just trigger on a control. You add an animation to a control, and as a result the animation is triggered on the control. To trigger the animation again, first you need to remove the animation from the control, and then add it back.
Also, you cannot use the same event to add and remove the same animation. If the control had the animation before the event, and it has the animation after the event, it does not matter whether you removed or not the animation during the event. For example, if in the OnClick event of a button you remove an animation and add it back, clicking on the button the first time (when the animation has not yet been added to the button), the animation will work; the following times, since the button has the animation both when the event starts and when the event ends, the animation won’t be triggered. Instead, you must use different events to add and remove the same animation. To get the button to trigger an animation upon click, add the animation during the OnMouseDown event, and remove it during the OnMouseDown event.
Once you understand what it means to add and remove an animation, using the editor is simple.
7. On the Animations Editor, add a JavaScript Event for MouseOver (do this by clicking the + sign on the bottom of the Animations Editor under JavaScript Event Hide image
8. Then click Actions > add > this > Animation 1 – and select the name of your animation (Rotate360) and check it.
Click Preview. Click OK.
Notes: You can repeat the steps above as many times as you see fits, the limit is defined by the available events.
To associate the animations to the controls, we followed these steps on the Animations Editor:
- Add events to the list of JavaScript Events.
- For each event:
- Select the event.
- Add actions to the list of Actions.
- For each action:
- Select the type of action: add, remove or toggle (adds the animations if the control does not have it, removes it otherwise).
- Select the name of the control the animation will be added or removed from. You can use this to select the same control that triggers the action, that whose Animations property you are editing.
- Select the Animation component that contains the animations that will be added or removed.
- In the right-side column, under Animations, mark the checkboxes of the target animations (those to be added or removed).
9. Let’s run the web app, and see how the CSS3 styled button looks like.
Do: Run (F9) Hide image
You will be asked to SAVE the files and project. Create a new folder, such as "CSS3AnimationEditor":
Assuming your browser supports CSS3 Animation you will see the Button rotate 360 degrees and change color as you MouseOver the button. Very cool!
Close the browser. CLOSE ALL in HTML5 Builder.
Note: For an additional Animation example, look at the HTML5 Builder demo located here: C:\Users\Public\Documents\HTML5 Builder\5.0\Demos\Components\Animation. It showcases several controls with all the available types of animations associated.
This ends this tutorial. We saw how to use the HTML5 Builder CSS3 Animation component to define one or a series of animation that you can later associate to your controls. HTML5 Builder provides a CSS3 Animations Property Editor where you can visualize your animations as you define them.
Concluding RemarksEmbarcadero’s HTML5 Builder is the definitive software for Rapid Application Development with Web Technologies. HTML5 Builder and its library, the RAD PHP Component Library (RPCL), includes a lot of new features and improvements to make your life easier, and take the RAD methodology even further into the web development. HTML5 Builder features a brand-new interface that adapts itself to your workflow as you take care of the different aspects of your application: writing the logic, designing the Interface, managing databases, and so much more. For HTML5, the RPCL now supports HTML5, the new version of the web standard that is revolutionizing the way you write webpages! To learn more about HTML5 Builder, or to download a trial, visit http://www.embarcadero.com/products/HTML5-Builder |
Tags: HTML5 Builder HTML5 Builder CSS3 Animations Property Editor
