From 755466765bf5315708975e1ee2a1146497be6fd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Furkan=20Do=C4=9Fu?=
 <37083315+furkanDogu@users.noreply.github.com>
Date: Fri, 28 Jun 2019 04:26:43 +0200
Subject: [PATCH] added animations in react native (#30237)

---
 .../english/react-native/animations/index.md  | 112 ++++++++++++++++++
 1 file changed, 112 insertions(+)
 create mode 100644 guide/english/react-native/animations/index.md

diff --git a/guide/english/react-native/animations/index.md b/guide/english/react-native/animations/index.md
new file mode 100644
index 0000000000..c6800b18df
--- /dev/null
+++ b/guide/english/react-native/animations/index.md
@@ -0,0 +1,112 @@
+---
+title: Animations in React Native
+---
+
+## Animations in React Native
+In React Native, moving objects on screen is not as hard as you thought. There is a API named `Animated`.  The API has several functions to animate things as decay, spring and timing. Timing function is the most used one and we will create a demo with`Animated.timing()`.
+ 
+Let's start with importing our API and View component that will be moving.
+```javascript
+ import  React  from  'react';
+ import { Animated, View, Easing } from  'react-native';
+```
+ There are 3 fundamental steps of applying Animated API
+ 
+1.  Assign a value that the animation will progress with
+2.  Determine what type of animation will be applied
+3.  Wrap the component to be animated
+
+ For first step we  need to declare a animated value in constructor method.
+ 
+ 
+ ```javascript
+ constructor() {
+  super();
+  this.spinValue  =  new  Animated.Value(0);
+}
+ ```
+ 
+     
+ Initially, we set the value to 0.
+ 
+ Timing function will help us change that `spinValue` in a specific duration.  As second step, we need to determine the animation type with animated functions. 
+     
+```javascript
+spin() {
+ Animated.timing(this.spinValue, {
+     toValue:  1,
+     duration:  4000,
+     easing: Easing.linear 
+ }).start(() => {
+     this.spinValue.setValue(0);
+     this.spin();
+ });
+}
+```
+    
+ 
+ The function takes our animated value as first parameter. Basically, timing function will move the given animated value to a number that is given in `toValue: 1`.   The good thing timing function provides us is the duration. Since we set duration to 4000ms , it will take 4 seconds for the value to be 1  from 0.  After 4 seconds, timing function will stop and the call given callback in `start()`.  We set our value to 0 and call `spin` again  in callback function. Therefore, spin function becomes recursive and we have the infinite animation.
+ 
+ 
+ > The `Easing` module implements common easing functions. This module is used by [Animated.timing()](https://facebook.github.io/react-native/docs/animated#timing) to convey physically believable motion in animations.
+ 
+ 
+ Linear function is chosen above because we want our animation to be nonstop. You can simply experience the difference by removing `Easing.linear` line.
+ 
+`componentDidMount` life-cycle method is great place to call `spin` method because it's called once the components are mounted on screen. 
+
+```javascript
+componentDidMount() {
+  this.spin();
+}
+```
+ Everything looks great, we have a value that is changing 0 to 1 in 4 seconds. Why don't we use this changing value to interpolate our style objects ? 
+```javascript
+getMovement() {
+  const  rotate  =  this.spinValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  return  rotate;
+}
+```
+ > The `interpolate` function allows animated values to be derived from other animated values.
+
+ While timing function changing animated value to 1, `interpolate` function creates values with the given ratio in `inputRange` and `outputRange`.  
+ 
+ - If input is 0 then give '0deg'
+ - If input is 1 then give '360deg'
+ 
+There is only one step left to complete.  The third one '  Wrap the component to be animated'. We can either wrap a component as
+```javascript
+<Animated.View>
+  <View />
+</Animated.View>
+```
+ or we can directly move the Animated.View itself. I will go with the second option.
+ 
+```js     
+render() {
+  return (
+    <View  style={{ flex:  1, justifyContent:  'center', alignItems:  'center'}}>
+      <Animated.View
+        style={{
+          transform: [{ rotate:  this.getMovement() }],
+          width:  100,
+          height:  100,
+          backgroundColor:  'pink'
+        }}
+      />
+    </View>
+  );
+}
+```
+`getMovement` returns our interpolated value and we set it to transform property of our style object. Eventually, we have the spining pink square in the middle of screen.  As a challange you can try to create a ball jumping on screen.
+ 
+ Happy Hacktoberfest !
+ 
+ ### Sources
+ - [AnimationBook](https://animationbook.codedaily.io/introduction/)
+ - [React Native Documents](https://facebook.github.io/react-native/docs/animated)
+ 
+