支付寶小程序擴(kuò)展能力 Bling

簡介

Bling 是一款面向小程序的語義化動畫庫。本著讓小程序?qū)懜俚拇a、實(shí)現(xiàn)更多動畫的初心，Bling 通過大量基礎(chǔ)的實(shí)現(xiàn)、簡單的拼裝組合，循序漸進(jìn)、由淺入深，使開發(fā)者獲得沉浸式的動畫開發(fā)體驗(yàn)，逐漸愛上寫小程序的動畫，小成本帶來小程序效果上的大增值。

設(shè)計(jì)理念

Bling 源于 CSS3，又高于 CSS3 的三大設(shè)計(jì)理念：

• 語義化：接口通俗易懂、老少皆宜，讀寫呈流線式，代碼行間卻盡顯著不羈
• 多模式：雅俗共賞，兩套實(shí)現(xiàn)模式，按需調(diào)用、搭配，最優(yōu)雅的設(shè)計(jì)給最挑剔的你
• 易擴(kuò)展：開放、友好，每一個閃光的你都值得攜手同行，共譜美好

兩行代碼實(shí)現(xiàn)呼吸燈效果

// 定義一個 Breathe 實(shí)例
const action = Bling.Breathe(2000, 1.1);
// 讓對應(yīng)的 ref 調(diào)用，并循環(huán) 3 次
this.blingRef.runAction(Bling.Repeat(3, action));

關(guān)于 Bling 更詳細(xì)的說明和使用方法，詳情請參見 Bling。

安裝使用

環(huán)境準(zhǔn)備

在開始 Bling 項(xiàng)目之前，開發(fā)者需要熟悉阿里小程序的開發(fā)，并準(zhǔn)備好阿里小程序的開發(fā)環(huán)境。詳情請參見 小程序開發(fā)指南。

安裝小程序組件

在標(biāo)準(zhǔn)小程序目錄下執(zhí)行命令

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 之后，會在組件初始化時觸發(fā) 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;


    // 獲取引擎單例并啟動，用于幀調(diào)度（一個 App 只需創(chuàng)建并共用一個）
    Bling.Engine.getInstance().start();
  },
});

index.js

// 從全局對象 $global 中獲取 Bling 對象
// 此對象是在小程序組件 mini-ali-bling 里注入的
const { Bling } = $global;


Page({
  // BlingRef 方法的參數(shù) ref 為自定義組件實(shí)例，運(yùn)行時由框架傳遞給 BlingRef 方法
  BlingRef(ref) {
    // 存儲自定義組件實(shí)例，方便下面調(diào)用
    this.blingRef = ref;
  },
  onReady() {
    // 新建一個 MoveTo action，時長是3000ms，移動到 {120rpx, 240rpx}
    const action = Bling.MoveTo(3000, Bling.point(120, 240));


    // 使用自定義組件實(shí)例（顯示對象）并設(shè)置其初始位置為 {200rpx, 50rpx}
    this.blingRef.setPosition(200, 50);
    // 執(zhí)行 action
    this.blingRef.runAction(action);
  },
});

使用須知

Bling 使用了小程序自定義組件，并需要 component2 相關(guān)功能，所以小程序項(xiàng)目要啟動 component2。

啟用方式：在 IDE 中的 詳情 > 項(xiàng)目配置 中，勾選 啟用 component2 編譯。