docs: add rotate-in-out.gif

Author: dohooo

README.md

@@ -63,6 +63,9 @@ English | [简体中文](./README.zh-CN.md)
   <a href="./example/src/rotate-scale-fade-in-out/index.tsx">
     <img src="assets/rotate-scale-fade-in-out.gif" width="300"/>  
   </a>
+  <a href="./example/src/rotate-in-out/index.tsx">
+    <img src="assets/rotate-in-out.gif" width="300"/>  
+  </a>
 </p>
 
 ## Table of contents

README.zh-CN.md

@@ -48,7 +48,6 @@
   </a>
 </p>
 
-
 > 现在你可以和我们一起来制作酷炫的动画了！ 非常简单! [[详情]](./docs/custom-animation.zh-CN.md)
 
 <p align="center">
@@ -64,6 +63,9 @@
   <a href="./example/src/rotate-scale-fade-in-out/index.tsx">
     <img src="assets/rotate-scale-fade-in-out.gif" width="300"/>  
   </a>
+  <a href="./example/src/rotate-in-out/index.tsx">
+    <img src="assets/rotate-in-out.gif" width="300"/>  
+  </a>
 </p>
 
 ## 目录

assets/rotate-in-out.gif

@@ -20,6 +20,9 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'Stack',
     },
+];
+
+const CustomAnimations: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'AdvancedParallax',
     },
@@ -29,6 +32,9 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'ScaleFadeInOut',
     },
+    {
+        name: 'RotateInOut',
+    },
     {
         name: 'RotateScaleFadeInOut',
     },
@@ -68,6 +74,21 @@ const Index = () => {
                     </TouchableHighlight>
                 );
             })}
+            <View style={styles.section}>
+                <Text style={styles.sectionText}>{'CustomAnimations'}</Text>
+            </View>
+            {CustomAnimations.map(({ name }, index) => {
+                return (
+                    <TouchableHighlight
+                        key={index}
+                        onPress={() => navigation.navigate(name)}
+                    >
+                        <View style={styles.listItem}>
+                            <Text style={styles.text}>{name}</Text>
+                        </View>
+                    </TouchableHighlight>
+                );
+            })}
             <View style={styles.section}>
                 <Text style={styles.sectionText}>{'Others'}</Text>
             </View>

example/src/home/index.tsx

@@ -17,6 +17,7 @@ import SnapCarouselLoopComponent from './snap-carousel-loop';
 import AdvancedParallaxComponent from './advanced-parallax';
 import PauseAdvancedParallaxComponent from './pause-advanced-parallax';
 import ScaleFadeInOutComponent from './scale-fade-in-out';
+import RotateInOutComponent from './rotate-in-out';
 import RotateScaleFadeInOutComponent from './rotate-scale-fade-in-out';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
@@ -30,6 +31,7 @@ export type RootStackParamList = {
     AdvancedParallax: undefined;
     PauseAdvancedParallax: undefined;
     ScaleFadeInOut: undefined;
+    RotateInOut: undefined;
     RotateScaleFadeInOut: undefined;
 
     SnapCarouselComplex: undefined;
@@ -79,6 +81,10 @@ function App() {
                     name="ScaleFadeInOut"
                     component={ScaleFadeInOutComponent}
                 />
+                <Stack.Screen
+                    name="RotateInOut"
+                    component={RotateInOutComponent}
+                />
                 <Stack.Screen
                     name="RotateScaleFadeInOut"
                     component={RotateScaleFadeInOutComponent}

example/src/index.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Dimensions, View } from 'react-native';
+import { interpolate } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
+import { SBItem } from '../components/SBItem';
+import { ElementsText } from '../constants';
+import { useToggleButton } from '../hooks/useToggleButton';
+
+const window = Dimensions.get('window');
+const scale = 0.7;
+const PAGE_WIDTH = window.width * scale;
+const PAGE_HEIGHT = 240 * scale;
+
+function Index() {
+    const AutoPLay = useToggleButton({
+        defaultValue: false,
+        buttonTitle: ElementsText.AUTOPLAY,
+    });
+
+    const animationStyle: TAnimationStyle = React.useCallback(
+        (value: number) => {
+            'worklet';
+
+            const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+            const rotateZ = `${interpolate(
+                value,
+                [-1, 0, 1],
+                [-45, 0, 45]
+            )}deg`;
+            const translateX = interpolate(
+                value,
+                [-1, 0, 1],
+                [-window.width, 0, window.width]
+            );
+
+            return {
+                transform: [{ rotateZ }, { translateX }],
+                zIndex,
+            };
+        },
+        []
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Carousel
+                loop
+                style={{
+                    width: window.width,
+                    height: 240,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}
+                width={PAGE_WIDTH}
+                height={PAGE_HEIGHT}
+                data={[...new Array(6).keys()]}
+                renderItem={({ index }) => {
+                    return <SBItem key={index} index={index} />;
+                }}
+                autoPlay={AutoPLay.status}
+                customAnimation={animationStyle}
+            />
+            {AutoPLay.button}
+        </View>
+    );
+}
+
+export default Index;