html5云层动画,基于webGL的云层动画js插件

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

NPM安装

npm install klouds --save

使用方法

ES6语法：

import * as klouds from 'klouds'

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

HTML结构

初始化插件

// 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)

示例代码

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)