Added more predefined layout animations (#2184)

This PR adds new predefined layout animations: * LightSpeed * Pinwheel * Rotate * Roll
software-mansion · Jul 9, 2021 · f1aa710 · f1aa710
1 parent 30dcac7
commit f1aa710
Show file tree

Hide file tree

Showing 13 changed files with 1,162 additions and 4 deletions.
diff --git a/Example/babel.config.js b/Example/babel.config.js
@@ -27,7 +27,7 @@ module.exports = (api) => {
                 react: './node_modules/react',
                 'react-native': './node_modules/react-native',
                 '@babel': './node_modules/@babel',
-                fbjs: './node_modules/fbjs',
+                'lodash.isequal': './node_modules/lodash.isequal',
                 'hoist-non-react-statics':
                   './node_modules/hoist-non-react-statics',
                 invariant: './node_modules/invariant',

diff --git a/Example/metro.config.js b/Example/metro.config.js
@@ -8,7 +8,9 @@ function getBlacklist() {
     glob(`${path.resolve(__dirname, '..')}/node_modules/*`),
     glob(`${path.resolve(__dirname, '..')}/docs/*`),
     glob(`${path.resolve(__dirname, '..')}/e2e/*`),
-    glob(`${path.resolve(__dirname)}/node_modules/*/node_modules/fbjs/*`),
+    glob(
+      `${path.resolve(__dirname)}/node_modules/*/node_modules/lodash.isequal/*`
+    ),
     glob(
       `${path.resolve(
         __dirname

diff --git a/Example/src/LayoutReanimation/DefaultAnimations.tsx b/Example/src/LayoutReanimation/DefaultAnimations.tsx
@@ -15,7 +15,10 @@ import Animated, {
   FlipInEasyX, FlipInEasyY, FlipOutXUp, FlipOutYLeft, FlipOutXDown,
   FlipOutYRight, FlipOutEasyX, FlipOutEasyY, BounceIn, BounceInDown,
   BounceInUp, BounceInLeft, BounceInRight, BounceOut, BounceOutDown,
-  BounceOutUp, BounceOutLeft, BounceOutRight
+  BounceOutUp, BounceOutLeft, BounceOutRight, 
+  LightSpeedInRight, LightSpeedInLeft, LightSpeedOutRight, LightSpeedOutLeft, 
+  PinwheelIn, PinwheelOut, RotateInDownLeft, RotateInDownRight, RotateInUpLeft, RotateInUpRight, 
+  RotateOutDownLeft, RotateOutDownRight, RotateOutUpLeft, RotateOutUpRight, RollInLeft, RollInRight, RollOutLeft, RollOutRight
 } from 'react-native-reanimated';
 
 interface AnimatedBlockProps {
@@ -141,6 +144,35 @@ export function DefaultAnimations(): React.ReactElement {
       <AnimatedBlock name="SlideOutUp" animatedStyle={{exiting: SlideOutUp}} defaultShow={true} />
       <AnimatedBlock name="SlideOutDown" animatedStyle={{exiting: SlideOutDown}} defaultShow={true} />
 
+      <Text style={styles.groupText}>LightSpeed in</Text>
+      <AnimatedBlock name="LightSpeedInRight" animatedStyle={{entering: LightSpeedInRight}} />
+      <AnimatedBlock name="LightSpeedInLeft" animatedStyle={{entering: LightSpeedInLeft}} />
+
+      <Text style={styles.groupText}>LightSpeed out</Text>
+      <AnimatedBlock name="LightSpeedOutRight" animatedStyle={{exiting: LightSpeedOutRight}} defaultShow/>
+      <AnimatedBlock name="LightSpeedOutLeft" animatedStyle={{exiting: LightSpeedOutLeft}} defaultShow />
+
+      <Text style={styles.groupText}>Pinwheel</Text>
+      <AnimatedBlock name="PinwheelIn" animatedStyle={{entering: PinwheelIn}} />
+      <AnimatedBlock name="PinwheelOut" animatedStyle={{exiting: PinwheelOut}} defaultShow/>
+
+      <Text style={styles.groupText}>Rotate in</Text>
+      <AnimatedBlock name="RotateInDownLeft" animatedStyle={{entering: RotateInDownLeft}} />
+      <AnimatedBlock name="RotateInDownRight" animatedStyle={{entering: RotateInDownRight}} />
+      <AnimatedBlock name="RotateInUpLeft" animatedStyle={{entering: RotateInUpLeft}} />
+      <AnimatedBlock name="RotateInUpRight" animatedStyle={{entering: RotateInUpRight}} />
+
+      <Text style={styles.groupText}>Rotate out</Text>
+      <AnimatedBlock name="RotateOutDownLeft" animatedStyle={{exiting: RotateOutDownLeft}} defaultShow/>
+      <AnimatedBlock name="RotateOutDownRight" animatedStyle={{exiting: RotateOutDownRight}} defaultShow/>
+      <AnimatedBlock name="RotateOutUpLeft" animatedStyle={{exiting: RotateOutUpLeft}} defaultShow/>
+      <AnimatedBlock name="RotateOutUpRight" animatedStyle={{exiting: RotateOutUpRight}} defaultShow/>
+
+      <Text style={styles.groupText}>Roll</Text>
+      <AnimatedBlock name="RollInLeft" animatedStyle={{entering: RollInLeft}} />
+      <AnimatedBlock name="RollInRight" animatedStyle={{entering: RollInRight}} />
+      <AnimatedBlock name="RollOutLeft" animatedStyle={{exiting: RollOutLeft}} defaultShow/>
+      <AnimatedBlock name="RollOutRight" animatedStyle={{exiting: RollOutRight}} defaultShow/>
     </ScrollView>
   );
 }

diff --git a/docs/docs/api/LayoutAnimations/EntryAnimations.md b/docs/docs/api/LayoutAnimations/EntryAnimations.md
@@ -186,3 +186,96 @@ Animation based on horizontal or vertical moving of object.
 
 #### Example
 <video src="https://user-images.githubusercontent.com/36106620/120317587-1a51dc00-c2df-11eb-937a-c53a237afca2.mov" controls="controls" muted="muted"></video>
+
+### LightSpeed
+
+Animation based on horizontal moving of object with changing of opacity and skew.
+
+#### Animations
+- LightSpeedInRight
+- LightSpeedInLeft
+
+#### Modifiers
+* `duration` (in ms) default: 250
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125057634-c094bc80-e0a9-11eb-98d9-0c8eed1e63b0.mov" controls="controls" muted="muted"></video>
+
+### Pinwheel
+
+Animation based on rotation with scale and opacity change.
+
+#### Animations
+- PinwheelIn
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058126-40228b80-e0aa-11eb-8396-7f373af7fcbe.mov" controls="controls" muted="muted"></video>
+
+### Roll
+
+Animation based on horizontal moving of object with rotation.
+
+#### Animations
+- RollInLeft
+- RollInRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058243-60524a80-e0aa-11eb-94c8-79728688e2f3.mov" controls="controls" muted="muted"></video>
+
+### Rotate
+
+Animation based on rotation of object.
+
+#### Animations
+- RotateInDownLeft
+- RotateInDownRight
+- RotateInUpLeft
+- RotateInUpRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058359-79f39200-e0aa-11eb-8c78-c31e461e3748.mov" controls="controls" muted="muted"></video>
diff --git a/docs/docs/api/LayoutAnimations/ExitAnimations.md b/docs/docs/api/LayoutAnimations/ExitAnimations.md
@@ -187,3 +187,96 @@ Animation based on horizontal or vertical moving of object.
 
 #### Example
 <video src="https://user-images.githubusercontent.com/36106620/120317603-22118080-c2df-11eb-9083-b5ba3f043dbc.mov" controls="controls" muted="muted"></video>
+
+### LightSpeed
+
+Animation based on horizontal moving of object with changing of opacity and skew.
+
+#### Animations
+- LightSpeedOutRight
+- LightSpeedOutLeft
+
+#### Modifiers
+* `duration` (in ms) default: 250
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058070-2e40e880-e0aa-11eb-98eb-326a34f23f39.mov" controls="controls" muted="muted"></video>
+
+### Pinwheel
+
+Animation based on rotation with scale and opacity change.
+
+#### Animations
+- PinwheelOut
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058201-57617900-e0aa-11eb-951f-46ac27787d3e.mov" controls="controls" muted="muted"></video>
+
+### Roll
+
+Animation based on horizontal moving of object with rotation.
+
+#### Animations
+- RollOutLeft
+- RollOutRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058307-6e07d000-e0aa-11eb-8379-4536c0806aee.mov" controls="controls" muted="muted"></video>
+
+### Rotate
+
+Animation based on rotation of object.
+
+#### Animations
+- RotateOutDownLeft
+- RotateOutDownRight
+- RotateOutUpLeft
+- RotateOutUpRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058418-8841ae00-e0aa-11eb-9ac1-39df437512c4.mov" controls="controls" muted="muted"></video>
diff --git a/docs/versioned_docs/version-2.3.0-alpha.1/api/LayoutAnimations/EntryAnimations.md b/docs/versioned_docs/version-2.3.0-alpha.1/api/LayoutAnimations/EntryAnimations.md
@@ -186,3 +186,96 @@ Animation based on horizontal or vertical moving of object.
 
 #### Example
 <video src="https://user-images.githubusercontent.com/36106620/120317587-1a51dc00-c2df-11eb-937a-c53a237afca2.mov" controls="controls" muted="muted"></video>
+
+### LightSpeed
+
+Animation based on horizontal moving of object with changing of opacity and skew.
+
+#### Animations
+- LightSpeedInRight
+- LightSpeedInLeft
+
+#### Modifiers
+* `duration` (in ms) default: 250
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125057634-c094bc80-e0a9-11eb-98d9-0c8eed1e63b0.mov" controls="controls" muted="muted"></video>
+
+### Pinwheel
+
+Animation based on rotation with scale and opacity change.
+
+#### Animations
+- PinwheelIn
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058126-40228b80-e0aa-11eb-8396-7f373af7fcbe.mov" controls="controls" muted="muted"></video>
+
+### Roll
+
+Animation based on horizontal moving of object with rotation.
+
+#### Animations
+- RollInLeft
+- RollInRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058243-60524a80-e0aa-11eb-94c8-79728688e2f3.mov" controls="controls" muted="muted"></video>
+
+### Rotate
+
+Animation based on rotation of object.
+
+#### Animations
+- RotateInDownLeft
+- RotateInDownRight
+- RotateInUpLeft
+- RotateInUpRight
+
+#### Modifiers
+* `duration` (in ms) default: 300
+* `delay` (in ms) default: 0
+* `easing` same easing worklet as with `withTiming`
+* `springify` change animation to spring
+* `damping ` default: 10
+* `mass` default: 1
+* `stiffness` default: 100
+* `overshootClamping` default: false
+* `restDisplacementThreshold` default: 0.001
+* `restSpeedThreshold` default: 0.001
+
+#### Example
+<video src="https://user-images.githubusercontent.com/48885911/125058359-79f39200-e0aa-11eb-8c78-c31e461e3748.mov" controls="controls" muted="muted"></video>