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

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

复制代码
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:注意上面的代码和截图不一致;但是代码是可以实现上面的效果的。

相关推荐
cauyyl1 天前
xcode 16 遇到contains bitcode
react native·xcode
冰冷的bin2 天前
【React Native】自适应宽高的图片组件AdaptiveImage
react native
墨渊君5 天前
React Native 入门指南: 构建 UI 的必备核心组件
前端·react native·react.js
这个昵称也不能用吗?8 天前
react-native搭建开发环境过程记录
前端·react native·cocoapods
厨猿加加8 天前
FlatList 在 React Native 的最佳实践
前端·react native
jinzunqinjiu8 天前
学习react-native组件 1 Image加载图片的组件。
前端·react native
乐影9 天前
React Native踩坑记录之——屏幕适配
前端·react native
就是我10 天前
如何用lazy+ Suspense实现组件延迟加载
javascript·react native·react.js
就是我12 天前
React Native如何避免掉帧
前端·react native·react.js
墨渊君12 天前
React Native 与 React(Web) 开发的不同点, 如何快速上手?
前端·javascript·react native