Vue中的一个动画库 vue-motion

GitHub地址

github.com/posva/vue-m…

文档

posva.net/vue-motion/…

安装

npm install --save vue-motion

在main.js引入

import Vue from 'vue'

import VueMotion from 'vue-motion';

Vue.use(VueMotion);

组件中引入：

import { Motion } from 'vue-motion'

export default {
  components: {
    MyMotion: Motion
  }
}

Motion 组件的属性（Props）

Motion 组件有一些常用的属性，可以帮助你定制动画行为。

属性	类型	必填	默认值	描述
value	Number	是	-	过渡的单一值。只在 values 属性未提供时使用。
values	Object 或 Array	是	-	过渡的多个值。只在 value 属性未提供时使用。
tag	String	否	"span"	定义容器元素的标签。
spring	Object 或 String	否	"noWobble"	定义过渡的弹簧行为。

Motion 组件的事件（Events）

Motion 组件也提供了几个事件，帮助你处理过渡的生命周期。

• motion-start: 当新的过渡开始时触发。
• motion-end: 当过渡完成时触发。
• motion-restart: 当过渡因帧率过低或其他原因被重启时触发。

弹簧（Springs）

Vue Motion 使用弹簧物理引擎来过渡值。

弹簧的行为由两个参数控制：stiffness（刚性）和 damping（阻尼）。通过这些参数，你可以控制动画的流畅度和弹性。

以下是一些常用的预定义弹簧：

名称	刚性 (Stiffness)	阻尼 (Damping)
noWobble	170	26
gentle	120	14
wobbly	180	12
stiff	210	20

示例：