基于webGL的云层动画js插件

基于webGL的云层动画js插件

这是一款基于webGL的云层动画js插件。该插件使用HTML5 canvas 和 WebGL API,生成可控制的多层云彩动画特效。
NPM安装

1
npm install klouds --save

使用方法

1
2
ES6语法:
import * as klouds from 'klouds'

在页面中引入下面的文件。

1
2
3
4
5
6
7
8
<!-- 纯 JavaScript -->
<script src="lib/klouds.min.js"></script>
 
<!-- jQuery插件 -->
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="lib/klouds.min.js"></script>
HTML结构
<canvas id="myClouds"></canvas>

初始化插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// vanilla javascript
klouds.create({
  selector: '#myClouds'
});
 
// jQuery plugin
$(function(){
  $('#myClouds').Klouds();
});
API
const instance = $('#myClouds').Klouds();
 
// start the animation
instance.start()
 
// stop the animation
instance.stop()
 
// get the current animation speed
instance.getSpeed()
 
// set the animation speed
instance.setSpeed(speed)
 
// get the number of cloud layers
instance.getLayerCount()
 
// set the number of cloud layers
instance.setLayerCount(count)
 
// get the background color
instance.getBgColor()
 
// set the background color
instance.setBgColor(color)
 
// get the color 1
instance.getCloudColor1()
 
// set the color 1
instance.setCloudColor1(color)
 
// get the color 2
instance.getCloudColor2()
 
// set the color 2
instance.setCloudColor2(color)

示例代码

1
2
3
4
5
6
7
8
9
10
11
var clouds = klouds.create({
  selector: '#my-cloud-canvas',
  speed: 5,
  layerCount: 7,
  bgColor: 'white',
  cloudColor1: 'white',
  cloudColor2: 'red'
})
 
// later you could for example changed the speed
clouds.setSpeed(10)
温馨提示:此处内容需要评论本文后才能查看。
3

发表评论