React Native之LayoutAnimation

React native API之LayoutAnimation

1、LayoutAnimation

react-native动画系统

• Animated 用于创建精细的交互控制动画
• LayoutAnimation 用于全局的布局动画

LayoutAnimation

LayoutAnimation当布局变化时，自动将视图运动到它们新的位置上，允许你在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行。它常用来更新 flexbox 布局，因为它可以无需测量或者计算特定属性就能直接产生动画。
注意如果要在Android上使用此动画，则需要在代码中启用

import { UIManager } from 'react-native';

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

configureNext()

static configureNext(config, onAnimationDidEnd?, onAnimationDidFail?)

config: 动画的相应的属性
onAnimationDidEnd: 动画结束的时候调用
onAnimationDidFail: 动画产生错误时被调用

一个标准的config格式如下

const anima={//创建一个 LayoutAnimation.configureNext的config属性。
  duration:1000,
  create:{//创建
    type:LayoutAnimation.Types.linear,//类型为线性
    property:LayoutAnimation.Properties.opacity,//方式为缩放
  },
  update:{//更新
    type:'linear',
    springDamping: 0.4,
  }

duration：动画持续时间（单位：毫秒）,会覆盖 config 中设置的 duration。
delay：延迟指定时间（单位：毫秒）。
springDamping：弹跳动画阻尼系数（配合 spring 使用）。
initialVelocity：初始速度。

type：类型定义在LayoutAnimation.Types中：
spring：弹跳
linear：线性
easeInEaseOut：缓入缓出
easeIn：缓入
easeOut：缓出

property：类型定义在LayoutAnimation.Properties中：
opacity：透明度
scaleXY：缩放
scaleX: 延X轴
scaleY: 延Y轴

import React, { useState } from "react";
import {
  View,
  Platform,
  UIManager,
  LayoutAnimation,
  StyleSheet,
  Button, Text, ScrollView, StatusBar,Dimensions
} from "react-native";

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

const App = () => {
  const [firstBoxPosition, setFirstBoxPosition] = useState("left");
  const [secondBoxPosition, setSecondBoxPosition] = useState("left");
  const [thirdBoxPosition, setThirdBoxPosition] = useState("left");
  const [fourBox, setFourBox] = useState(false);
  const [fiveBox, setFiveBox] = useState(true);
  const [fiveBoxLeft, setFiveBoxLeft] = useState(10);

  const [sixBox, setSixBox] = useState(false);

  const toggleFirstBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setFirstBoxPosition(firstBoxPosition === "left" ? "right" : "left");
  };

  const toggleSecondBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
    setSecondBoxPosition(secondBoxPosition === "left" ? "right" : "left");
  };

  const toggleThirdBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setThirdBoxPosition(thirdBoxPosition === "left" ? "right" : "left");
  };

  const toggleFourBox = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setFourBox(!fourBox);
  }
  const fiveAnima={//创建一个 LayoutAnimation.configureNext的config属性。
    duration:1000,
    create:{//创建
      type:LayoutAnimation.Types.linear,//类型为线性
      property:LayoutAnimation.Properties.opacity,//方式为缩放
    },
    update:{//更新
      type:'spring',
      springDamping: 0.4,
    }
  };
  const toggleFiveBox = () => {
    LayoutAnimation.configureNext(fiveAnima, () => {
      //alert('动画结束')
    })
  //setFiveBox(!fiveBox);
    setFiveBoxLeft(fiveBoxLeft+10);
  }

  const sixAnima={//创建一个 LayoutAnimation.configureNext的config属性。
    duration:1000,
    create:{//创建
      type:LayoutAnimation.Types.linear,//类型为线性
      property:LayoutAnimation.Properties.scaleX,//方式为缩放
    },
    update:{//更新
      type:'spring',
      springDamping: 0.4,
    }
  };
  const toggleSixBox = () => {
    LayoutAnimation.configureNext(sixAnima, () => {
      //alert('动画结束')
    })
    setSixBox(!sixBox);
    //setFiveBoxLeft(fiveBoxLeft+10);
  }

  return (
    <ScrollView style={styles.container}>

      <View style={styles.buttonContainer}>
        <Button title="EaseInEaseOut" onPress={toggleFirstBox} />
      </View>

      <View
        style={[
          styles.box,
          firstBoxPosition === "left" ? null : styles.moveRight
        ]}
      />

      <View style={styles.buttonContainer}>
        <Button title="Linear" onPress={toggleSecondBox} />
      </View>

      <View
        style={[
          styles.box,
          secondBoxPosition === "left" ? null : styles.moveRight
        ]}
      />

      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleThirdBox} />
      </View>

      <View
        style={[
          styles.box,
          thirdBoxPosition === "left" ? null : styles.moveRight
        ]}
      />

      <View style={styles.buttonContainer}>
        <Button title="Spring" onPress={toggleFourBox} />
      </View>

      {fourBox && (
        <View style={styles.tile}>
          <Text>I disappear sometimes!</Text>
        </View>
      )}

      <View style={styles.buttonContainer}>
        <Button title="btn6" onPress={toggleSixBox} />
      </View>

      {sixBox && (
        <View style={styles.fiveBoxStyle}/>
      )}

      <View style={styles.buttonContainer}>
        <Button title="btn5" onPress={toggleFiveBox} />
      </View>

      {fiveBox && (
        <View style={[styles.fiveBoxStyle,{left: fiveBoxLeft}]}/>
      )}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: StatusBar.currentHeight,
    marginHorizontal: 20,
    paddingVertical: 30
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
  moveRight: {
    alignSelf: "flex-end"
  },
  buttonContainer: {
    alignSelf: "center",
    marginVertical: 20,
  },
  tile: {
    background: "lightGrey",
    borderWidth: 0.5,
    borderColor: "#d6d7da",
    height: 40,
    backgroundColor:'blue'
  },
  fiveBoxStyle: {
    height: 100,
    width: 100,
    borderRadius: 5,
    margin: 8,
    backgroundColor: "blue"
  },
});

export default App;