Easing
Enhance your animations with realistic movements using the easing features in ProtoPie.
In real life, objects don't abruptly start or stop moving. That's why it's crucial to include easing in your prototypes to achieve natural animations.
By incorporating easing functions, you can create visually captivating and engaging transitions that add a sense of realism and natural movement to your designs like in the following example.
Learn how easing was used in this example in our newest Mobile Game prototyping masterclass.
Standard Easing Options
Linear
With Linear easing, there are no accelerations or decelerations during the animation. The object moves in a smooth and uniform manner, maintaining a steady pace throughout the transition.
Ease
Ease easing is used to control the acceleration and deceleration of transitions. It adds a sense of smoothness and natural movement to objects or elements that are animated or transitioning between states.
Ease In
Ease In easing is used to control the initial acceleration of transitions. It focuses on creating a gradual and gentle start to the animation, where the object or element starts moving slowly and then gains speed as the animation progresses.
Ease Out
Ease Out easing is used to control the deceleration of transitions. It focuses on creating a gradual and smooth slowing down of movement as the animation comes to an end.
Ease In Out
Ease In Out easing is used to create smooth and balanced transitions. It combines the characteristics of both Ease In and Ease Out easing to provide a gradual acceleration at the beginning, a consistent speed in the middle, and a gradual deceleration towards the end of the animation.
Cubic Bezier
Cubic Bezier easing is used to provide precise control over the acceleration and deceleration of transitions. It allows you to define custom curves by adjusting its four points (two anchor points and two control points), offering flexibility and the ability to create unique and complex motion effects.
Spring
Spring easing is used to simulate the motion of a spring. It adds a dynamic and bouncy effect to transitions, mimicking the behavior of a physical spring being stretched and released.
Custom Easing Options
Creating Custom Easing Presets
In ProtoPie, you have the ability to create custom easing presets. Follow these steps to create your own custom easing:
Choose a standard easing option from the Standard easing list.
Click the "+" button to add a new easing preset.
Modify the duration and predefined values by either entering new values or dragging the control points to your desired position.
Double-click above the input area to rename the easing preset.
The newly created easing preset will be saved in the Custom easing list, making it readily available for future use.
Exporting & Importing Custom Easing Presets
After creating a new custom easing preset, you can choose to export it as a .json file to your local computer. This file will include all the presets currently in the Custom list. This feature enables you to effortlessly share the easing presets with your team members or keep them for future use, especially if you switch to a different device.
