vue.js 组件交互_使用Vue.js创建交互式动画

vue.js 组件交互

视觉运动 (vue-kinesis)

Easy to use Vue.js components for creating interactive animations.

易于使用的Vue.js组件可用于创建交互式动画。

View demo 查看演示 View Github 查看Github

安装 (Installation)

npm install --save vue-kinesis

默认导入 (Default import)

Install all the components:

安装所有组件：

import Vue from 'vue'
import VueKinesis from 'vue-kinesis'

Vue.use(VueKinesis)

Use specific components:

使用特定的组件：

import Vue from 'vue'
import { KinesisContainer, KinesisElement } from 'vue-kinesis'

Vue.component('kinesis-container', KinesisContainer)
Vue.component('kinesis-element', KinesisElement)

浏览器 (Browser)

用法 (Usage)

How to use

如何使用

道具 (Props)

运动容器 (kinesis-container)

Prop	Type	Default Value	Description
active	Boolean	true	To enable or disable the interactions
duration	Number	1000	Speed of the parallax animation in ms
easing	String	"cubic-bezier(0.23, 1, 0.32, 1)"	Easing of the parallax animation
tag	String	div	Takes any valid html tag
event	String	"move"	Event to which the container will react. Possible values are "move" and "scroll"
perspective	Number	1000	Effective for the 'depth' parallax type
audio	String		Path towards an audio file
playAudio	Boolean		Start/Stop the attached audio file

Struts	类型	默认值	描述
活性	布尔型	真正	启用或禁用交互
持续时间	数	1000	视差动画的速度(毫秒)
缓和	串	“立方贝塞尔曲线(0.23，1，0.32，1)”	视差动画的缓和
标签	串	div	接受任何有效的html标签
事件	串	“移动”	容器将对其作出React的事件。 可能的值为“ move”和“ scroll”
透视	数	1000	对“深度”视差类型有效
音讯	串		音频文件的路径
playAudio	布尔型		开始/停止附加的音频文件

运动学元素 (kinesis-element)

Prop	Type	Default Value	Description
strength	Number	10	Strength of the motion effect
type	String	"translate"	translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tag	String	"div"	Takes any valid html tag
transformOrigin	String	"center"	Similar to the CSS transform-origin property
originX	Number	50	The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side.
originY	Number	50	The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side.
axis	String	null	Constrain the movement to one axis. Possible values: "x" - "y"
maxX	Number	null	Limit the maximum range of the movement on the X axis
maxY	Number	null	Limit the maximum range of the movement on the Y axis
minX	Number	null	Limit the minimum range of the movement on the X axis
minY	Number	null	Limit the minimum range of the movement on the Y axis
cycle	Number	0	How many times the movement will repeat

Struts	类型	默认值	描述
强度	数	10	运动效果的强度
类型	串	“翻译”	平移-旋转-缩放-scaleX-scaleY-深度-depth_inv
标签	串	“ div”	接受任何有效的html标签
transformOrigin	串	“中央”	类似于CSS transform-origin属性
OriginX	数	50	X轴上相对于容器的运动原点。 50是容器的中心，0是左侧，100是右侧。
起源	数	50	动作的原点相对于容器，在Y轴上。 50是容器的中心，0是顶部，100是底部。
轴	串	空值	将运动限制在一个轴上。 可能的值：“ x”-“ y”
最大X	数	空值	限制X轴上最大移动范围
最大	数	空值	限制Y轴上的最大移动范围
minX	数	空值	限制X轴上移动的最小范围
最小	数	空值	限制Y轴上运动的最小范围
周期	数	0	运动将重复多少次

运动音频 (kinesis-audio)

Prop	Type	Default Value	Description
audioIndex	Number	50	To which frequency to react, on a range of integer values that goes from 0 to 127.
strength	Number	10	Strength of the motion effect
type	String	"translate"	translate - rotate - scale - scaleX - scaleY - depth - depth_inv
tag	String	"div"	Takes any valid html tag
transformOrigin	String	"center"	Similar to the CSS transform-origin property
originX	Number	50	The motion's origin relative to the container, on the X axis. 50 being the center of the container, 0 the left side, 100 the right side.
originY	Number	50	The motion's origin relative to the container, on the Y axis. 50 being the center of the container, 0 the top side, 100 the bottom side.
axis	String	null	Constrain the movement to one axis. Possible values: "x" - "y"
maxX	Number	null	Limit the maximum range of the movement on the X axis
maxY	Number	null	Limit the maximum range of the movement on the Y axis
minX	Number	null	Limit the minimum range of the movement on the X axis
minY	Number	null	Limit the minimum range of the movement on the Y axis
cycle	Number	0	How many times the movement will repeat

Struts	类型	默认值	描述
audioIndex	数	50	从0到127的整数值范围内的React频率。
强度	数	10	运动效果的强度
类型	串	“翻译”	平移-旋转-缩放-scaleX-scaleY-深度-depth_inv
标签	串	“ div”	接受任何有效的html标签
transformOrigin	串	“中央”	类似于CSS transform-origin属性
OriginX	数	50	X轴上相对于容器的运动原点。 50是容器的中心，0是左侧，100是右侧。
起源	数	50	动作的原点相对于容器，在Y轴上。 50是容器的中心，0是顶部，100是底部。
轴	串	空值	将运动限制在一个轴上。 可能的值：“ x”-“ y”
最大X	数	空值	限制X轴上最大移动范围
最大	数	空值	限制Y轴上的最大移动范围
minX	数	空值	限制X轴上移动的最小范围
最小	数	空值	限制Y轴上运动的最小范围
周期	数	0	运动将重复多少次

从Vue-Mouse-Parallax迁移 (Migrating from vue-mouse-parallax)

Migration from vue-mouse-parallax is quite easy:

从vue-mouse-parallax迁移非常容易：

组件 (Components)

• parallax-container -> kinesis-container

  视差容器->运动容器

• parallax-element -> kinesis-element

  视差元素->运动学元素

道具 (Props)

• parallaxStrength -> strength

  视差强度->强度

• animationDuration -> duration

  animationDuration->持续时间

支撑值 (Prop values)

• translation -> translate

  翻译->翻译

• rotation -> rotate

  旋转->旋转

翻译自: https://vuejsexamples.com/create-interactive-animations-with-vue-js/

vue.js 组件交互