诞生背景

随着 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 (
    <View style={styles.container}>
      <AnimatePresence initial={false} custom={direction}>
        <MotiImage
          from={{
            opacity: 0,
            translateX: direction * width,
          }}
          animate={{
            opacity: 1,
            translateX: 0,
            zIndex: 1,
          }}
          exit={(custom) => {
            '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' },
          }}
        />
      </AnimatePresence>
      <View style={styles.actions}>
        <Text selectable={false} style={styles.button} onPress={paginate(-1)}>
          
        </Text>
        <Text selectable={false} style={styles.button} onPress={paginate(1)}>
          
        </Text>
      </View>
    </View>
  );
}


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%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=929&q=80`,
  `https://images.unsplash.com/photo-1530447920184-b88c8872?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTN8fHJvY2tldHxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60`,
  `https://images.unsplash.com/photo-1581069700310-8cf2e1b6baf0?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MjF8fHJvY2tldHxlbnwwfHwwfA%3D%3D&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 也一直关注着Reanimated项目的发展，有新的改进和更新，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 动画领域保持领先地位，为开发者提供更高效、更强大的动画工具，助力打造更加出色的用户体验。