绍

Proton是一个灵活的html5粒子引擎。他默认支持canvas,dom,webgl,easeljs,pixel五种渲染方式，当然你还可以轻易的自定义自己的渲染器。只需10几行代码就可以打造你想要的粒子效果。同时具有2D版本和3D版本，适合不同的使用场景！

Github

2D版本:

https://github.com/a-jie/Proton

3D版本:

https://github.com/a-jie/three.proton

相关特性

• 七种渲染器

1. 画布-CanvasRenderer
2. dom-DomRenderer
3. webgl-WebGLRenderer
4. 像素-PixelRenderer
5. easeljs-EaselRenderer
6. pixi.js-PixiRenderer
7. 自定义-CustomRenderer

• 用10行代码创建酷炫的效果。
• 可集成到任何游戏引擎中。
• 多种行为可以模拟许多不同的物理效果。
• 三种发射器，可以轻松扩展。

3D版本：

• 四种渲染器
• MeshRender
• SpriteRender
• PointsRender
• CustomRender
• 三种可以模拟许多不同物理效果的发射器
• 发射
• BehaviourEmitter
• FollowEmitter
• 与three.js库完全兼容。

快速开始

• 安装

npm install proton-js --save
... 
import Proton from 'proton-js';

• 示例代码

var proton = new Proton();
var emitter = new Proton.Emitter();
//设置速率
emitter.rate = new Proton.Rate(Proton.getSpan(10, 20), 0.1);
//初始化
emitter.addInitialize(new Proton.Radius(1, 12));
emitter.addInitialize(new Proton.Life(2, 4));
emitter.addInitialize(new Proton.Velocity(3, Proton.getSpan(0, 360), 'polar'));
//增加行为
emitter.addBehaviour(new Proton.Color('ff0000', 'random'));
emitter.addBehaviour(new Proton.Alpha(1, 0));
//设置发射器位置
emitter.p.x = canvas.width / 2;
emitter.p.y = canvas.height / 2;
emitter.emit(5);
//向proton添加发射器
proton.addEmitter(emitter);
// 新增canvas渲染器
var renderer = new Proton.CanvasRenderer(canvas);
proton.addRenderer(renderer);
//使用Euler积分计算更准确（默认为false）
Proton.USE_CLOCK = false or true;

PS：3D版本的使用方法类似

DEMO演示

下面通过录制的Gif来演示一部分效果，上面已经有一些了，下面再展示一些：

总结

Proton是一个实现例子效果非常合适的2D和3D例子效果库，非常简单实用，从上面的动图效果也能看出来实现的效果非常的炫酷，而且代码非常简单，文档又非常详细！

onic是开源的移动应用开发框架，便于构建高质量的本地和网络技术先进的web应用程序。Ionic是基于Angular，有许多显著的性能提升，可用性和功能都在不断的进行改进。只需要会一点前端知识就能玩转Ionic。

Ionic的应用程序创建开发主要通过Ionic命令行实用工具(“CLI—命令行界面”)，并使用cordova构建和部署本地应用。建立Ionic项目，您需要安装最新版本的CLI和cordova。在你这样做之前，你需要一个node.js的最新版本。这些在我之前的文章有安装教程。

• 官网地址：

  http://ionicframework.com/

• 版本更新说明：

  https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md

学习ionic需要了解的知识：

• HTML5

• CSS3

• TypeScript（JavaScript）

• Angular2+

下面是一些组件的示例，不同系统有不同的样式，下面展示iOS上的。

动作表单-Action Sheets

时间选择器-DateTime

浮动的按钮-Floating Action Buttons

分割按钮-Segment

Inputs-输入框

表格布局-Grid

小芯片-Chip

弹窗对话框1-Alert

弹窗对话框2-Popover

想要查看更多的ionic组件示例，可以在App Store和Google Play下载Ionic2Components应用，该APP即为官方所有组件的展示。

• 组件在线演示地址：

  http://ionicframework.com/docs/api/

组件只能作用在用户与界面交互上，想要调用原生设备功能就需要cordova，他提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风、GPS等。在应用商店下载Ionic Native即可体验部分插件。

• 离子原生包装插件：

  http://ionicframework.com/docs/native/

通过以上组件配合使用，即使只懂css3一点皮毛也能做出一个漂亮简单的HTML5 APP，想要了解更多ionic，可以关注我或者在官网查看最新消息。