docs: add rotate-scale-fade-in-out layout

Author: dohooo

README.md

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

README.zh-CN.md

@@ -61,6 +61,9 @@
   <a href="./example/src/scale-fade-in-out/index.tsx">
     <img src="assets/scale-fade-in-out.gif" width="300"/>  
   </a>
+  <a href="./example/src/rotate-scale-fade-in-out/index.tsx">
+    <img src="assets/rotate-scale-fade-in-out.gif" width="300"/>  
+  </a>
 </p>
 
 ## 目录

assets/rotate-scale-fade-in-out.gif

@@ -8,16 +8,15 @@ After some effort, we finally implemented custom animation in v2, now we just ne
 type TAnimationStyle = (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
 ```
 
-
 This function will be called in each item and accepts a parameter `value` indicating the position of the current item relative to `window`. The following picture shows the relationship between `value` and position
 
-<img src="././../assets/custom-animation-sketch.png" width="300"/>  
+<img src="././../assets/custom-animation-sketch.png" width="300"/>
 
 After getting the `value`, we only need to describe how the item is displayed in the corresponding position, and the rest is handed over to `Animated` to execute.
 
 ### Tips
 
-* Don't forget to set `zIndex`
+-   Don't forget to set `zIndex`
 
 ---
 
@@ -32,24 +31,21 @@ Here are a few examples.
 </a>
 
 ```ts
-const animationStyle: TAnimationStyle = React.useCallback(
-    (value: number) => {
-        'worklet';
-
-        const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
-        const translateX = interpolate(
-            value,
-            [-1, 0, 1],
-            [-PAGE_WIDTH * 0.5, 0, PAGE_WIDTH]
-        );
+const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
+    'worklet';
+
+    const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+    const translateX = interpolate(
+        value,
+        [-1, 0, 1],
+        [-PAGE_WIDTH * 0.5, 0, PAGE_WIDTH]
+    );
 
-        return {
-            transform: [{ translateX }],
-            zIndex,
-        };
-    },
-    []
-);
+    return {
+        transform: [{ translateX }],
+        zIndex,
+    };
+}, []);
 
 <Carousel
     style={{ width: screen.width, height: 240 }}
@@ -65,7 +61,7 @@ const animationStyle: TAnimationStyle = React.useCallback(
             />
         );
     }}
-/>
+/>;
 
 const CustomItem = ({ index, animationValue }) => {
     const maskStyle = useAnimatedStyle(() => {
@@ -98,7 +94,7 @@ const CustomItem = ({ index, animationValue }) => {
             />
         </View>
     );
-}
+};
 ```
 
 In order to implement some animation effects outside `Carousel`, such as `MaskView`, we pass the animation value calculated inside each Item to the outside through `renderItem`.
@@ -110,22 +106,19 @@ In order to implement some animation effects outside `Carousel`, such as `MaskVi
 </a>
 
 ```ts
-const animationStyle: TAnimationStyle = React.useCallback(
-    (value: number) => {
-        'worklet';
+const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
+    'worklet';
 
-        const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
-        const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
-        const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);
+    const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+    const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
+    const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);
 
-        return {
-            transform: [{ scale }],
-            zIndex,
-            opacity,
-        };
-    },
-    []
-);
+    return {
+        transform: [{ scale }],
+        zIndex,
+        opacity,
+    };
+}, []);
 
 <Carousel
     style={{
@@ -139,16 +132,7 @@ const animationStyle: TAnimationStyle = React.useCallback(
     data={[...new Array(6).keys()]}
     customAnimation={animationStyle}
     renderItem={({ index }) => {
-        return (
-            <SBItem
-                key={index}
-                index={index}
-                style={{
-                    borderWidth: 5,
-                    borderColor: Colors.orange50,
-                }}
-            />
-        );
+        return <SBItem key={index} index={index} />;
     }}
-/>
-```
+/>;
+```

docs/custom-animation.md

@@ -1,22 +1,22 @@
 # 自定义动画
 
-经过一些努力，我们终于在v2版本中实现了自定义动画，现在只需实现一个类型`TAnimationStyle`的回调函数，然后将它传给`Carousel`的`customAnimation`属性即可。
+经过一些努力，我们终于在 v2 版本中实现了自定义动画，现在只需实现一个类型`TAnimationStyle`的回调函数，然后将它传给`Carousel`的`customAnimation`属性即可。
 
 ## 准备
 
 ```
 type TAnimationStyle = (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
 ```
 
-这个函数会在每个item里去调用，并接受一个参数`value`表示当前item相对`window`所在的位置，下图展示了`value`和位置的关系
+这个函数会在每个 item 里去调用，并接受一个参数`value`表示当前 item 相对`window`所在的位置，下图展示了`value`和位置的关系
 
-<img src="././../assets/custom-animation-sketch.png" width="300"/>  
+<img src="././../assets/custom-animation-sketch.png" width="300"/>
 
-当拿到`value`后，我们只需要描述item在对应位置上如何展示，剩下的就交给`Animated`去执行吧。
+当拿到`value`后，我们只需要描述 item 在对应位置上如何展示，剩下的就交给`Animated`去执行吧。
 
 ### 小贴士
 
-* 别忘了设置`zIndex`
+-   别忘了设置`zIndex`
 
 ---
 
@@ -31,24 +31,21 @@ type TAnimationStyle = (value: number) => Animated.AnimatedStyleProp<ViewStyle>;
 </a>
 
 ```ts
-const animationStyle: TAnimationStyle = React.useCallback(
-    (value: number) => {
-        'worklet';
+const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
+    'worklet';
+
+    const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+    const translateX = interpolate(
+        value,
+        [-1, 0, 1],
+        [-PAGE_WIDTH * 0.5, 0, PAGE_WIDTH]
+    );
 
-        const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
-        const translateX = interpolate(
-            value,
-            [-1, 0, 1],
-            [-PAGE_WIDTH * 0.5, 0, PAGE_WIDTH]
-        );
-
-        return {
-            transform: [{ translateX }],
-            zIndex,
-        };
-    },
-    []
-);
+    return {
+        transform: [{ translateX }],
+        zIndex,
+    };
+}, []);
 
 <Carousel
     style={{ width: screen.width, height: 240 }}
@@ -64,7 +61,7 @@ const animationStyle: TAnimationStyle = React.useCallback(
             />
         );
     }}
-/>
+/>;
 
 const CustomItem = ({ index, animationValue }) => {
     const maskStyle = useAnimatedStyle(() => {
@@ -97,10 +94,10 @@ const CustomItem = ({ index, animationValue }) => {
             />
         </View>
     );
-}
+};
 ```
 
-为了让`Carousel`外部实现一些动画效果，比如`MaskView`，我们将每个Item内部计算出来的动画值通过`renderItem`传递到了外部。
+为了让`Carousel`外部实现一些动画效果，比如`MaskView`，我们将每个 Item 内部计算出来的动画值通过`renderItem`传递到了外部。
 
 ### 缩放渐入渐出效果
 
@@ -109,22 +106,19 @@ const CustomItem = ({ index, animationValue }) => {
 </a>
 
 ```ts
-const animationStyle: TAnimationStyle = React.useCallback(
-    (value: number) => {
-        'worklet';
+const animationStyle: TAnimationStyle = React.useCallback((value: number) => {
+    'worklet';
 
-        const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
-        const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
-        const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);
+    const zIndex = interpolate(value, [-1, 0, 1], [10, 20, 30]);
+    const scale = interpolate(value, [-1, 0, 1], [1.25, 1, 0.25]);
+    const opacity = interpolate(value, [-0.75, 0, 1], [0, 1, 0]);
 
-        return {
-            transform: [{ scale }],
-            zIndex,
-            opacity,
-        };
-    },
-    []
-);
+    return {
+        transform: [{ scale }],
+        zIndex,
+        opacity,
+    };
+}, []);
 
 <Carousel
     style={{
@@ -138,16 +132,7 @@ const animationStyle: TAnimationStyle = React.useCallback(
     data={[...new Array(6).keys()]}
     customAnimation={animationStyle}
     renderItem={({ index }) => {
-        return (
-            <SBItem
-                key={index}
-                index={index}
-                style={{
-                    borderWidth: 5,
-                    borderColor: Colors.orange50,
-                }}
-            />
-        );
+        return <SBItem key={index} index={index} />;
     }}
-/>
-```
+/>;
+```

docs/custom-animation.zh-CN.md

@@ -9,6 +9,7 @@ import Carousel from 'react-native-reanimated-carousel';
 import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
 import { SBItem } from '../components/SBItem';
 import SButton from '../components/SButton';
+import { ElementsText } from '../constants';
 
 const window = Dimensions.get('window');
 const PAGE_WIDTH = window.width;
@@ -58,7 +59,7 @@ function Index() {
                     setIsAutoPlay(!isAutoPlay);
                 }}
             >
-                AutoPlay:{`${isAutoPlay}`}
+                {ElementsText.AUTOPLAY}:{`${isAutoPlay}`}
             </SButton>
         </View>
     );

example/src/advanced-parallax/index.tsx

@@ -0,0 +1,3 @@
+export const ElementsText = {
+    AUTOPLAY: 'AutoPlay',
+};

example/src/constants/index.ts

@@ -29,6 +29,9 @@ const LayoutsPage: Array<Record<'name', keyof RootStackParamList>> = [
     {
         name: 'ScaleFadeInOut',
     },
+    {
+        name: 'RotateScaleFadeInOut',
+    },
 ];
 
 const OtherPage: Array<Record<'name', keyof RootStackParamList>> = [

example/src/home/index.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import SButton from '../components/SButton';
+
+export function useToggleButton(opts: {
+    defaultValue: boolean;
+    buttonTitle: string;
+}) {
+    const { buttonTitle, defaultValue = false } = opts;
+    const [status, setStatus] = React.useState(defaultValue);
+
+    const button = React.useMemo(() => {
+        return (
+            <SButton onPress={() => setStatus(!status)}>
+                {buttonTitle}:{`${status}`}
+            </SButton>
+        );
+    }, [status, buttonTitle]);
+
+    return {
+        status,
+        button,
+    };
+}

example/src/hooks/useToggleButton.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 RotateScaleFadeInOutComponent from './rotate-scale-fade-in-out';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -29,6 +30,7 @@ export type RootStackParamList = {
     AdvancedParallax: undefined;
     PauseAdvancedParallax: undefined;
     ScaleFadeInOut: undefined;
+    RotateScaleFadeInOut: undefined;
 
     SnapCarouselComplex: undefined;
     SnapCarouselLoop: undefined;
@@ -77,6 +79,10 @@ function App() {
                     name="ScaleFadeInOut"
                     component={ScaleFadeInOutComponent}
                 />
+                <Stack.Screen
+                    name="RotateScaleFadeInOut"
+                    component={RotateScaleFadeInOutComponent}
+                />
 
                 <Stack.Screen
                     name="SnapCarouselComplex"