ReactNative实现宽度变化实现的动画效果

xvzhengyang2024-02-06 19:47

效果如上图所示，通过修改设备宽度实现动画效果

复制代码

import React, {useRef, useEffect, useState} from 'react';
import {Animated, Text, View, Image} from 'react-native';

const FadeInView = props => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(
      fadeAnim, // 动画中的变量值
      {
        toValue: props.currentWidth, // 
        duration: props.durationTime, // 让动画持续一段时间
        //  Style property 'width' is not supported by native animated module
        useNativeDriver: false,
      },
    ).start(); // 开始执行动画
  }, [props.currentWidth]);

  return (
    <Animated.View // 使用专门的可动画化的View组件
      style={{
        ...props.style,
        width: fadeAnim, // 将宽度绑定到动画变量值
      }}>
   
    </Animated.View>
  );
};

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default props => {
  return (
    <FadeInView
      durationTime={props.durationTime}
      currentWidth={props.currentWidth}
      style={{height: 310, backgroundColor: 'pink'}}></FadeInView>
  );
};

使用的代码如下

复制代码

<LayoutAnimatedWidth
      currentWidth={this.state.currentWidth}
      durationTime={this.state.durationTime}>
</LayoutAnimatedWidth>

PS：注意上面的代码和截图不一致；但是代码是可以实现上面的效果的。