diff --git a/Examples/MakeItRain/yarn.lock b/Examples/MakeItRain/yarn.lock index 1ede02b..6467eb8 100644 --- a/Examples/MakeItRain/yarn.lock +++ b/Examples/MakeItRain/yarn.lock @@ -2614,6 +2614,10 @@ js-tokens@^3.0.0, js-tokens@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b" +"js-tokens@^3.0.0 || ^4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" + js-yaml@^3.7.0: version "3.10.0" resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc" @@ -2899,6 +2903,12 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: dependencies: js-tokens "^3.0.0" +loose-envify@^1.4.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" + dependencies: + js-tokens "^3.0.0 || ^4.0.0" + lru-cache@^4.0.1: version "4.1.1" resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" @@ -3518,7 +3528,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: +prop-types@^15.5.8, prop-types@^15.6.0: version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -3526,6 +3536,14 @@ prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" +prop-types@^15.7.2: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + pseudomap@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3" @@ -3597,11 +3615,15 @@ react-devtools-core@3.0.0: shell-quote "^1.6.1" ws "^2.0.3" -react-native-animatable@^1.2.4: - version "1.2.4" - resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.2.4.tgz#b5fb7657e8f6edadbc26697057a327fb920b3039" +react-is@^16.13.1: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + +react-native-animatable@*: + version "1.3.3" + resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a" dependencies: - prop-types "^15.5.10" + prop-types "^15.7.2" react-native@0.53.0: version "0.53.0" @@ -4404,8 +4426,8 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" ua-parser-js@^0.7.9: - version "0.7.17" - resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" + version "0.7.33" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532" uglify-es@^3.1.9: version "3.3.9" diff --git a/README.md b/README.md index a4da901..7f36205 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # react-native-animatable + Declarative transitions and animations for React Native ## Installation @@ -10,7 +11,7 @@ Declarative transitions and animations for React Native To animate things you must use the `createAnimatableComponent` composer similar to the `Animated.createAnimatedComponent`. The common components `View`, `Text` and `Image` are precomposed and exposed under the `Animatable` namespace. If you have your own component that you wish to animate, simply wrap it with a `Animatable.View` or compose it with: ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); ``` @@ -24,7 +25,7 @@ MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent); #### Looping -To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. +To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`. ```html Up and down you go @@ -35,12 +36,11 @@ To make looping animations simply set the `iterationCount` to `infinite`. Most a #### Generic transitions -You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. - -*Note: If you are using colors, please use `rgba()` syntax.* +You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used. -*Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.* +_Note: If you are using colors, please use `rgba()` syntax._ +_Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage._ ```html this.setState({fontSize: (this.state.fontSize || 10) + 5 })}> @@ -49,36 +49,41 @@ You can create your own simple transitions of a style property of your own choos ``` #### Properties -*Note: Other properties will be passed down to underlying component.* - -| Prop | Description | Default | -|---|---|---| -|**`animation`**|Name of the animation, see below for available animations. |*None*| -|**`duration`**|For how long the animation will run (milliseconds). |`1000`| -|**`delay`**|Optionally delay animation (milliseconds). |`0`| -|**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`| -|**`easing`**|Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. |`ease`| -|**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`| -|**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. |*None*| -|**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*| -|**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*| -|**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling and requires you to integrate that module on iOS. |`false`| -### Imperative Usage +_Note: Other properties will be passed down to underlying component._ + +| Prop | Description | Default | +| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | +| **`animation`** | Name of the animation, see below for available animations. | _None_ | +| **`duration`** | For how long the animation will run (milliseconds). | `1000` | +| **`delay`** | Optionally delay animation (milliseconds). | `0` | +| **`direction`** | Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. | `normal` | +| **`easing`** | Timing function for the animation. Valid values: custom function or `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `ease-in-cubic`, `ease-out-cubic`, `ease-in-out-cubic`, `ease-in-circ`, `ease-out-circ`, `ease-in-out-circ`, `ease-in-expo`, `ease-out-expo`, `ease-in-out-expo`, `ease-in-quad`, `ease-out-quad`, `ease-in-out-quad`, `ease-in-quart`, `ease-out-quart`, `ease-in-out-quart`, `ease-in-quint`, `ease-out-quint`, `ease-in-out-quint`, `ease-in-sine`, `ease-out-sine`, `ease-in-out-sine`, `ease-in-back`, `ease-out-back`, `ease-in-out-back`. | `ease` | +| **`iterationCount`** | How many times to run the animation, use `infinite` for looped animations. | `1` | +| **`transition`** | What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. | _None_ | +| **`onAnimationBegin`** | A function that is called when the animation has been started. | _None_ | +| **`onAnimationEnd`** | A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. | _None_ | +| **`useNativeDriver`** | Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling and requires you to integrate that module on iOS. | `false` | +### Imperative Usage #### Animations -All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. +All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled. ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; class ExampleView extends Component { - handleViewRef = ref => this.view = ref; - - bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')); - + handleViewRef = (ref) => (this.view = ref); + + bounce = () => + this.view + .bounce(800) + .then((endState) => + console.log(endState.finished ? "bounce finished" : "bounce cancelled") + ); + render() { return ( @@ -91,27 +96,29 @@ class ExampleView extends Component { } ``` -To stop any ongoing animations, just invoke `stopAnimation()` on that element. +To stop any ongoing animations, just invoke `stopAnimation()` on that element. #### Generic transitions ##### `transition(fromValues, toValues[[, duration], easing])` -Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. +Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used. ##### `transitionTo(toValues[[, duration], easing])` -This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. +This function will try to determine the current styles and pass it along to `transition()` as `fromValues`. ```js -import * as Animatable from 'react-native-animatable'; +import * as Animatable from "react-native-animatable"; class ExampleView extends Component { - handleTextRef = ref => this.text = ref; - + handleTextRef = (ref) => (this.text = ref); + render() { return ( - this.text.transitionTo({ opacity: 0.2 })}> + this.text.transitionTo({ opacity: 0.2 })} + > Fade me! ); @@ -121,13 +128,13 @@ class ExampleView extends Component { ## Custom Animations -Animations can be referred to by a global name or a definition object. +Animations can be referred to by a global name or a definition object. ### Animation Definition Schema -An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. +An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples. -A simple fade in animation: +A simple fade in animation: ```js const fadeIn = { @@ -140,7 +147,7 @@ const fadeIn = { }; ``` -Combining multiple styles to create a zoom out animation: +Combining multiple styles to create a zoom out animation: ```js const zoomOut = { @@ -159,7 +166,7 @@ const zoomOut = { }; ``` -To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. +To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value. ```js Animatable.initializeRegistryWithDefinitions({ @@ -174,18 +181,17 @@ Animatable.initializeRegistryWithDefinitions({ [![18922912_1935104760082516_4717918248927023870_o](https://user-images.githubusercontent.com/378279/36341201-fd11e80c-13ea-11e8-8585-ab1d0c5ae27d.jpg)](https://www.youtube.com/watch?v=3SITFIGz4xo) -The talk __*A Novel Approach to Declarative Animations in React Native*__ from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). +The talk **_A Novel Approach to Declarative Animations in React Native_** from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo). ## `MakeItRain` example -See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. +See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk. [![MakeItRain Example](https://user-images.githubusercontent.com/378279/36341976-06326ad6-13f7-11e8-8fe1-ab947bbea5c8.gif)](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) - ## `AnimatableExplorer` example -See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more. +See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more. ![Animatable Explorer](https://user-images.githubusercontent.com/378279/36341974-f697e5d8-13f6-11e8-8e2a-21d8c2a4b340.gif) @@ -197,121 +203,115 @@ Animations are heavily inspired by [Animated.css](https://daneden.github.io/anim ![animatable-attention](https://cloud.githubusercontent.com/assets/378279/10590307/ef73b1ba-767d-11e5-8fb9-9779d3a53a50.gif) -* `bounce` -* `flash` -* `jello` -* `pulse` -* `rotate` -* `rubberBand` -* `shake` -* `swing` -* `tada` -* `wobble` +- `bounce` +- `flash` +- `jello` +- `pulse` +- `rotate` +- `rubberBand` +- `shake` +- `swing` +- `tada` +- `wobble` ### Bouncing Entrances ![animatable-bouncein](https://cloud.githubusercontent.com/assets/378279/10590306/ef572bbc-767d-11e5-8440-8e61d401537a.gif) -* `bounceIn` -* `bounceInDown` -* `bounceInUp` -* `bounceInLeft` -* `bounceInRight` +- `bounceIn` +- `bounceInDown` +- `bounceInUp` +- `bounceInLeft` +- `bounceInRight` ### Bouncing Exits ![animatable-bounceout](https://cloud.githubusercontent.com/assets/378279/10590305/ef56e4cc-767d-11e5-9562-6cd3210faf34.gif) -* `bounceOut` -* `bounceOutDown` -* `bounceOutUp` -* `bounceOutLeft` -* `bounceOutRight` +- `bounceOut` +- `bounceOutDown` +- `bounceOutUp` +- `bounceOutLeft` +- `bounceOutRight` ### Fading Entrances ![animatable-fadein](https://cloud.githubusercontent.com/assets/378279/10590304/ef4f09b4-767d-11e5-9a43-06e97e8ee2c1.gif) -* `fadeIn` -* `fadeInDown` -* `fadeInDownBig` -* `fadeInUp` -* `fadeInUpBig` -* `fadeInLeft` -* `fadeInLeftBig` -* `fadeInRight` -* `fadeInRightBig` +- `fadeIn` +- `fadeInDown` +- `fadeInDownBig` +- `fadeInUp` +- `fadeInUpBig` +- `fadeInLeft` +- `fadeInLeftBig` +- `fadeInRight` +- `fadeInRightBig` ### Fading Exits ![animatable-fadeout](https://cloud.githubusercontent.com/assets/378279/10590303/ef3e9598-767d-11e5-83bc-bd48d6017131.gif) -* `fadeOut` -* `fadeOutDown` -* `fadeOutDownBig` -* `fadeOutUp` -* `fadeOutUpBig` -* `fadeOutLeft` -* `fadeOutLeftBig` -* `fadeOutRight` -* `fadeOutRightBig` +- `fadeOut` +- `fadeOutDown` +- `fadeOutDownBig` +- `fadeOutUp` +- `fadeOutUpBig` +- `fadeOutLeft` +- `fadeOutLeftBig` +- `fadeOutRight` +- `fadeOutRightBig` ### Flippers ![animatable-flip](https://cloud.githubusercontent.com/assets/378279/10590296/ef3076ca-767d-11e5-9f62-6b9c696dad51.gif) -* `flipInX` -* `flipInY` -* `flipOutX` -* `flipOutY` +- `flipInX` +- `flipInY` +- `flipOutX` +- `flipOutY` ### Lightspeed ![animatable-lightspeed](https://cloud.githubusercontent.com/assets/378279/10590301/ef374c8e-767d-11e5-83ad-b249d2731f43.gif) -* `lightSpeedIn` -* `lightSpeedOut` +- `lightSpeedIn` +- `lightSpeedOut` ### Sliding Entrances ![animatable-slidein](https://cloud.githubusercontent.com/assets/378279/10590300/ef36dfe2-767d-11e5-932b-1cccce78087b.gif) -* `slideInDown` -* `slideInUp` -* `slideInLeft` -* `slideInRight` +- `slideInDown` +- `slideInUp` +- `slideInLeft` +- `slideInRight` ### Sliding Exits ![animatable-slideout](https://cloud.githubusercontent.com/assets/378279/10590299/ef35a3ca-767d-11e5-94e0-441fd49b6444.gif) -* `slideOutDown` -* `slideOutUp` -* `slideOutLeft` -* `slideOutRight` +- `slideOutDown` +- `slideOutUp` +- `slideOutLeft` +- `slideOutRight` ### Zooming Entrances ![animatable-zoomin](https://cloud.githubusercontent.com/assets/378279/10590302/ef37d438-767d-11e5-8480-a212e21c2192.gif) -* `zoomIn` -* `zoomInDown` -* `zoomInUp` -* `zoomInLeft` -* `zoomInRight` +- `zoomIn` +- `zoomInDown` +- `zoomInUp` +- `zoomInLeft` +- `zoomInRight` ### Zooming Exits ![animatable-zoomout](https://cloud.githubusercontent.com/assets/378279/10590298/ef33fa52-767d-11e5-80fe-6b8dbb5e53d0.gif) -* `zoomOut` -* `zoomOutDown` -* `zoomOutUp` -* `zoomOutLeft` -* `zoomOutRight` - -## [Changelog](https://github.com/oblador/react-native-animatable/releases) - -## License - -[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015 +- `zoomOut` +- `zoomOutDown` +- `zoomOutUp` +- `zoomOutLeft` +- `zoomOutRight`