ReactNative之FlatList-列表入场动画

最新推荐文章于 2024-02-21 11:26:38 发布

无趣-心

最新推荐文章于 2024-02-21 11:26:38 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： android React-Native 文章标签： ReactNative FlatList 入场动画弹性动画

本文链接：https://blog.youkuaiyun.com/zoushu_nihao/article/details/89504022

FlatList-列表入场动画

前言

网上查找资料：RN FlatList入场动画，竟然一个都没搜索到，而且还是百度+google双大法。最后没办法，只能自己仔细看Animated库怎么使用，各种属性都慢慢试了，才大致弄清楚动画的实现。先看实现的效果图：

效果图1

效果图2

效果图3

项目中的效果图

gif有点卡，真机运行是很流畅的。

动画基本介绍

ReactNative的view动画效果主要使用Animated库来进行制作，通过start和stop来进行控制动画的启动。animate封装了四个可以动画化的组件：View，Text,Image,ScrollView。也可以使用Animated.createAnimatedComponent()封装自己的动画组件。

简单的使用方式（中文网上的代码），淡入动画效果的视图：

import React from 'react';
import { Animated, Text, View } from 'react-native';

class FadeInView extends React.Component {
  state = {
    fadeAnim: new Animated.Value(0),  // 透明度初始值设为0
  }

  componentDidMount() {
    Animated.timing(                  // 随时间变化而执行动画
      this.state.fadeAnim,            // 动画中的变量值
      {
        toValue: 1,                   // 透明度最终变为1，即完全不透明
        duration: 10000,              // 让动画持续一段时间
      }
    ).start();                        // 开始执行动画
  }

  render() {
    let { fadeAnim } = this.state;

    return (
      <Animated.View                 // 使用专门的可动画化的View组件
        style={
  
  {
          ...this.props.style,
          opacity: fadeAnim,         // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}

/