支付宝小程序扩展能力 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 --save

index.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" rel="external nofollow"  />
</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 编译。