Motion for Vue 入门

Motion for Vue 是一个简单而无限的动画库。它是唯一拥有混合引擎的动画库，能够实现硬件加速动画。

在本指南中，我们将学习如何安装 Motion Vue，并快速浏览其主要功能。

安装

Motion 可通过 npm 获取

npm install motion-v

Nuxt 模块

Motion Vue 提供 Nuxt 模块支持。

在 nuxt.config.ts 中，只需将 motion-v/nuxt 添加到模块中，它将为您自动导入所有组件。

export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})

unplugin-vue-components

Motion for Vue 也支持unplugin-vue-components自动导入来自 motion-v 的所有组件

import Components from 'unplugin-vue-components/vite'
import MotionResolver from 'motion-v/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [
        MotionResolver()
      ],
    }),
  ],
})

注意：自动导入目前不支持<motion /> 组件因此您需要手动导入它。

注意：Motion for Vue 包含专门为 Vue 定制的 API，但来自原生 Motion的每个功能也兼容并可用于高级用例。

用法

Motion for Vue 的核心是这个<motion />组件。它是一个普通的 DOM 元素，但具有强大的动画功能。

<template>
  <motion.div />
</template>

为 motion 组件添加动画与通过 animate 属性设置值一样简单

<motion.ul :animate="{ rotate: 360 }" />

当 animate 中的值更改时，组件将产生动画。Motion 具有非常棒的默认设置，但动画当然可以通过这个transition属性.

<motion.div
  :animate="{
    scale: 2,
    transition: { duration: 2 }
  }"
/>

进行配置。进入动画

当组件进入页面时，它将自动从渲染值开始动画，但您可以通过 initial 属性提供不同的值。

<motion.button :initial="{ scale: 0 }" :animate="{ scale: 1 }" />

或者通过将 initial 设置为 false 来完全禁用此初始动画。

<motion.button :initial="false" :animate="{ scale: 1 }" />

手势

<motion /> 使用强大的手势识别器扩展了 Vue 的事件系统。它目前支持悬停、按下、焦点和拖动手势。

<motion.button
  :whileHover="{ scale: 1.1 }"
  :whilePress="{ scale: 0.95 }"
  @hoverStart="() => console.log('hover started!')"
/>

Motion 的手势设计得比单独使用 CSS 感觉更好。例如，悬停事件不会被触摸屏点击错误地触发。了解更多关于手势的信息.

滚动动画

Motion 支持两种类型的滚动动画：滚动触发和滚动链接。

要在滚动时触发动画，whileInView 属性定义了当元素进入/离开视口时要动画到/从哪个状态

<motion.div
  :initial="{ backgroundColor: 'rgb(0, 255, 0)', opacity: 0 }"
  :whileInView="{ backgroundColor: 'rgb(255, 0, 0)', opacity: 1 }"
/>

而要将值直接链接到滚动位置，可以使用 MotionValue，通过 useScroll。

<script setup >
  const { scrollYProgress } = useScroll()
</script>

<template>
  <motion.div :style="{ scaleX: scrollYProgress }" />
</template>

了解更多关于 Motion 的滚动动画。

布局动画

Motion 拥有行业领先的布局动画引擎，它支持在布局更改之间进行动画，仅使用变换，在相同或不同的元素之间，并具有完整的比例校正。

只需应用 layout 属性即可轻松实现。

<motion.div layout />

或者要在不同元素之间进行动画，可以使用 layoutId

<motion.div layoutId="underline" />

了解更多了解更多关于布局动画的信息。

退出动画

通过用 <AnimatePresence> 包裹 motion 组件，我们可以访问 exit 属性。

<AnimatePresence>
  <motion.div v-if="show" key="box" :exit="{ opacity: 0 }" />
</AnimatePresence>

了解更多了解更多关于 AnimatePresence 的信息。

下一步学习

这是 Motion for Vue 基本功能的快速概览。但还有很多东西要学习！

接下来，我们建议深入研究这个<motion />组件以了解更多关于其强大功能的信息，例如变体。

或者，您可以直接深入我们的示例，每个示例都附带完整的源代码，您可以复制/粘贴到您的项目中。