ReactNative之FlatList-列表入场动画

FlatList-列表入场动画

前言

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

效果图1

merge.gif

效果图2

mergeX.gif

效果图3

x.gif

项目中的效果图

project.gif

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 (
      
        {this.props.children}
      
    );
  }
}

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default class App extends React.Component {
  render() {
    return (
      
        
          Fading in
        
      
    )
  }
}
复制代码

Animated的动画基本配置方法有timing,spring,decay;

1、timing

它是线性动画,在设定时间内移动到终点,中间的动画可以设置

toValue:线性改变的数值

duration: 动画持续时间 默认500.

easing:默认的实现Easing.in和Easing.out和Easing.inOut。

delay: 动画延迟开始时间。
复制代码

简单的使用方式:

 Animated.timing(
        this.state.animatePress, {
            toValue: 0.8,
            duration: 200
        }
    ).start();
复制代码

2、spring

类似弹簧的实现,动画结束时会有个渐弱的摆动,它的属性在源码中可以看到有很多:

interface SpringAnimationConfig extends AnimationConfig {
    toValue: number | AnimatedValue | { x: number; y: number } | AnimatedValueXY;
    overshootClamping?: boolean;
    restDisplacementThreshold?: number;
    restSpeedThreshold?: number;
    velocity?: number | { x: number; y: number };
    bounciness?: number;
    speed?: number;
    tension?: number;
    friction?: number;
    stiffness?: number;
    mass?: number;
    damping?: number;
    delay?: number;
}
复制代码

常用的有: toValue:线性改变的数值 friction:弹簧界限值,越小弹的越大,默认7 tension:弹簧张力,默认40,越大进入的速度越快

简单的使用方式:

 Animated.spring(this.state.animateItem, {
                        toValue: 1,
                        velocity: 0.1,
                        bounciness: 5,
                        friction:5
                    }),
复制代码

3、decay

动画的速度逐渐变慢,最后停止,类似上面的转场动画

Animated的动画组合方式有:parallel,sequence,stagger,

parallel:并行运行动画

sequence:依次运行动画,如果一个动画被停止了,那么下一个动画就不会被执行。

stagger:每个动画延迟一段时间执行

这三个动画的基本入参是动画数组,stagger有额外的time(延时)参数。而且数组内仍然可以传入parallel,sequence,stagger等各种类型,安装规则进行动画播放。

栗子如下:

     //动画并行parallel
    Animated.parallel(
        [   
            //动画顺序执行
            Animated.sequence(
                [
                    Animated.delay(delay),
                    // Animated.spring(this.state.animateItem, {
                    //     toValue: 1,
                    //     velocity: 0.1,
                    //     bounciness: 5,
                    // }),
                    Animated.timing(this.state.animateItem, {
                        toValue: 1,
                        duration: 500,
                        // delay: delay
                    })
                ]
            ),
            Animated.sequence(
                [
                    Animated.delay(delay),
                    Animated.timing(this.state.animateOpacity, {
                        toValue: 1,
                        duration: 1000
                    })
                ]
            )

        ]
    ).start()
复制代码

效果图的实现

动画的基本介绍完成后,在看看效果图,其实就是动画简单的组合,使用了transform参数,另外加了个插值器。

核心代码:

 

对FlatList的子Item进行封装,全部代码如下(其中一个组件的文件):

import React, { Component } from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';

export default class ListItem extends Component {
    state = {
        animatePress: new Animated.Value(1),
        animateItem: new Animated.Value(0)
    }

    animateIn() {
        Animated.timing(
            this.state.animatePress, {
                toValue: 0.8,
                duration: 200
            }
        ).start();
    }

    animateOut() {
        Animated.timing(this.state.animatePress, {
            toValue: 1,
            duration: 200
        }).start();
    }

    componentWillMount() {
        const { index } = this.props;
        const delay = index * 300
        Animated.timing(this.state.animateItem, {
            toValue: 1,
            duration: 1000,
            delay: delay
        }).start();
    }

    render() {
        const { text,index } = this.props;

        return (
             this.animateIn()}
                onPressOut={() => this.animateOut()}
                style={{
                    backgroundColor: "transparent",

                }}
            >
                
                    
                        {text}{index}
                    
                

            
        );

    }

}
复制代码

Animated使用中遇到的问题

FlatList横向排列,使用translateX参数,进行子item的入参动画,从屏幕外进入到相应的位置。开发完成后,发现在ios表现正常,但是在android中存在问题,子item不会从屏幕外进入,而是在item的原先位置进行展示,看图:

IOS正常表现:

g3vhq.gif

android异常表现:

l8tic.gif

这个问题被折磨了2天时间,网上各种查找资料都没有,后来在startoverflow上发现一个和我遇到同样问题的人,但是并没有得到解决,地址如下:StackOverFlow上有人遇到同样的错误

后来突然想到FlatList有个优化属性:getItemLayou,当我加入后,android端就表现正常了,对FlatList添加的代码如下:

          getItemLayout={(data, index) => (
                { length: 200, offset: 200 * index, index }
          )}
复制代码

getItemLayou的作用是为了不让FlatList在渲染过程中对内容尺寸做动态计算,在该方法中给予他设定的高度,但是使用它的前提是知道Item的宽高,如果item的宽高是固定的,使用这个方法就会大大优化列表性能,如果数据少,可能不明显,但是数据量大的时候就会表现比较明显。

加入这个方法能够解决这个问题,但是我不知道是什么原因导致的这样,而且这个方法我这样写动画也能渲染正常:

getItemLayout={(data, index) => (
    { length: 1, offset: 1 , index }
  )}
复制代码

所以这个地方很纠结,不过这个bug在最新的版本0.59.5中已近解决了,不需要使用getItemLayout也能正常播放动画。

    入场动画bug版本:
    0.59.4版本及之前的版本都存在此bug,不过在0.59.5版本中修复了该问题。在package.json中查看版本号:

            "react-native": "0.59.4",
            //该版本已修复入场动画的bug
            "react-native": "0.59.5"
复制代码

你可能感兴趣的:(ReactNative之FlatList-列表入场动画)