小程序帧动画组件

调起客户端小程序订阅消息界面，返回用户订阅消息的操作结果。当用户勾选了订阅面板中的“总是保持以上选择，不再询问”时，模板消息会被添加到用户的小程序设置页，通过 wx.getSetting 接口可获取用户对相关模板消息的订阅状态。

页面调用示例代码

TIP

微信官方 API：wx.requestSubscribeMessage
API 文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html

// page.js
Page({
  data: {

  },
  onLoad() {
    console.error('帧动画使用方法见frame-animation目录下readme.md文件')
  },
  end(){
    console.log("动画结束 ---------------")
  }
})

// component.wxml
<frame-animation url="https://img.bazhuay.com/1585896819651_92" width='48' height='48' count='3' duration='0.5' playNumber="100" bindend="end"></frame-animation>

/**
 * 组件属性：
 * url:合成后的外链
 * width:单张图片帧的宽度
 * height:单张图片帧的高度
 * count: 图片帧数量
 * duration:播放一次完整动画所需时间；单位（秒）
 * playNumber: 播放次数(默认无限次)
 * bindend：播放结束回调
 * /

/* page.wxss */
page{
  background-color: gray;
}

/* page.json */
{
  "usingComponents": {
    "frame-animation":"/components/frame-animation/frame-animation"
  }
}

组件示例代码

TIP

微信官方 API：wx.requestSubscribeMessage
API 文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/subscribe-message/wx.requestSubscribeMessage.html

// component.js
Component({
  properties: {
    url: {
      type: String,
      value: "https://img.bazhuay.com/1585887536024_12",
    },
    count: {
      type: String,
      value: 3,
    },
    width: {
      type: String,
      value: 360,
    },
    height: {
      type: String,
      value: 300,
    },
    duration: {
      type: String,
      value: 0.3,
    },
    playNumber: {
      type: String,
      value: "infinite",
    },
  },
  data: {},
  attached() {
    if (this.data.playNumber > 0) {
      setTimeout(() => {
        this.triggerEvent("end");
      }, this.data.playNumber * this.data.duration * 1000);
    }
  },
  methods: {},
});

// component.wxml
<view
  class="frame_wrap"
  style="background-image: url({{url}});--width:{{width}}rpx;--height:{{height}}rpx;--count:{{count}};--duration:{{duration}};--playNumber:{{playNumber}};"
></view>

/* component.wxss */
.frame_wrap {
  width: var(--width);
  height: var(--height);
  animation: frames calc(var(--duration) * 1s) steps(var(--count)) var(--playNumber);
  background-position: 0 0;
  background-size: calc(var(--width) * var(--count)) var(--height);
}

@keyframes frames {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: calc(var(--width) * var(--count));
  }
}

/* component.json */
{
  "component": true,
  "usingComponents": {}
}

备注

TIP

帧组件使用文档：

1. 把多张图片帧合成一张 使用https://www.toptal.com/developers/css/sprite-generator合成，注意帧与帧之间边距改为0，从做左到右排列。
2. 把合成后图片放在云端（可以放在云开发云存储），得到合成后的网络地址。
3. 引用组件，并使用组件

组件属性： url:合成后的外链 width:单张图片帧的宽度 height:单张图片帧的高度 count: 图片帧数量 duration:播放一次完整动画所需时间；单位（秒） playNumber: 播放次数(默认无限次) bindend：播放结束回调

注意事项：

1. 制作时，帧与帧编辑为0，从左到右排列
2. url必须为网络外链