支付宝小程序扩展能力 Bling

2020-09-19 10:46 更新

简介

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 编译。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号