Moti动画库安装与配置指南

Moti动画库安装与配置指南

moti 🐼 The React Native (+ Web) animation library, powered by Reanimated 3. 项目地址: https://gitcode.com/gh_mirrors/mo/moti

前言

Moti是一个基于React Native的高性能动画库，它底层使用了Reanimated 3来实现跨平台（iOS、Android和Web）的流畅动画效果。本文将详细介绍如何在不同环境中安装和配置Moti，帮助开发者快速上手这个强大的动画工具。

环境准备

新项目初始化

对于全新项目，推荐使用预设模板快速搭建开发环境：

npx create-react-native-app -t with-moti

这个命令会创建一个已经配置好Moti的React Native项目，省去了手动配置的步骤。

核心依赖安装

安装Moti主包

根据你的包管理器选择以下命令之一：

使用yarn：

yarn add moti

使用npm：

npm i moti --legacy-peer-deps

安装Reanimated

Moti依赖于react-native-reanimated库，需要安装2.0.0或更高版本。以下是版本兼容性说明：

• Moti 0.17.x：需要Reanimated 2.3.0+（兼容Expo SDK 44）
• Moti 0.16.x：兼容Reanimated 2.2.0（兼容Expo SDK 43）
• Moti 0.8.x+：需要Reanimated 2.0.0+（兼容Expo SDK 41+）

Expo项目安装

Expo用户请按照Expo官方文档安装react-native-reanimated。

非Expo项目安装

请遵循Reanimated官方安装指南进行安装。

基础配置

在应用的入口文件（通常是App.tsx）顶部添加以下导入：

import 'react-native-reanimated'
import 'react-native-gesture-handler'

注意：如果你使用Next.js或Solito框架，不要将这些导入添加到_app.tsx中。

平台特定配置

Web支持

Moti提供了对Web平台的良好支持，针对不同框架有特定的配置要求：

1. Expo Web：需要额外配置
2. Next.js：有专门的集成方案
3. React Native Web：需要特定设置

Hermes引擎兼容性

从Moti 0.22.0版本开始，正式支持Hermes引擎，并已在React Native 0.70+环境中测试通过。

旧版本Hermes解决方案

如果你使用较旧版本的React Native和Hermes，可能会遇到Proxy不支持的问题：

• React Native 0.63.x：安装hermes-engine@v0.5.2-rc1
• React Native 0.64.x：升级Hermes到0.7.*

常见错误："Property 'Proxy' doesn't exist"通常是由于Hermes版本不兼容导致的。

创建第一个动画

下面是一个简单的渐显动画组件示例：

import { MotiView } from 'moti'

export const FadeIn = () => (
  <MotiView
    from={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ type: 'timing' }}
  />
)

这个组件会在原生线程上以60FPS的帧率执行淡入动画，保证了流畅的性能表现。

结语

通过以上步骤，你已经成功配置好了Moti动画库的开发环境。Moti提供了简单直观的API，让开发者能够轻松创建高性能的跨平台动画效果。建议从简单的动画开始，逐步探索Moti提供的各种强大功能。

moti 🐼 The React Native (+ Web) animation library, powered by Reanimated 3. 项目地址: https://gitcode.com/gh_mirrors/mo/moti