摘要：随着 react Native 在混合开发中的广泛应用，越来越多的公司选择 React Native 作为多端应用开发工具。性能和强大的生态是 React Native 的两大优势。在动画方面，Reanimated 是一个强大的组件库，不仅性能优秀，还能处理各
随着 react Native 在混合开发中的广泛应用，越来越多的公司选择 React Native 作为多端应用开发工具。性能和强大的生态是 React Native 的两大优势。在动画方面，Reanimated 是一个强大的组件库，不仅性能优秀，还能处理各种复杂的动画。然而，Reanimated 3 的 API 和配置相对复杂，对于初学者来说有一定的学习曲线。为了简化动画的创建过程，同时保持高性能和跨平台兼容性，Moti 应运而生。Moti 是一个基于 Reanimated 3 的动画库，不仅继承了 Reanimated 3 的优秀性能，还提供了更加直观和简洁的 API，使得动画的创建更加方便顺手。
简洁易用的 API
Moti 提供了声明式的动画定义方式，开发者只需简单地描述动画的起始和结束状态，无需深入理解复杂的动画逻辑，降低了学习成本。创建动画更加直观和便捷。
丰富的动画功能
Moti 支持组件挂载和卸载时的动画效果，与 framer-motion 类似，这为构建复杂动态界面提供了更加方便的使用方式。
跨平台支持：
Moti 内置了对 Web 的支持，无需额外配置即可在浏览器环境中无缝运行。这样在开发的过程中非常方便，集成调试也变得更加方便。
高性能表现
Moti 基于 Reanimated 3，所有动画都在原生线程中以 60 FPS 运行，确保平滑无延迟。
通过包管理工具yarn等就可以轻松安装。 yarn add moti 。
当然你可以通过React脚手架制定模板来使用 npx create-react-native-app -t with-moti。
下面是一个简单的Moti使用案例，复制到编辑器中，运行yarn start就可以看到效果。
import { MotiImage, AnimatePresence, Text } from 'moti';import React, { useState } from 'react';import { StyleSheet, View, useWindowDimensions } from 'react-native';import { wrap } from 'popmotion';export default function Gallery { const { width } = useWindowDimensions; const [[index, direction], setState] = useState([0, 0]); const paginate = (direction: 1 | -1) => => { setState(([index]) => { return [index + direction, direction]; }); }; const url = photos[wrap(0, photos.length, index)]; return ( { 'worklet'; return { opacity: 0, translateX: custom * width * -1, zIndex: 0, }; }} style={[styles.image, { width }]} key={index} source={{ uri: url }} transition={{ translateX: { type: 'spring', stiffness: 300, damping: 30 }, opacity: { duration: 200, type: 'timing' }, }} /> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', backgroundColor: '#0D1117', }, padded: { padding: 16, }, image: { ...StyleSheet.absoluteFillObject, alignSelf: 'center', }, actions: { flexDirection: 'row', margin: 16, justifyContent: 'space-between', zIndex: 1, }, button: { fontSize: 42, backgroundColor: 'white', height: 75, width: 75, borderRadius: 100, alignItems: 'center', justifyContent: 'center', textAlign: 'center', lineHeight: 75, }, action: {},});const photos = [ `https://images.unsplash.com/photo-1551871812-10ecc21ffa2f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&ixlib=rb-1.2.1&auto=format&fit=crop&w=929&q=80`, `https://images.unsplash.com/photo-1530447920184-b88c8872?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fHJvY2tldHxlbnwwfHwwfA==&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60`, `https://images.unsplash.com/photo-1581069700310-8cf2e1b6baf0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fHJvY2tldHxlbnwwfHwwfA==&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60`, `https://images.unsplash.com/photo-1562802378-063ec186a863?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTJ8fHN1c2hpfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60`,];Moti未来会在保持API的一致性，让用户操作编写动画更加的简洁和方便。
此外，对于性能的追求一直是Moti在做的，未来还会持续优化动画性能，让各种设备都能流畅运行动画是Moti一直所追求的。
Moti的愿景就是让每个react native用户都能轻松地使用到动画效果，让特效的使用不再复杂。
最后，Moti会与 React Native 的其他生态项目深度集成，如 React Navigation、Expo 等，提供更丰富的动画效果。支持与设计工具的无缝对接，如 Adobe After Effects，通过 Bodymovin 插件导出的 JSON 文件直接在 Moti 中使用。
Moti 作为基于 Reanimated 3 的动画库，不仅继承了 Reanimated 3 的优秀性能，还提供了更加直观和简洁的 API，使得动画的创建更加方便顺手。随着其不断发展和完善，Moti 将继续在 React Native 动画领域保持领先地位，为开发者提供更高效、更强大的动画工具，助力打造更加出色的用户体验。
来源：梦回故里归来
