https://github.com/kirkness/react-native-tween-animation

Simple react native state tween animation module.
https://github.com/kirkness/react-native-tween-animation

Last synced: 4 months ago
JSON representation

Simple react native state tween animation module.

• Host: GitHub
• URL: https://github.com/kirkness/react-native-tween-animation
• Owner: kirkness
• Created: 2015-05-05T16:13:35.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2015-05-05T16:36:26.000Z (almost 10 years ago)
• Last Synced: 2024-12-06T22:34:43.188Z (4 months ago)
• Language: JavaScript
• Size: 133 KB
• Stars: 48
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-tween-animation ★43 - A simple react native state tween animation module. (Components / UI)
• awesome-reactnative-ui - react-native-tween-animation
• awesome-react-native - react-native-tween-animation ★43 - A simple react native state tween animation module. (Components / UI)
• awesome-reactnative-ui - react-native-tween-animation
• awesome-react-native - react-native-tween-animation ★43 - A simple react native state tween animation module. (Components / UI)
• awesome-react-native-ui - react-native-tween-animation ★35 - A simple react native state tween animation module. (Components / UI)
• awesome-react-native - react-native-tween-animation ★43 - A simple react native state tween animation module. (Components / UI)

README

        
# react-native-tween-animation

A simple react native state tween animation module.

### Usage

```javascript

var animation = new RNTAnimation({

  // Start state

  start: {

    top: this.state.position.top,

    left: this.state.position.left

  },

  // End state

  end: {

    top: 0,

    left: 0

  },

  // Animation duration

  duration: 500,

  // Tween function

  tween: 'easeOutBack',

  // Update the component's state each frame

  frame: (tweenFrame) => {

    this.setState({

      position: tweenFrame

    });

  },

  // Optional callback

  done: () => {

    console.log('All done!');

    // Optionally reverse the animation

    animation.reverse(() => {});

  }

});

```