[移动开发]reactnative动画——layoutAnimation讲解

小站本文链接：http://www.heblogs.cn/articleDetails/61205d3327acc660b0683031

react native 中有两种动画
一是 AnimationView 一是layoutAnimation
这里讲下layoutAnimation

1.LayoutAnimation

LayoutAnimation允许你在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行。它常用来更新 flexbox 布局，因为它可以无需测量或者计算特定属性就能直接产生动画。
如果在Android上使用 LayoutAnimation，那么目前还需要在UIManager中启用

// 在执行任何动画代码之前，比如在入口文件App.js中执行
import { UIManager,LayoutAnimation } from 'react-native';

if (Platform.OS === 'android') {
  if (UIManager.setLayoutAnimationEnabledExperimental) {
    UIManager.setLayoutAnimationEnabledExperimental(true);
  }
}

第一种方法：直接快捷使用LayoutAnimation动画类型

componentWillUpdate() {
  console.log('componentWillUpdate...');
  LayoutAnimation.spring();//弹簧.
  LayoutAnimation.linear();//线性动画
  LayoutAnimation.easeInEaseOut();//缓入缓出
  LayoutAnimation.easeIn();//缓入
  LayoutAnimation.easeOut();//缓出
}

第二种方法：LayoutAnimation.configureNext(config)，自定义动画效果

componentWillUpdate() {
  console.log('componentWillUpdate...');
  LayoutAnimation.configureNext(config)
}

自定义config

var config = {
    duration: 800, // 动画时间
    create: {//配置创建新视图时的动画。（参阅Anim类型）
      type: LayoutAnimation.Types.linear,//动画类型 参考以上第一种方法
      property: LayoutAnimation.Properties.opacity,// opacity,scaleXY 透明度，位移
    },
    update: {// 更新时显示的动画
      type: LayoutAnimation.Types.easeInEaseOut,
    },
  };

官方示例动画

import React, { useState } from "react";
import { LayoutAnimation, Platform, StyleSheet, Text, TouchableOpacity, UIManager, View } from "react-native";

if (
  Platform.OS === "android" &&
  UIManager.setLayoutAnimationEnabledExperimental
) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}
const App = () => {
  const [expanded, setExpanded] = useState(false);

  return (
    <View style={style.container}>
      <TouchableOpacity
        onPress={() => {
          LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
          setExpanded(!expanded);
        }}
      >
        <Text>Press me to {expanded ? "collapse" : "expand"}!</Text>
      </TouchableOpacity>
      {expanded && (
        <View style={style.tile}>
          <Text>I disappear sometimes!</Text>
        </View>
      )}
    </View>
  );
};

const style = StyleSheet.create({
  tile: {
    background: "lightGrey",
    borderWidth: 0.5,
    borderColor: "#d6d7da"
  },
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    overflow: "hidden"
  }
});

export default App;