简介
在现代前端开发中，“Generator”（生成器）的概念已经变得越来越重要。Generator-flash 是一个可以生成 Flash Canvas 动画的 Yeoman Generator。这个 Generator 基于 Flash 基础，可以帮助开发者快速创建包含动画的网站。本文将介绍如何使用 generator-flash 包，让你轻松创建网站并开发动画。
安装
要使用 generator-flash 前，你需要全局安装 Yeoman：
npm install -g yo
然后你就可以安装 generator-flash：
npm install -g generator-flash
使用
现在你可以使用 generator-flash 来创建一个新项目了，进入你所希望的目录并执行以下命令：
yo flash
执行之后，你会被要求输入项目名称以及其他一些基本信息。
? What would you like to name your project? myFlashProject ? Would you like to add some animations? Yes ? What type of animaton would you like to add? Bounce
现在 generator-flash 会自动创建基础工程结构，并且添加动画需要的代码。
创建动画
generator-flash 提供了多种动画类型。比如我们在上面填写 "Bounce" 后，就生成了一个反弹动画。你可以在 src/js/main.js 中找到这段代码。
// create a bounce animation
window.createjs.Tween.get(ball, {loop:true})
.to({x: 200, y: 100, scaleX: 2, scaleY: 2}, 500, createjs.Ease.bounceOut)
.to({x: 150, y: 150, scaleX: 1, scaleY: 1}, 1000, createjs.Ease.bounceOut);这段代码使用了 CreateJS 库来控制动画。在这个例子中，我们创建了一个使用 bounceOut 函数的缓动效果。这个动画会使得一个球向下反弹一次，然后沿着斜向右上方的路径运动到画布的左上角。试着更改这段代码以体验更多动画效果。
构建与发布
当你完成了动画和网站的开发后，你需要使用 gulp 来构建和发布项目。
首先，你需要安装一些开发依赖包：
npm install --save-dev gulp gulp-connect
然后你需要在项目根目录下创建一个 gulpfile.js 文件。文件内容如下：
-- -------------------- ---- -------
--- ---- - ----------------
--- ------- - ------------------------
-------------------- ---------- -
----------------
----- ---------
----------- -----
----- ----
---
---
----------------- ---------- -
------------------------
--------------------------
------------------------
---
---------------- ---------- -
---------------------------
------------------------------
------------------------
---
--------------- ---------- -
-------------------------
-----------------------------
------------------------
---
------------------ ---------- -
-------------------------- ----------
----------------------------- ---------
--------------------------- --------
---
-------------------- ----------- ----------文件中的代码可以让你在本地开发中轻松地创建和预览项目。
最后，发布项目到 NPM：
npm publish
这样，你就成功地使用 generator-flash 包创建并发布了一个网站。
结语
generator-flash 是一个非常简单但功能强大的前端开发工具。它可以帮助你快速创建一个动画网站并自如地开发。我们相信，使用这个工具可以帮助你提高生产力，缩短开发时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005661881e8991b448e1f87