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

相关推荐
青红光硫化黑6 小时前
React-native之组件
javascript·react native·react.js
冰冷的bin7 小时前
【React Native】自定义跑马灯组件Marquee
react native
Bug改不动了1 天前
React Native 与 UniApp 对比
react native·react.js·uni-app
木西1 天前
React Native DApp 开发全栈实战·从 0 到 1 系列(eas构建自定义客户端)
react native·web3·app
wayne2142 天前
企业级 RN Android 完整 CI/CD 自动化解决方案
react native
lexiangqicheng3 天前
rn入口文件setup.js解读
react native
sure2824 天前
react native 编写一个歌词组件
前端·react native
风景_fengjing5 天前
React Native + Expo搭建APP项目+安卓模拟器
react native·expo
pe7er7 天前
Reactnative 项目开发(最佳?)实践
react native