增加 React 原生动画的大小

Question

这是一个示例代码，因为我正在尝试从 React Native 学习动画。如果我想按下一个按钮并顺利地将这段文字的大小加倍，我该怎么做？据我了解，我需要以某种方式添加 Transform: scale x/y 但我对此感到非常困惑。谢谢

 import React, { useRef, useEffect } from 'react';
 import { Animated, Text, View } from 'react-native';
    
    
    
const FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current
    useEffect(() => {
      Animated.timing(
        fadeAnim,
        {
          toValue: 1,
          duration: 2000,
          useNativeDriver: true
        }
      ).start();
    }, [])
  
    return (
      <Animated.View style={{...props.style, opacity: fadeAnim}}>
        {props.children}
      </Animated.View>
    );
  }
  

  export default () => {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView>
          <Text style={{fontSize: 28, textAlign: 'center', padding: 10}}>Fading in</Text>
        </FadeInView>
      </View>
    )
  }

Answer 1

假设您希望在单击文本时缩放文本。你可以这样做：

export default () => {
const scaleAnim = useRef(new Animated.Value(1)).current;
const animateTextSize = () => {
  Animated.timing(
      scaleAnim,
      {
        toValue: 2,
        duration: 2000,
        useNativeDriver: true
      }            
   ).start();
}

return (
  <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
    <FadeInView>
      <Animated.Text style={{fontSize: 28, textAlign: 'center', padding: 10, transform:[{scale:scaleAnim}]}} onPress={animateTextSize}>Fading in</Animated.Text>
    </FadeInView>
  </View>
)}

snack demo

增加 React 原生动画的大小

Increase size in React native animated

react-native

react-animated