rn-tween
It can help animating components by timing.
Installation
- Using Npm
npm install rn-tween --save
- Using Yarn
yarn add rn-tween --dev
Tween components
- RNTween
- RNTweenView
- RNTweenImage
- RNTweenText
Example
Auto start
import RNTweenView from 'rn-tween'; <RNTweenView ="transit" = =/>;
Call functions
import RNTweenView from 'rn-tween'; <RNTweenView = ="transit" = =/>; // Stop animating the tweeen with a specific configuration name_tween;_tween;_tween; // Stop animating the tween_tween; // Reprepare tween animation configurations_tween;
Available component props
RNTween
Name | Type | Default | Description |
---|---|---|---|
autoStartName | string | null | Tell which animation tween should automatically start at the first time |
firstUsedConfigName | string | null | Tell which animation tween configuration should be applied at the first time |
initialConfig | object | null | The initial tween configurations to be used |
AnimatedComponent | Component | null | The animated component to be animated |
onComplete | function | null | The callback invoked after the tween animation completed |
RNTweenView
Also inherits ViewProps
Name | Type | Default | Description |
---|---|---|---|
autoStartName | string | null | Tell which animation tween should automatically start at the first time |
firstUsedConfigName | string | null | Tell which animation tween configuration should be applied at the first time |
initialConfig | object | null | The initial tween configurations to be used |
onComplete | function | null | The callback invoked after the tween animation completed |
RNTweenText
Also inherits TextProps
Name | Type | Default | Description |
---|---|---|---|
autoStartName | string | null | Tell which animation tween should automatically start at the first time |
firstUsedConfigName | string | null | Tell which animation tween configuration should be applied at the first time |
initialConfig | object | null | The initial tween configurations to be used |
onComplete | function | null | The callback invoked after the tween animation completed |
RNTweenImage
Also inherits ImageProps
Name | Type | Default | Description |
---|---|---|---|
autoStartName | string | null | Tell which animation tween should automatically start at the first time |
firstUsedConfigName | string | null | Tell which animation tween configuration should be applied at the first time |
initialConfig | object | null | The initial tween configurations to be used |
onComplete | function | null | The callback invoked after the tween animation completed |
initialConfig
initialConfig: name: string: mode configs
Name | Type | Description |
---|---|---|
mode | string | Specify tween animation mode like parallel or sequence |
configs | array | Array of tween animation configuration |
initialConfig[name].configs[index]
Name | Type | Description |
---|---|---|
styleProperty | string | Specify any style property to be animated like opacity, scale, etc |
from | number | Value from where the animation starts |
to | number | Value to where the animation must reach |
duration | number | Duration of animation |
delay | number | Delay before the animation starts |
loop | bool | Tell if the animation should play as loop |
easing | function | Easing function to define curve. Default is TweenEasing.linear |
useNative | bool | Uses the native driver when true. Default is true |
Available instance functions
start({ name, reversed, onComplete })
Name | Type | Description |
---|---|---|
name | string | Name of tween animation configuration |
reversed | bool | Tell if the animation should play in reverse |
onComplete | function | Callback invoked after the animation complete |
stop()
Stop a running animation
prepare({ mode, configs })
Name | Type | Description |
---|---|---|
mode | string | Specify tween animation mode like parallel or sequence |
configs | array | Array of tween animation configuration |