React Flight 使用教程

1. 项目介绍

React Flight 是一个用于构建 React 动画组合的开源项目。它旨在为 React 提供一种快速、无摩擦的方式来设计和组合动画，类似于 Sketch 中的 Principle 工具。React Flight 允许开发者从一个组件开始，到另一个组件结束，自动生成中间的动画过渡效果。

项目地址：https://github.com/jondot/react-flight

2. 项目快速启动

2.1 从零开始

首先，克隆项目并使用示例代码快速启动：

$ git clone https://github.com/jondot/react-flight
$ cd react-flight/examples/compos
$ yarn && yarn start

2.2 在现有项目中使用

在现有项目中安装 React Flight：

$ yarn add react-flight

然后，下载示例代码并将其放置在项目中：

$ curl https://raw.githubusercontent.com/jondot/react-flight/master/examples/compos/src/index.js -o src/anim.js

接下来，在任何 React 组件中引入并使用 anim.js：

import React from 'react';
import Flight from 'react-flight';
import anim from './anim';

function MyComponent() {
  return (
    <Flight interactive ref={flight => (this.flight = flight)}>
      {anim}
    </Flight>
  );
}

export default MyComponent;

3. 应用案例和最佳实践

3.1 设计动画组合

在设计动画组合时，重点关注设计帧。第一帧标记为 source，表示起始点，并设置为 interactive，以便在设计过程中进行交互。

<Flight interactive ref={flight => (this.flight = flight)}>
  <Flight.Frame duration={300} source interactive showFrames>
    {/* 起始帧内容 */}
  </Flight.Frame>
  <Flight.Frame>
    {/* 结束帧内容 */}
  </Flight.Frame>
</Flight>

3.2 控制动画

通过 ref 获取 Flight 实例后，可以手动控制动画的播放和重置：

<Flight interactive ref={flight => (this.flight = flight)}>
  <Flight.Frame duration={300} source interactive showFrames>
    {/* 起始帧内容 */}
  </Flight.Frame>
  <Flight.Frame>
    {/* 结束帧内容 */}
  </Flight.Frame>
</Flight>

在其他组件或操作中，可以通过 this.flight.play() 和 this.flight.reset() 来控制动画。

4. 典型生态项目

4.1 Redux 支持

React Flight 提供了对 Redux 的基本支持。虽然它不会处理复杂的 Redux 状态渲染，但可以通过以下方式启用 Redux 支持：

Flight.contextTypes = {
  store: PropTypes.object
};

Flight.childContextTypes = {
  store: PropTypes.object
};

4.2 自定义动画引擎

React Flight 的底层使用了 Velocity.js 进行动画处理。开发者可以自定义动画引擎，替换默认的 DOM 适配器，以支持其他动画库或 React Native 等平台。

通过以上步骤，您可以快速上手并使用 React Flight 构建复杂的动画组合。