@2dimensions/flare-js 中文文档教程
Flare-JS
带有 Canvas 渲染的 Javascript ES6 运行时。
CanvasKit vs Canvas
目前有两个分支：使用 CanvasKit 渲染的 master（通过 WebAssembly 的 Skia）和使用标准 CanvasRenderingContext2D 的 context2d。 context2d 分支已弃用。
Building
使用 NPM 获取依赖项，然后使用 webpack 构建：
npm install
npm start -- --watch
Flare-JS Example
有几个步骤可以开始渲染 Flare 文件：
- Create a
canvaselement in HTML - Instantiate and initialize the
Graphicsobject with thecanvasreference - Start the render loop with
window.requestAnimationFrame() - Load the an Actor from file with
Flare.ActorLoader.load(fileLocation, callback) - Initialize and instantiate the
Actor- that will initialize theActorArtboards for the loaded Flare file:- First
Actor.initialize() - then
actor.makeInstance()
- First
- Create a new
AnimationInstance(actor, animation) - Advance the
AnimationInstancewithin thewindow.requestAnimationFramecallback:- increase its time value with the provided setter
animationInstance.time - then apply it with
animationInstance.apply()
- increase its time value with the provided setter
- Advance the actor:
actor.advance(elapsed)
Running the Example
example 文件夹 包含两个文件，example.html 和example.js，以及有关如何使用此运行时的示例实现。
使用NPM获取gl-matrix依赖：
npm install gl-matrix
安装完成后，从node_modules/gl-matrix-dist复制gl-matrix.js进入 repo 的 /build 文件夹。 （注意 canvaskit 与此 repo 一起下载，并且已经存在于 /build 文件夹中。）
此时运行 webpack 构建：
npm run dev
使用本地网络服务器，例如 NGINX 或 MAMP 公开资源。
example.html
该文件包含渲染 Flare 文件所需的 canvas 元素。 它还将加载必要的依赖项（即 Flare-JS、gl-matrix、canvaskit）和示例运行脚本 example .js。
example.js
此 js 文件创建一个 FlareExample 对象。 它的构造函数初始化了 Graphics 对象，启动渲染循环并回调脚本。
HTML 文件中的回调将调用 FlareExample.load(filename) 从磁盘加载文件。 一旦 Flare.ActorLoader 完成，它的加载回调将通过 FlareExample.setActor() 完成 Example 中的 actor 设置。
FlareExample.setActor 将执行画板和动画的初始化和实例化。
渲染循环 - 即 FlareExample.advance() 现在可以推进 Actor、动画，最后通过 FlareExample.Draw() 绘制到画布。
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request.
License
有关许可权利和限制 (MIT)，请参阅 LICENSE 文件。
Flare-JS
Javascript ES6 runtime with Canvas rendering.
CanvasKit vs Canvas
There are currently two branches: master with CanvasKit rendering (Skia via WebAssembly) and context2d with the standard CanvasRenderingContext2D. The context2d branch is deprecated.
Building
Use NPM to get the dependencies and then build with webpack:
npm install
npm start -- --watch
Flare-JS Example
There are a few steps to start rendering a Flare file:
- Create a
canvaselement in HTML - Instantiate and initialize the
Graphicsobject with thecanvasreference - Start the render loop with
window.requestAnimationFrame() - Load the an Actor from file with
Flare.ActorLoader.load(fileLocation, callback) - Initialize and instantiate the
Actor- that will initialize theActorArtboards for the loaded Flare file:- First
Actor.initialize() - then
actor.makeInstance()
- First
- Create a new
AnimationInstance(actor, animation) - Advance the
AnimationInstancewithin thewindow.requestAnimationFramecallback:- increase its time value with the provided setter
animationInstance.time - then apply it with
animationInstance.apply()
- increase its time value with the provided setter
- Advance the actor:
actor.advance(elapsed)
Running the Example
The example folder contains two files, example.html and example.js, with an example implementation on how to use this runtime.
Use NPM to get the gl-matrix dependency:
npm install gl-matrix
After the installation completes, copy gl-matrix.js from node_modules/gl-matrix-dist into the repo's /build folder. (N.B. canvaskit is downloaded with this repo, and already present in the /build folder.)
At this point run a webpack build:
npm run dev
Use a local web server such as NGINX or MAMP to expose the resources.
example.html
This file contains the canvas element that we need to render the Flare file. It'll also load the necessary dependencies (i.e. Flare-JS, gl-matrix, canvaskit) and the example running script example.js.
The <script> tag will have implement the onLoad() callback for the body HTML Element: a FlareExample object is initialized with the canvas reference, and passed a callback function that'll load the Flare file from disk - flareExample.load(filename, callback).
example.js
This js file creates a FlareExample object. Its constructor initialized the Graphics object, starts the rendering loop and calls-back to the script.
The callback, in the HTML file will call FlareExample.load(filename) to load the file from disk. Once Flare.ActorLoader is done, its load callback will finish setting up the actor within the Example via FlareExample.setActor().
FlareExample.setActor will perform the initialization and instantiation of the Artboards, and the Animation.
The render loop - that is FlareExample.advance() can now advance the Actor, the Animation and lastly draw to canvas via FlareExample.Draw().
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request.
License
See the LICENSE file for license rights and limitations (MIT).
