支付宝小程序扩展能力 Bling
简介
Bling 是一款面向小程序的语义化动画库。本着让小程序写更少的代码、实现更多动画的初心，Bling 通过大量基础的实现、简单的拼装组合，循序渐进、由浅入深，使开发者获得沉浸式的动画开发体验，逐渐爱上写小程序的动画，小成本带来小程序效果上的大增值。
设计理念
Bling 源于 CSS3，又高于 CSS3 的三大设计理念：
- 语义化：接口通俗易懂、老少皆宜，读写呈流线式，代码行间却尽显着不羁
- 多模式：雅俗共赏，两套实现模式，按需调用、搭配，最优雅的设计给最挑剔的你
- 易扩展：开放、友好，每一个闪光的你都值得携手同行，共谱美好
两行代码实现呼吸灯效果
// 定义一个 Breathe 实例
const action = Bling.Breathe(2000, 1.1);
// 让对应的 ref 调用，并循环 3 次
this.blingRef.runAction(Bling.Repeat(3, action));关于 Bling 更详细的说明和使用方法，详情请参见 Bling。
安装使用
环境准备
在开始 Bling 项目之前，开发者需要熟悉阿里小程序的开发，并准备好阿里小程序的开发环境。详情请参见 小程序开发指南。
安装小程序组件
在标准小程序目录下执行命令
npm i mini-ali-bling --by=yarn --saveindex.json
在 index.json 里引用 Bling 的小程序组件
{
"defaultTitle": "Bling DEMO",
"usingComponents": {
"bling": "mini-ali-bling/bling"
}
}index.axml
在 index.axml 中使用 <bling /> 组件：
<!-- 使用 ref 绑定 BlingRef 之后，会在组件初始化时触发 BlingRef 方法 -->
<bling
className="bling"
ref="BlingRef"
>
<image src="https://gw.alipayobjects.com/as/g/tiny/resources/1.0.0/images/ants/ant.png" />
</bling>app.js
App({
onLaunch() {
const { Bling } = $global;
// 获取引擎单例并启动，用于帧调度（一个 App 只需创建并共用一个）
Bling.Engine.getInstance().start();
},
});index.js
// 从全局对象 $global 中获取 Bling 对象
// 此对象是在小程序组件 mini-ali-bling 里注入的
const { Bling } = $global;
Page({
// BlingRef 方法的参数 ref 为自定义组件实例，运行时由框架传递给 BlingRef 方法
BlingRef(ref) {
// 存储自定义组件实例，方便下面调用
this.blingRef = ref;
},
onReady() {
// 新建一个 MoveTo action，时长是3000ms，移动到 {120rpx, 240rpx}
const action = Bling.MoveTo(3000, Bling.point(120, 240));
// 使用自定义组件实例（显示对象）并设置其初始位置为 {200rpx, 50rpx}
this.blingRef.setPosition(200, 50);
// 执行 action
this.blingRef.runAction(action);
},
});使用须知
Bling 使用了小程序自定义组件，并需要 component2 相关功能，所以小程序项目要启动 component2。
启用方式：在 IDE 中的 详情 > 项目配置 中，勾选 启用 component2 编译。