[Mugeda HTML5 technical tutorial 7] add an animation

The previous section describes how to add elements to a new file. After the elements are added, we want them to be moved to achieve a dazzling effect. This section describes how to add an animation to an element. Mugeda animation is implemented through the timeline and frame. By creating layers and units on the timeline, you can create professional animations within minutes.

 

The timeline interface is shown in. For a work to be delivered on a mobile device, the frame speed should not exceed 12, because the frame speed is too fast and some mobile devices will be difficult to set the frame speed in the attribute area.

An animation layer is used to organize and add objects.

Each layer can contain one or more units (units will be explained later)

Click a layer to set this layer to the current layer.

The element added to the stage is added to the current layer.

An object must belong to a layer. Objects in different layers have different vertical positions. objects close to the viewer are upper layers. Objects in the lower layers may be hidden by upper layers.

You can edit layers, move layers up and down, edit layer names, switch visibility, and Switch Lock status. When many elements are added to the stage and many layers are added, if you do not know which layer an element is on, you can switch the visibility mode, to determine the layer where the element is located. When you want to modify an element and are afraid of moving to a nearby element, you can switch the lock state to lock all layers except the one on which you want to modify the element.

Each layer can contain one or more units. A unit is the basis for defining an animation. A layer contains empty units, objects, and animation units. An empty unit has a hollow dot. A unit with a component has a solid dot. The background color of an animated unit is green.

Each Unit includes the following attributes:

1. Start frame: unit start frame

2. End frame: unit end frame

3. Key Frame: indicates a hollow circle or unit.

Each element must belong to a unit. Only objects in a visible unit can be seen on the stage.

An empty unit is a newly created unit. It only contains an empty Key Frame (represented by a hollow circle) without any elements ).

To increase the number of frames for a unit, right-click the blank area on the required layer, select "insert frame" from the pop-up menu, or press F5. Similarly, to reduce the frame field of a unit, right-click the unit and select "delete frame (S)" from the pop-up menu, or press Ctrl + F5.

Object-specific unit: once an object is added to a unit, the key frame is injected with a black solid dot.

Animation units: to add an animation to a unit, right-click any frame within the Unit range and Choose Insert key frame animation from the pop-up menu ". An animated unit turns green and more than one key frame is displayed as a red solid point.

Similarly, to eliminate the animation of a unit, right-click the unit and select "delete key frame animation" from the pop-up menu ".

After moving the current frame to a key frame, you can edit the attributes (size, position, rotation, transparency, etc.) of the object on the key frame ).

Use the following rules to render elements with animation units:

1. Use the parameter set (size, position, rotation, α, etc.) on a key frame to render a component.

2. Use two adjacent key frame parameter set rendering elements in a conventional frame (with no solid point output.

If you edit an object on a conventional frame (not a key frame), the frame is automatically converted to a key frame.

By selecting the specified frame, select "Insert key frame" from the pop-up menu, or press F6, the additional key frame can also be inserted into a unit.

Similarly, you can delete a key frame from a unit by selecting the specified key frame, selecting "delete key frame" in the pop-up menu, or pressing Ctrl + F6.

You can use a glass plate to display the animation transition state. After the glass plate function is enabled, you can see the position of the object changes in different frames to facilitate animation adjustment. The position of the object in the current frame is highlighted. The glass switch button is marked under the timeline.

You can adjust the animation type in the animation attribute bar. Different types have different animation modes, such as acceleration and deceleration. The default Animation Mode is linear.

To add a new unit to a layer of a timeline, right-click the blank area of the timeline, select "Insert key frame" from the pop-up menu, or press F6. After a new unit is added, the blank frames between the two units are automatically filled by the frames of the previous unit.

In addition to key frames, the timeline pop-up menu provides many operations to manage layers, elements, and animations.

You can use the following tips to select a frame:

Click a frame to set it to the current frame and set its corresponding layer to the current layer.

Drag within the range of a unit to select frames within a certain range.

Double-click a unit to select all frames in the unit.

To sum up, this section describes how to add an animation to a file with an element already added. The next section describes how to add an action to an element to achieve animation interaction, such as more advanced actions such as links, forms, and callbacks. Stay tuned.