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 组件交互

你可能感兴趣的:(3d,html,adt,sms,xmpp)