motion-v动画库

vue3 之前，react的生态更完善。vue3的工具链正在逐步完善，更加强大。

motion-v 基于 Framer Motion 实现的一套 Vue 动画库, 可以说目前最好的 vue 动画库。 正如一些好的工具一样（vite, pinia），可以统治一个领域,成为一个问题的标准处理方法。

官网

1.安装

• 安装

npm install motion-v

• 使用

<script setup>
import { motion } from "motion-v"
</script>

2.基础使用

核心

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

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

添加动画

通过为 motion 组件添加动画，设置属性 即可。

<script setup>
import { motion } from "motion-v"
</script>

<template>
    <motion.div
        class="box"
        :animate="{ rotate: 360 }"
        :transition="{ duration: 1 }"
    />
</template>

<style>
.box {
    width: 100px;
    height: 100px;
    background-color: #0cdcf7;
    border-radius: 5px;
}
</style>

3.属性

3.1 动画

• initial 组件的初始视觉状态
• animate 进入和更新时要动画到的目标
• exit 当组件从树中移除时要动画到的目标。
• transition 当动画属性（animate、whileHover 等）没有定义 transition 时，此组件要使用的默认过渡。

3.2 style

• style 普通的 Vue DOM style 属性，增加了对motion values（Motion 值）和独立变换的支持。

3.3 回调

• update 当 motion 组件上的任何值更新时，每帧触发的回调。它提供一个参数，其中包含最新的值。
• animationStart 当动画开始时触发的回调。
• animationComplete 当动画完成时触发的回调。

使用方法

<template>
    <motion.div
        class="box"
        :animate="{ rotate: 360 }"
        :transition="{ duration: 1 }"
        @animationComplete="handleComplete"
    />
</template>

<script setup>
import { motion } from "motion-v"

const handleComplete = () => {
    console.log('动画完成')
}
</script>

3.4 鼠标事件

示例

<motion.button :whilePress="{ scale: 0.9 }" />

• Hover（悬停）
• Focus（焦点）
• Press（按下）链接
• Pan（平移）链接
• Drag（拖动）

3.5 Viewport（视口）

例如用于滚动的动画展示

3.6 布局