Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/portons/react-native-anime
React Native animation utility
https://github.com/portons/react-native-anime
animation native react react-native reactjs
Last synced: about 2 months ago
JSON representation
React Native animation utility
- Host: GitHub
- URL: https://github.com/portons/react-native-anime
- Owner: portons
- License: mit
- Archived: true
- Created: 2017-05-02T06:54:28.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-17T08:19:31.000Z (about 7 years ago)
- Last Synced: 2024-09-19T05:19:48.801Z (about 2 months ago)
- Topics: animation, native, react, react-native, reactjs
- Language: JavaScript
- Size: 158 KB
- Stars: 73
- Watchers: 3
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Anime
(Inspired by Cheetah for Swift: https://github.com/suguru/Cheetah)
Anime is an animation utility for React Native. It's built on top of the [Animated module](https://facebook.github.io/react-native/docs/animated.html), and provides a much simpler API for handling animations.
The library is still in early development. I also need to add a proper API documentation. Open issues if you find any bugs, and contributions are also welcomed!
# Features
* Animations with durations and delays
* Parallel/Serial executions
* Easings
* Springs
# Installation
```javascript
$ yarn add react-native-anime
```
# Local Development
> Taken from [`victory-native`](https://github.com/FormidableLabs/victory-native#local-development), you should check this project, it's awesome.
If you'd like to contribute to victory-native, you can use the local demo app to test your changes on the iOS simulator. (But if you're just getting started with victory-native and want to see a demo, we recommend using victory-native-demo, as it supports Android and is simpler to set up.)
```sh
# Install
$ yarn global add react-native-cli # if you haven't already
$ git clone https://github.com/FormidableLabs/victory-native
$ cd victory-native
$ yarn
# Start the react-native packager in a terminal that will remain running
$ yarn start
# Run the demo from a new terminal window
$ yarn demo:ios
```
Changes to ``src` will be reflected in the demo app.
Do not run `yarn` in the demo/ directory, or the packager packager will crash due to "duplicate @providesModule declarations" found in node_modules/ and demo/node_modules.
# Code Example
1. Import Anime
```javascript
import Anime from 'react-native-anime';
```
2. Wrap your view with Anime component and save its reference
```javascript
render () {
return (
this.box = ref }>
)
}
```
3. Use the reference to animate your component
```javascript
onClick() {
this.box.moveX(100, { duration: 1500 }).start();
}
// You can also stop an animation with a .stop() method, and reset the component's styling with .reset()
stopAndReset() {
this.box.stop();
this.box.reset();
}
```
# Available methods
Translate:
```
translateX
translateY
moveX // Relative to last X translation
moveY // Relative to last Y translation
```
Skew:
```
skewX
skewY
```
Prespective:
```
perspective
```
Scale:
```
scale
```
Rotate:
```
rotateZ OR rotate
rotateX
rotateY
```
Borders:
```
borderRadius
borderWidth
borderColor
```
Text:
```
fontSize
color
```
Layout:
```
height
width
opacity
backgroundColor
zIndex
```
# Parallel execution
Anime groups animation properties and executes them at once.
```javascript
this.box
.moveX(50)
.moveY(50)
.rotate(180)
.start()
```
# Sequence execution
`wait` will wait until all animations placed before it completed. It can also receive milliseconds to wait to start next animation
```javascript
this.box
// first animation
.moveX(50)
.scale(1.5)
// wait 1s before starting second animation
.wait(1000)
// second animation
.moveX(-50)
.scale(0.5)
.start()
```
# Duration, delay, [easing](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js)
Just like with Animated, you can specify durations, delays and easings for your animations
```javascript
import { Easing } from 'react-native';
animate() {
this.box
.skewX(50, { duration: 2000, easing: Easing.bounce })
.rotateY(-100, { delay: 2000 })
.start();
}
```
# Spring
You can also use Animated's spring animations, together with all its options (http://browniefed.com/react-native-animation-book/api/SPRING.html)
```javascript
this.box
.height(100, { spring: { friction: 1, velocity: 100 } })
.borderRadius(100)
.start()
// or simply use `spring: true` for default spring behaviour
this.box
.moveX(50, { spring: true })
.start()
```
# Also supports Image, Text and ScrollView
Like with Animated module, you can also animate Text, Image and ScrollView components
```javascript
render() {
return (
this.image = ref }
source={{ require('pikachu.gif') }} />
)
}
animate() {
this.image
.skewX(5, { spring: true })
.skewY(5, { spring: true })
.wait()
.rotate(360*20, { duration: 2000 })
.start()
}
```
# Parallel animation of numerous components
```javascript
render() {
return (
this.box = ref }
style={{ width: 50, height: 50, backgroundColor: 'blue' }}/>
this.text = ref }
style={{ color: 'blue', fontSize: 12 }}>
Very easy
)
}
animateComponents() {
const box = this.box.rotate(90);
const text = this.text.color('red');
const parallel = new Anime.Parallel([box, text]);
// Start parallel animation for both components, and reset them both when it ends
parallel.start(() => parallel.reset())
}
```
