vue.js 组件交互
视觉运动 (vue-kinesis)
Easy to use Vue.js components for creating interactive animations.
易于使用的Vue.js组件可用于创建交互式动画。
安装 (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)
<script src="vue.js"></script>
<script src="vue-kinesis.min.js"></script>
用法 (Usage)
道具 (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 组件交互