UX Design for Mobile

Animations

You can create a new animation object to change the properties of a layer, such as the position or the color. The final state of the layer can be defined by setting the properties, or creating states for that layer, which will be another way of defining the value of the properties that will change their values during the animation. Additionally, we can define the time it will take to perform the animation and curve that will be applied to calculate the evolution of the values that change during the animation. In the next example, we will create an animation using the animate function to move our layer from its position to a new position, applying a Bezier easeOut curve:

myFirstLayer.animate    x: 200    options: curve: Bezier.easeOut ...