Legend Motion 使用教程

Legend Motion 使用教程

legend-motionLegend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.项目地址:https://gitcode.com/gh_mirrors/le/legend-motion

项目介绍

Legend Motion 是一个为 React Native 设计的声明式动画库，旨在简化样式之间的过渡，无需管理动画。它支持 React Native 和 React Native Web，API 类似于 Framer Motion，使得在 React Native 中混合使用变得容易。此外，它还支持动画 SVG 和线性渐变，具有高性能和 TypeScript 强类型支持。

项目快速启动

安装

你可以通过 npm 或 yarn 安装 Legend Motion：

npm install @legendapp/motion
# 或者
yarn add @legendapp/motion

基本使用

以下是一个简单的示例，展示如何在 React Native 中使用 Legend Motion：

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import { Motion } from '@legendapp/motion';

const App = () => {
  const [value, setValue] = useState(0);

  return (
    <View>
      <Motion.View
        initial={{ y: -50 }}
        animate={{ x: value * 100, y: 0 }}
        whileHover={{ scale: 1.2 }}
        whileTap={{ y: 20 }}
        transition={{ type: 'spring' }}
        onPress={() => setValue(value + 1)}
      >
        <Text>点击我</Text>
      </Motion.View>
    </View>
  );
};

export default App;

应用案例和最佳实践

案例1：交互式按钮

使用 whileHover 和 whileTap 属性创建一个交互式按钮：

<Motion.View
  whileHover={{ scale: 1.2 }}
  whileTap={{ scale: 0.9 }}
  style={{ width: 100, height: 100, backgroundColor: 'blue' }}
>
  <Text style={{ color: 'white' }}>按钮</Text>
</Motion.View>

案例2：退出动画

使用 AnimatePresence 组件实现退出动画：

import { AnimatePresence } from '@legendapp/motion';

<AnimatePresence>
  {visible && (
    <Motion.View
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      style={{ width: 100, height: 100, backgroundColor: 'red' }}
    />
  )}
</AnimatePresence>

典型生态项目

React Native Web

Legend Motion 支持 React Native Web，使得你可以在 Web 平台上使用相同的动画库：

import { Motion } from '@legendapp/motion';

<Motion.View
  initial={{ y: -50 }}
  animate={{ y: 0 }}
  whileHover={{ scale: 1.2 }}
  whileTap={{ y: 20 }}
  transition={{ type: 'spring' }}
>
  <Text>Web 上的动画</Text>
</Motion.View>

Framer Motion

如果你熟悉 Framer Motion，你可以轻松地将 Legend Motion 集成到你的 React Native 项目中，因为它们的 API 非常相似。

import { Motion } from '@legendapp/motion';

<Motion.View
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 1 }}
>
  <Text>Framer Motion 风格的动画</Text>
</Motion.View>

通过以上教程，你应该能够快速上手并使用 Legend Motion 在 React Native 项目中实现各种动画效果。

legend-motionLegend Motion is a declarative animations library for React Native, to make it easy to transition between styles without needing to manage animations.项目地址:https://gitcode.com/gh_mirrors/le/legend-motion