18、React Native 动画实战：构建滑块拼图游戏

React Native 动画实战：构建滑块拼图游戏

1. 动画概述

在屏幕上为组件添加动画，通常是随时间连续更新其大小、位置、颜色或其他样式属性。动画常用于模拟现实世界的运动，或构建类似于常见物理对象的交互性。在一些应用中，已经有动画的例子，如天气应用中 KeyboardAvoidingView 会收缩以适应键盘空间，消息应用中使用 LayoutAnimation API 实现类似的键盘相关动画，联系人应用中使用 react - navigation 自动协调屏幕间的过渡动画。

1.1 动画挑战

1.1.1 性能挑战

为实现流畅的动画，UI 需要以每秒 60 帧（fps）的速度渲染，即大约每 16 毫秒渲染一帧。若在单帧内进行耗时超过 16 毫秒的昂贵计算，动画可能会变得卡顿不平滑。性能问题主要分为以下几类：
- 动画期间计算新布局 ：当更改影响组件大小或位置的样式属性时，React Native 通常会重新计算整个 UI 布局。此计算在原生线程上进行，但仍很耗时，可能导致动画卡顿。可通过对组件的 transform 样式属性进行动画处理来避免。
- 重新渲染组件 ：当组件的状态或属性改变时，React 需确定如何协调这些更改并更新 UI。默认情况下 React 效率较高，但在动画场景中，渲染耗时几毫秒的大型组件可能导致动画卡顿。可使用 shouldComponentUpdate 减少重新渲染，以实现更平滑的