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

相关推荐
wen's1 天前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
朝阳391 天前
ReactNative【实战系列教程】我的小红书 3 -- 自定义底栏Tab导航(含图片选择 expo-image-picker 的使用)
react native
冰冷的bin2 天前
【React Native】自定义倒计时组件CountdownView
react native
朝阳3911 天前
React Native【实用教程】(含图标方案,常用第三库,动画,内置组件,内置Hooks,内置API,自定义组件,创建项目等)
react native
朝阳3912 天前
React Native【实战范例】同步跟随滚动
react native
朝阳3913 天前
React Native【详解】动画
react native
朝阳3915 天前
React Native【详解】内置 API
react native
xx240615 天前
React Native学习笔记
笔记·学习·react native
朝阳3915 天前
React Native【实战范例】弹跳动画菜单导航
react native
草明15 天前
解决: React Native iOS webview 空白页
react native·react.js·ios