rn-tween
It can help animating components by timing.
Installation
npm install rn-tween --save
yarn add rn-tween --dev
Tween components
- RNTween
- RNTweenView
- RNTweenImage
- RNTweenText
Example
Auto start
import {RNTweenView} from 'rn-tween';
<RNTweenView
autoStartName="transit"
initialConfig={{
transit: {
mode: 'parallel',
configs: [
{
from: 0,
to: 1,
duration: 1000,
styleProperty: 'opacity',
loop: true,
},
{
from: 0.2,
to: 1,
duration: 1000,
styleProperty: 'scale',
loop: true,
},
],
},
}}
style={{
width: 100,
height: 100,
backgroundColor: 'red',
}}
/>;
Call functions
import {RNTweenView} from 'rn-tween';
<RNTweenView
ref={ref => (_tween = ref)}
firstUsedConfigName="transit"
initialConfig={{
transit: {
mode: 'parallel',
configs: [
{
from: 0,
to: 1,
duration: 500,
styleProperty: 'opacity',
},
{
from: 0.2,
to: 1,
duration: 500,
styleProperty: 'scale',
},
],
},
}}
style={{
width: 100,
height: 100,
backgroundColor: 'orange',
}}
/>;
// Stop animating the tweeen with a specific configuration name
_tween.start({name: 'transit'});
_tween.start({name: 'transit', reversed: true});
_tween.start({name: 'transit', reversed: true, onComplete: () => alert('Finished')});
// Stop animating the tween
_tween.stop();
// Reprepare tween animation configurations
_tween.prepare({
transit: {
mode: 'sequence',
configs: [
{
from: 0,
to: 1,
duration: 500,
styleProperty: 'opacity',
},
{
from: 0.2,
to: 1,
duration: 500,
styleProperty: 'scale',
},
],
},
});
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 |
initialConfigname.configsindex
| 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 |
License