Game-animation2 NPM

game-animation

动画

安装

npm install game-animation

使用

必须开启 "enableSkia": "true"

json

{
    "usingComponents": {
        "game-animation": "game-animation/index"
    }
}

mini.project.json

{
  "node_modules_es6_whitelist": [
    "common-game"
  ]
}

Page({
  data: {
    gameSource: JSON.stringify({
      animations: [
        {
          name: "open",
          width: 750,
          height: 750,
          x: 0,
          y: 0,
          boomSpeed: 0.3,//速度
          srcArr: [
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014EAOnp1FJvhcLvb4o_!!1080040467.png", "name": "dh_beauty_1_0.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ZMLKgJ1FJvhXHzuPl_!!1080040467.png", "name": "dh_beauty_1_1.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01cQFVK11FJvhbw3Hcs_!!1080040467.png", "name": "dh_beauty_1_2.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01CfGbRO1FJvhXI1WCm_!!1080040467.png", "name": "dh_beauty_1_3.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01HDHORd1FJvhaANAIl_!!1080040467.png", "name": "dh_beauty_1_4.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01zsw7x01FJvhj6DEHH_!!1080040467.png", "name": "dh_beauty_1_5.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ob9A4e1FJvhaANhYv_!!1080040467.png", "name": "dh_beauty_1_6.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01WVe0P71FJvhXHyZG7_!!1080040467.png", "name": "dh_beauty_1_7.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KyMsvX1FJvhayryzT_!!1080040467.png", "name": "dh_beauty_1_8.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xnja3x1FJvhaysr3Y_!!1080040467.png", "name": "dh_beauty_1_9.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qDIpwZ1FJvhXHzEqd_!!1080040467.png", "name": "dh_beauty_1_10.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vE30xR1FJvhbw4I1X_!!1080040467.png", "name": "dh_beauty_1_11.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01u24YDs1FJvhaJtcDs_!!1080040467.png", "name": "dh_beauty_1_12.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01GZFuU71FJvhgSl10Z_!!1080040467.png", "name": "dh_beauty_1_13.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01cPOT3u1FJvhfGT3jl_!!1080040467.png", "name": "dh_beauty_1_14.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KrwkTH1FJvhj6C5c6_!!1080040467.png", "name": "dh_beauty_1_15.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN013yrcxl1FJvhj6BcWW_!!1080040467.png", "name": "dh_beauty_1_16.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Z5JrcR1FJvheZ9HAC_!!1080040467.png", "name": "dh_beauty_1_17.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01owpu6T1FJvhj6CUYA_!!1080040467.png", "name": "dh_beauty_1_18.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DpqNTv1FJvhaAOdmT_!!1080040467.png", "name": "dh_beauty_1_19.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN013UkTzI1FJvhiJZYBr_!!1080040467.png", "name": "dh_beauty_1_20.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NEa5d11FJvhXykeDr_!!1080040467.png", "name": "dh_beauty_1_21.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01nMoNIp1FJvhdceGt3_!!1080040467.png", "name": "dh_beauty_1_22.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01QX6cWq1FJvhaAO2Mp_!!1080040467.png", "name": "dh_beauty_1_23.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01FGDWdK1FJvhdcfwqR_!!1080040467.png", "name": "dh_beauty_1_24.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01LNXSh51FJvhQwlBKp_!!1080040467.png", "name": "dh_beauty_1_25.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01NVoeCZ1FJvhaJtx1L_!!1080040467.png", "name": "dh_beauty_1_26.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01l9aFKr1FJvheZ98r8_!!1080040467.png", "name": "dh_beauty_1_27.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Nuds2K1FJvhiJZkeg_!!1080040467.png", "name": "dh_beauty_1_28.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ntm6Lf1FJvhaJvUhh_!!1080040467.png", "name": "dh_beauty_1_29.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01IfA3fZ1FJvhgSl121_!!1080040467.png", "name": "dh_beauty_1_30.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Ug2V4b1FJvhgSjk3L_!!1080040467.png", "name": "dh_beauty_1_31.png", "width": "750", "height": "750" },
          ]
        }, {
          name: "chouti",
          width: 750,
          height: 750,
          x: 0,
          y: 0,
          boomSpeed: 0.3,//速度
          srcArr: [
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01PXwaT51FJvhaAKXuo_!!1080040467.png", "name": "dh_beauty_1_0.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN013Pvf4J1FJvhbvyieE_!!1080040467.png", "name": "dh_beauty_1_1.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01EGw5Qi1FJvhXyihRj_!!1080040467.png", "name": "dh_beauty_1_2.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01gOXc7z1FJvhaAKshG_!!1080040467.png", "name": "dh_beauty_1_3.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01XTcWrf1FJvhVlRG9E_!!1080040467.png", "name": "dh_beauty_1_4.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN013ikbDs1FJvhXyk2bF_!!1080040467.png", "name": "dh_beauty_1_5.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017H2G5D1FJvhj69wLh_!!1080040467.png", "name": "dh_beauty_1_6.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01yCTtRM1FJvhaAM5ZR_!!1080040467.png", "name": "dh_beauty_1_7.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Og4JPw1FJvhhBQ73u_!!1080040467.png", "name": "dh_beauty_1_8.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01j0U23w1FJvhiJXfYZ_!!1080040467.png", "name": "dh_beauty_1_9.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01TVjR7v1FJvhXHx9lo_!!1080040467.png", "name": "dh_beauty_1_10.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01QGrdRh1FJvhXykmL0_!!1080040467.png", "name": "dh_beauty_1_11.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KJSCJ41FJvhaALgbJ_!!1080040467.png", "name": "dh_beauty_1_12.png", "width": "750", "height": "750" },
            { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01lpCUYi1FJvhiJWC4n_!!1080040467.png", "name": "dh_beauty_1_13.png", "width": "750", "height": "750" },
          ]
        }
      ]
    }),
  },

  playFun() {
    this.gameComponent.onEvent("playFun", {
      name: "open",
      callback: () => {
        console.log("done...")
      }
    });
  },

  onRef(game) {
    this.gameComponent = game;
  },
  onInitDone() {
  },
})

xaml

  <view class="base">
    <game onRef="onRef" onInitDone="onInitDone" gameSource="{{gameSource}}" />
    <view style="position:absolute;left:0;bottom:-50rpx;" onTap="playFun">播放</view>
  </view>

common-game

@infinitebrahmanuniverse/nolb-gam @everything-registry/sub-chunk-1718

2 years ago

2 years ago

2 years ago

2 years ago