Rythm.js – 用javascript让你的页面跳舞
简介
Rythm.js 是一款能够让页面“跳舞”的 javascript 库,它能够让页面支持脉冲、跳跃、摇动、扭动、淡入淡出、变换颜色等特效,同时还可以播放音频,使页面更有趣。
Rythm.js 目前的版本(v2.0.0)有一个 bug,在 Safari 上不能运行,请谨慎使用。
浏览器兼容
– | Edge | Chrome | Firefox | Opera | – |
使用方法
1、引入文件
普通方式
<script src="js/rythm.js"></script>
npm 方式
npm install rythm.js
2、HTML
<div class="rythm pulse"></div>
3、JavaScript
普通方式
var rythm = new Rythm(); rythm.addRythm('pulse', 'pulse', 0, 10); rythm.setMusic("sample.mp3"); rythm.start();
ES6 方式
import Rythm from "rythm.js"; const rythm = new Rythm(); rythm.addRythm('pulse', 'pulse', 0, 10); rythm.setMusic("sample.mp3"); rythm.start();
配置
方法
新建一个 Rythm 对象:
var rythm = new Rythm();
rythm 对象可使用的方法:
- startingScale
- pulseRatio
- maxValueHistory
- setMusic
- connectExternalAudioElement
- setGain
- addRythm
- plugMicrophone
- start
- stop
addRythm 方法的“舞蹈”方式及选项:
pulse
pulse 使用的是 CSS3 的 transform: scale() 属性。
名称 | 默认值 | 说明 |
---|---|---|
min | 0.75 | 最小值 |
max | 0.75 | 最大值 |
jump
jump 使用的是 CSS3 的 transform: translateY() 属性。
名称 | 默认值 | 说明 |
---|---|---|
min | 0 | 最小值 |
max | 30 | 最大值 |
shake
shake 使用的是 CSS3 的 transform: translateX() 属性。
名称 | 默认值 | 说明 |
---|---|---|
min | 0 | 最小值 |
max | 30 | 最大值 |
direction | left | 水平方向移动,可选 left 或 right |
twist
twist 使用的是 CSS3 的 transform: rotate() 属性。
名称 | 默认值 | 说明 |
---|---|---|
min | -20 | 最小值 |
max | 20 | 最大值 |
direction | left | 水平方向移动,可选 left 或 right |
vanish
vanish 使用的是 CSS 的 opacity 属性。
名称 | 默认值 | 说明 |
---|---|---|
min | 0 | 最小值 |
max | 1 | 最大值 |
reverse | false | 是否相反的效果,可选 false 或 true |
color
color 使用的是 CSS3 的 color: rgb() 属性。
名称 | 默认值 | 说明 |
---|---|---|
from | [0,0,0] | 开始的颜色 |
to | [255,255,255] | 结束的颜色 |
GitHub 地址:https://github.com/Okazari/Rythm.js