feat(mobile): slider text animation

packages/mobile/package.json

@@ -42,6 +42,7 @@
     "@react-native-firebase/app": "18.5.0",
     "@react-native-firebase/crashlytics": "18.5.0",
     "@react-native-firebase/messaging": "18.5.0",
+    "@react-native-masked-view/masked-view": "^0.3.1",
     "@reduxjs/toolkit": "^1.6.1",
     "@shopify/flash-list": "^1.5.0",
     "@ton-community/ton-ledger": "^7.0.1",

packages/uikit/src/components/SlideButton/SlideButton.tsx

@@ -1,16 +1,20 @@
 import React, { memo } from 'react';
 import { View } from '../View';
-import { Steezy } from '../../styles';
+import { Steezy, useTheme } from '../../styles';
 import { Icon } from '../Icon';
 import { Text } from '../Text';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import MaskedView from '@react-native-masked-view/masked-view';
 import Animated, {
   clamp,
+  Easing,
   ReduceMotion,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
+  withRepeat,
+  withSequence,
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
@@ -20,6 +24,9 @@ import {
   triggerNotificationSuccess,
 } from '@tonkeeper/mobile/src/utils';
 
+const GRADIENT_SOURCE = require('./gradient.png');
+const GRADIENT_WIDTH = 168;
+
 export interface SlideButtonProps {
   onSuccessSlide: () => void;
   text: string;
@@ -41,6 +48,8 @@ export const SlideButton = memo<SlideButtonProps>((props) => {
   const disabledButtonStyle = Steezy.useStyle(styles.buttonDisabled);
   const leftOffset = useSharedValue(0);
   const maxOffset = useSharedValue(0);
+  const textWidth = useSharedValue(0);
+  const theme = useTheme();
 
   const panGesture = Gesture.Pan()
     .enabled(!props.disabled)
@@ -70,19 +79,67 @@ export const SlideButton = memo<SlideButtonProps>((props) => {
 
   const textContainerStyle = useAnimatedStyle(() => {
     return {
+      flex: 1,
       opacity: withTiming(props.disabled || leftOffset.value ? 0 : 1, { duration: 175 }),
     };
   });
 
+  const gradientStyle = useAnimatedStyle(() => {
+    const startX = (maxOffset.value - textWidth.value) / 2 - GRADIENT_WIDTH;
+    const endX = (maxOffset.value - textWidth.value) / 2 + textWidth.value;
+
+    return {
+      width: GRADIENT_WIDTH,
+      height: '100%',
+      transform: [
+        {
+          translateX: withRepeat(
+            withSequence(
+              withTiming(startX, { duration: 0 }),
+              withDelay(
+                1500,
+                withTiming(endX, {
+                  duration: 1000,
+                  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+                }),
+              ),
+            ),
+            -1,
+          ),
+        },
+      ],
+    };
+  });
+
   return (
     <View
       onLayout={(e) => (maxOffset.value = e.nativeEvent.layout.width)}
       style={styles.container}
     >
       <Animated.View style={textContainerStyle}>
-        <Text color="textTertiary" fontWeight={'600'} type={'body1'}>
-          {props.text}
-        </Text>
+        <MaskedView
+          style={styles.flexOne.static}
+          maskElement={
+            <View style={styles.maskedTextContainer}>
+              <Text
+                color="textTertiary"
+                fontWeight={'600'}
+                type={'body1'}
+                onLayout={(e) => (textWidth.value = e.nativeEvent.layout.width)}
+              >
+                {props.text}
+              </Text>
+            </View>
+          }
+        >
+          <View style={styles.maskContainer}>
+            <Animated.Image
+              tintColor={theme.textPrimary}
+              source={GRADIENT_SOURCE}
+              style={gradientStyle}
+            />
+          </View>
+        </MaskedView>
       </Animated.View>
       <GestureDetector gesture={panGesture}>
         <Animated.View
@@ -119,13 +176,28 @@ const styles = Steezy.create(({ colors }) => ({
     height: 56,
     backgroundColor: colors.backgroundContent,
     borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
   },
   buttonDisabled: {
     backgroundColor: colors.buttonPrimaryBackgroundDisabled,
   },
   iconDisabled: {
     opacity: 0.48,
   },
+  flexOne: {
+    flex: 1,
+  },
+  maskedTextContainer: {
+    backgroundColor: 'transparent',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  maskContainer: {
+    flex: 1,
+    backgroundColor: colors.textTertiary,
+  },
+  gradient: {
+    width: 168,
+    height: '100%',
+  },
 }));

yarn.lock

@@ -2809,6 +2809,11 @@
   resolved "https://registry.yarnpkg.com/@react-native-firebase/messaging/-/messaging-18.5.0.tgz#2a80b25816470e9843682e031a3a113566067ce6"
   integrity sha512-y1FApYxBMcygmbWBqUPFC+fCfvx6Yf6TdZewun7kPwx+S+tkYzoKx1IsXtxOXtqyJjCNEYirjFgNrs5SSd02zA==
 
+"@react-native-masked-view/masked-view@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
+  integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==
+
 "@react-native/assets-registry@^0.72.0":
   version "0.72.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.72.0.tgz#c82a76a1d86ec0c3907be76f7faf97a32bbed05d"