docs: add anim-tab-bar.gif

Author: dohooo

README.md

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

README.zh-CN.md

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

assets/anim-tab-bar.gif

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Dimensions } from 'react-native';
+import { Extrapolate, interpolate } from 'react-native-reanimated';
+import Carousel from 'react-native-reanimated-carousel';
+import { View, Text } from 'react-native-ui-lib';
+import type { TAnimationStyle } from '../../../src/layouts/BaseLayout';
+import { ElementsText } from '../constants';
+import { useToggleButton } from '../hooks/useToggleButton';
+
+const window = Dimensions.get('window');
+const PAGE_WIDTH = 40;
+const PAGE_HEIGHT = 40;
+
+function Index() {
+    const AutoPLay = useToggleButton({
+        defaultValue: false,
+        buttonTitle: ElementsText.AUTOPLAY,
+    });
+
+    const animationStyle: TAnimationStyle = React.useCallback(
+        (value: number) => {
+            'worklet';
+
+            const translateX = interpolate(
+                value,
+                [-1, 0, 1],
+                [-PAGE_WIDTH, 0, PAGE_WIDTH]
+            );
+
+            const opacity = interpolate(
+                value,
+                [-1, 0, 1],
+                [0.5, 1, 0.5],
+                Extrapolate.CLAMP
+            );
+
+            const scale = interpolate(
+                value,
+                [-1, 0, 1],
+                [0.8, 1.4, 0.8],
+                Extrapolate.CLAMP
+            );
+
+            return {
+                transform: [{ translateX }, { scale }],
+                opacity,
+            };
+        },
+        []
+    );
+
+    return (
+        <View style={{ flex: 1 }}>
+            <Carousel
+                loop={false}
+                style={{
+                    width: window.width,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    paddingVertical: 110,
+                }}
+                width={PAGE_WIDTH}
+                height={PAGE_HEIGHT}
+                data={['周一', '周二', '周三', '周四', '周五', '周六', '周日']}
+                renderItem={({ item }) => {
+                    return (
+                        <View center height={'100%'}>
+                            <Text color={'#26292E'}>{item}</Text>
+                        </View>
+                    );
+                }}
+                autoPlay={AutoPLay.status}
+                customAnimation={animationStyle}
+            />
+            {AutoPLay.button}
+        </View>
+    );
+}
+
+export default Index;

example/src/anim-tab-bar/index.tsx

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

example/src/home/index.tsx

@@ -19,6 +19,7 @@ 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';
+import AnimTabBarComponent from './anim-tab-bar';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -27,12 +28,14 @@ export type RootStackParamList = {
     Normal: undefined;
     Parallax: undefined;
     Stack: undefined;
+
     Complex: undefined;
     AdvancedParallax: undefined;
     PauseAdvancedParallax: undefined;
     ScaleFadeInOut: undefined;
     RotateInOut: undefined;
     RotateScaleFadeInOut: undefined;
+    AnimTabBar: undefined;
 
     SnapCarouselComplex: undefined;
     SnapCarouselLoop: undefined;
@@ -89,6 +92,10 @@ function App() {
                     name="RotateScaleFadeInOut"
                     component={RotateScaleFadeInOutComponent}
                 />
+                <Stack.Screen
+                    name="AnimTabBar"
+                    component={AnimTabBarComponent}
+                />
 
                 <Stack.Screen
                     name="SnapCarouselComplex"