RN - 世人皆知Animated，无人知晓LayoutAnimation

前言

话说在RN行当里，提起Animated谁人不知谁人不晓。对他而言，任何的翻转腾挪，简直是信手拈来。但，咱本篇的主角不是他，而是一直隐藏在Anmiated光环下的LayoutAnimation。

需求背景

从第一种状态到第二种状态的切换有如下两个动效要求：

1. 提示部分渐显
2. 标题部分，要弹性上移
3. 文字部分在绿色容器中始终保持居中

Animated方案

该方案有个比较棘手的问题就是必须知道动画的起点与终点。

起点算法：绿色部分的纵向布局我设置成flex-start，然后算出绿色部分的中间位置greenCenterY和标题部分的高titleH，greenCenterY - titleH/2即可得出动画起点

终点算法：在渲染第一种状态时，也将第二种状态渲染出来(但不显示)，然后用起点的算法算出对应动画终点。

有起点和终点，便不愁动画，但该方案有两个问题：

1. 为了内容居中，要算元素的位置，我的例子中只有两个元素，要是有多个呢，想想都头疼
2. 多余的渲染，毕竟要将第二种状态提前渲染出来

LayoutAnimation

上面为动画要做的种种操作，都化为如下一句代码：

LayoutAnimation.spring();

我在附上完整的代码

function Card() {
     
    const [ isShowTip, setIsShowTip ] = useState(false);

	return (
		<View>
			<View  style={{ justifyContent: "center", alignItems: "center" }}>
				<View>
					<Text>打工人</Text>
				</View>
				{isShowTip ? (
				    <Text>上班族的自嘲；六分调笑，三分自嘲，再加一份的荒谬</Text>
				) : null}
			</View>
			
			<Button 
			    title="提示" 
				onPress={() => {
				    /* ***************撒花开始********************* */
					LayoutAnimation.spring();
				    /* ***************撒花结束********************* */
					setIsShowTip(true);
				}/>
		</View>
	)
}

当时我搞完以后，心中万头那啥瞬间奔驰而过。至于LayoutAnimation的更多动画类型及API，建议移步官方文档。

小坑

在我上面写的代码中，title部分我没有直接使用Text，而是用View组件又包装了一层。这是因为如果不包装，Tex会直接显示在最终位置，不会有动画效果。至于为啥，还没做深入研究。