Skip to content

gkajs/studiojs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

studiojs

简单的、渐进式的 2D 渲染引擎(专注于帧动画)


studiojs

studiojs 是一款专注于帧动画的、简单的、渐进式的 2D 渲染引擎。

主要包含类: Frame、Track、Stage。 可独立使用、组合使用。

查看 API 使用文档

推荐使用 gka 一键生成数据,gkagka-tpl-studiojs

Install

npm install studiojs

or use CDN

Usage

Frame

Frame 是帧动画的基础单位,声明帧动画的播放内容。

示例: 使用 Frame 播放单个帧动画

var Frame = studiojs.Frame,
    canvas = document.getElementById('myCanvas');

var data = {
    images: [img],
    frames: [
        // x, y, width, height, offX*, offY*, imageIndex*
        [355, 0, 86, 282, 34, 9],
        [853, 27, 79, 76, 37, 9],
        // etc.
    ],
    animations: {
        forward: ["0-24"],
        back: ["24-0"],
    }
};

var material = new Frame(data, "forward", 20, canvas);

setInterval(()=> {
    material.update();
}, 16);

frame   在线预览源代码gka生成的源代码

Track

轨道,能够加入多个 Frame,使其排队顺序播放

示例: 使用 Track + Frame 顺序排队播放多个帧动画

var track = new Track(canvas);

var material1 = new Frame(data, 'forward'),
    material2 = new Frame(data, 'back');

track.add([material1, material2]);

setInterval(()=> {
    track.update();
}, 16);

track  在线浏览源代码

Stage

舞台,能够包含多个 Track,各个 Track 并列播放, 合并展示

示例: 使用 Stage + Track + Frame 并列播放 Track

var stage = new Stage(canvas)
var track1 = new Track(),
    track2 = new Track();

stage.add([track1, track2]);

//  ...

track1.add([material1, material2]);
track2.add([material3, material4]);

setInterval(()=> {
    stage.update();
}, 16);

stage  在线浏览源代码

Welcome

  • 欢迎 Pull requests、Issues 一般在24小时内处理
  • 讨论与咨询请+QQ 3201590286 :D

License

MIT

Copyright (c) 2017 - present, joeyguo

Releases

No releases published

Packages

No packages published