React-native-viewanim

Animated view in React native without reanimated.

Animate the change of position, rotation, scale, opacity and background color of a view element with an easing feature.

Installation

npm install --save react-native-viewanim

Usage

First you have to import the ViewAnim component:

import ViewAnim from "react-native-viewanim";

Then place the ViewAnim component where you want and provide the property "from" and "to" of the animation:

  <ViewAnim from={x:0} to={x: 100} duration={1000}><Text>Just a text</Text></ViewAnim>

The full script of an exemple:

import React from 'react';
import { Text } from 'react-native';
import ViewAnim from 'react-native-viewanim';

const HelloWorldApp = () => {
  return (
    <ViewAnim
      from={x:0, rotate: 0}
      to={x: 100, rotate: 360}
      duration={2000}
      repeat={10}>
      <Text>This is animated</Text>
    </ViewAnim>
  )
}
export default HelloWorldApp;

Properties

| Property | Description | Default | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | | from | Object that contains the set of values at the start of the animation. Values can be x, y, rotate, scale, opacity, backgroundColor | Null | | to | Object that contains the set of values at the end of the animation. Values can be x, y, rotate, scale, opacity, backgroundColor | Null | | duration | For how long the animation will run (milliseconds). | 1000 | | delay | Optionally delay animation (milliseconds). | 0 | | repeat | The number of time the animation repeat, -1 is forever. | 1 | | easing | Timing function for the animation. Custom function or one of the Easing function provided in ViewAnim.Easing | ViewAnim.Easing.Linear.None | | style | Style added to the view | Null | | cycle | If true, animation loop from end values to start values | false | | trigger | Switch this boolean to true or false to trigger the naimation | false | | toggle | Set to trigger on start with start or on trigger with trigger | start | | resetOnStart | Reset values to start values when animation start | true | | resetOnStart | Reset values to start values when animation start | true | | frameDelay | Time between updates in ms | 16 |

Easing functions:

• ViewAnim.Easing.Linear.None
• ViewAnim.Easing.Quadratic.In, ViewAnim.Easing.Quadratic.Out, ViewAnim.Easing.Quadratic.InOut
• ViewAnim.Easing.Cubic.In, ViewAnim.Easing.Cubic.Out, ViewAnim.Easing.Cubic.InOut
• ViewAnim.Easing.Quadric.In, ViewAnim.Easing.Quadric.Out, ViewAnim.Easing.Quadric.InOut
• ViewAnim.Easing.Quintic.In, ViewAnim.Easing.Quintic.Out, ViewAnim.Easing.Quintic.InOut
• ViewAnim.Easing.Sinusoidal.In, ViewAnim.Easing.Sinusoidal.Out, ViewAnim.Easing.Sinusoidal.InOut
• ViewAnim.Easing.Exponential.In, ViewAnim.Easing.Exponential.Out, ViewAnim.Easing.Exponential.InOut
• ViewAnim.Easing.Circular.In, ViewAnim.Easing.Circular.Out, ViewAnim.Easing.Circular.InOut
• ViewAnim.Easing.Elastic.In, ViewAnim.Easing.Elastic.Out, ViewAnim.Easing.Elastic.InOut
• ViewAnim.Easing.Back.In, ViewAnim.Easing.Back.Out, ViewAnim.Easing.Back.InOut
• ViewAnim.Easing.Bounce.In, ViewAnim.Easing.Bounce.Out, ViewAnim.Easing.Bounce.InOut
• ViewAnim.Easing.Vibrate.Once, ViewAnim.Easing.Vibrate.Repeat2, ViewAnim.Easing.Vibrate.Repeat3, ViewAnim.Easing.Vibrate.Repeat4, ViewAnim.Easing.Vibrate.Repeat5, ViewAnim.Easing.Vibrate.Repeat10, ViewAnim.Easing.Vibrate.Repeat15, ViewAnim.Easing.Vibrate.Repeat20, ViewAnim.Easing.Vibrate.Repeat30

Changelog

Version 0.2.0

• Do not call stop when animation is not playing
• When toggle = true animate from start to end, toggle = false animate from end to start
• if initial property toggle = true, launch animation at start
• Update to simple tween 0.3.2

TODO

• Change property modification detection
• Add live modification of the viewanim properties
• Add preset animations
• make trigger an enum type "start" / "toggle"
• Add trigger type "none" to use only
• Chain animations
• Add examples with executables app files
• write tests
  • basic example trigger = start
  • basic example trigger = toggle
  • launch animation at start if toggle = true
  • pause / resume
  • cycle
  • change to property
• Add smooth property to soften animation