Smooth and meaningful animation is very effective for enhancing the user experience of mobile application, you can use the
animation module to perform animation on components. A animation can perform a series of simple transformations (position, size, rotation, background color, and opacity) on the component. So, if you have a
image component, you can move, rotate, grow, or shrink it.
position: An element that will be animated, for example , specify the
ref attribute for the element you want to animated as
element, so you can get this element by calling
position: Transition options.
duration(number): Specifies the number of milliseconds of animation execution, the default value is
0, means that no animation will occur.
delay(number): Specifies the amount of milliseconds to wait between a change being requested to a property that is to be transitioned and the start of the transition effect. The default value is
timingFunction(string): Used to describe how the intermediate values of the styles being affected by a transition effect are calculated, default value is
linear, the allowed attributes are listed in the following table:
||Specifies a transition effect with the same speed from start to end|
||Specifies a transition effect with a slow start|
||Specifies a transition effect with a slow end|
||Specifies a transition effect with a slow start and end|
||Define your own values in the cubic-bezier function. Possible values are parameter values from 0 to 1. More information about cubic-bezier please visit cubic-bezier and Bézier curve.|
styles(object): Specify the names and values of styles to which a transition effect should be applied. The allowed attributes are listed in the following table:
|name||description||value type||default value||example|
|width||The width applied to the component after the animation finished.||length||none|
|height||The height applied to the component after the animation finished.||length||none|
|backgroundColor||The background color applied to the component after the animation finished.||string||none|
|opacity||The opacity applied to the component after the animation finished.||number between 0 to 1||
|transformOrigin||The povit of transition. The possible values for
|transform||Transform function to be applied to the element. The properties in the following table are supported||object||none|
|name||description||value type||default value|
|translate/translateX/translateY||Specifies the location of which the element will be translated to.||pixel or percent||none|
|rotate||Specifies the angle of which the element will be rotated, the unit is degree.||number||none|
|scale/scaleX/scaleY||Stretch or shrink the element.||number||none|
position: Callback which is called after the completion of transition.