Animations & effects
Animations
Animation refers to the animated transition process of movement from one page to another when designing interactions. You can select the desired animation after setting the trigger and action for an interaction.
Animation types
As of now, Creatie supports the following types of animations:
- Instant
- Dissolve
- Slide in
- Slide out
- Move in
- Remove
- Push
- Smart animate
Use smart animate
Smart animate enables automatic tweening animations between two keyframes. When you apply smart animate, you can clearly see the gradient process between these two shapes.
When layer properties such as position, width & height, rotation, corner radius, fill, opacity, stroke, effects and layer order change, Creatie can recognize the change and apply transition automatically to animate between layers.
Note: For smart animate to take effect, the two layers involved in the animation must have identical names. Otherwise, fade-in and fade-out will take effect even if smart animate is set.
Example:
After designing three keyframe pages like the ones below and applying smart animate to them, you can achieve a natural and smooth effect of enabling low battery mode.
Effects
Effect refers to the change in speed set for an interaction animation.
Effect types
Creatie supports the following types of effects:
- Linear
- Ease in
- Ease out
- Ease in and out
- Ease in back
- Ease out back
- Easy in and out back
You can also customize the effect for more flexible visual changes.
Use custom easing
The custom easing function allows you to draw your own easing curves.
The easing curve, the X-axis represents the time the effect takes, and the Y-axis represents the value of the animation (such as the opacity change of dissolving). The steeper the slope, the faster the speed, and the gentler the slope, the slower the speed.
Select Custom in Effect menu, three modules will appear from top to bottom: Curve drawing, Preset curve, and Curve parameters.
Curve drawing
The two black dots diagonally are the two endpoints of the curve and cannot be moved. The other two black dots are two drawing handles. Holding down a handle turns it blue, and dragging this handle allows you to modify the shape of the curve.
Preset curve
Clicking on any preset curve will display that curve in the curve drawing area above, and the curve parameters below will also change accordingly.
Curve parameters
There are 4 values in total, corresponding to the position of the two drawing handles (x1, y1) and (x2, y2). You can modify these values to change the shape of the curve. You can input an x value ranging from 0 to 1 and a y value ranging from -10,000 to 10,000.
👍🏻 Helpful or 👎🏻 Not Helpful
👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful