General animation logic
Animation — is a visual representation of changes in an object's properties.
Some object properties can be animated. Available animations vary and depend on object types.
There is a running-person icon to the left of such fields. Blue indicates the animation is enabled, black means it's disabled. Clicking it opens the animation panel for that specific field. Clicking again collapses the animation. The "X" removes the animation. The play icon will start playing the animation (you can stop it by clicking the square that appears). The "Add animation" button will add an animation. After configuring an animation you can set the values for the next animation by clicking "Add animation" again. Simultaneous preview of all animations in the editor's visual window is not available. Save the project and click preview to view the whole scene.
Let's review which animations are available for different object types.
Position, rotation and scale properties can be animated for a scene, group, button, or wall.
For a primitive, photo, video, background and text, color and opacity animations are additionally available. Video has an additional playback setting implemented as an animation.
A model has an internal animation.
Animation sections for different properties.
Position. This section sets the animation for moving an object in space. You can set an "entry" (appearance) of the object along one, two or three planes. Values can be negative or positive. Accordingly, the side of the entry changes.
Rotation. Animation of circular rotation of the object in three planes. For correct operation we recommend setting parameter values as multiples of 360. If you need more flexible rotation animation settings, nest the object in a group and animate the group.
Scale. Animation of the object's size.
Color. Color animation allows changing one color of an object to another.
Opacity. Allows animating opacity from 0 to 1.
Model internal animation. Allows changing the value of model properties set in Blender (the program for creating 3D models).
Let's review animation settings.
Value. Configures the object's position from which the animation starts or at which it ends. That is, the animation occurs within the range specified in the object's property and the value.
Reverse. Changes the animation order. The checkbox next to "Reverse" configures the animation to start from the specified values. For correct operation we recommend always checking "Reverse" on the first animation.
Relative. A setting that allows you to set the "Value" relative to the object's properties. Needed for convenience.
Duration. The playback time of the animation in milliseconds.
Delay. The time (in milliseconds) after which the animation will start following the "Start event".
Easing. A setting for the visual representation of property changes (transition curve). In other words, the actual animation tuning.
Start event. The event that triggers the start of the animation, i.e., what triggers the animation. There are the following start events: - first-appear – starts the animation on first scan (project opening); - appear – starts the animation every time the label is hovered over; - menu – starts the object's animation when clicking a button with the specified "Menu item" field value; - mousedown – starts on press (touch); - mouseup – starts on release (click); - mouseenter – starts when the mouse cursor is over or when a finger is held over the object; - mouseleave – starts when the cursor or finger is moved away (swipe gesture).
Tocomment. first-appear – the most commonly used animation trigger. appear – use if you are sure a repeatedly triggered animation is necessary. menu – animation for complex projects where more content needs to be shown and the user more strongly engaged. mousedown/mouseup - set by default in button properties. mouseenter, mouseleave - rarely used.