jumpani

游戏

安装

npm install jumpani

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "jumpani/amani"
    }
}

• js

Page({
  data: {
    gameSource: {
      clickEvent: true,//true:鼠标点击位置为开始位置，点击容器区域就触发动画 false:点击事件无效，需要手动调用执行动画
      // 动画元素
      player: {
        src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PG05wN1FJvhvvgol5_!!1080040467.png",
        width: 118,
        height: 118,
        anchor: {
          x: 0.5,
          y: 0.5
        }
      },
      // 终点位置
      endPos: {
        x: 100,
        y: 700
      },
      // 抛物线y轴范围(以最高位置计算)，值越大抛得越高
      randomY: {
        min: 0,
        max: 100
      }
    }
  },
  onLoad() {
  },

  onRef(ref) {
    this.gameComponent = ref;
  },
  onClickCallback() {
    // 点击事件开启时，点击之后动画完成回调
  },

  // 手动调用动画
  moveFun() {
    this.gameComponent.moveAni({
      startPos: { x: 500, y: 200 },//开始位置
      endPos: { x: 0, y: 700 },//结束位置
      callback: () => {
        // 动画执行完回调
      }
    })
  }
});

• xaml

  <view class="box">
    <game gameSource="{{gameSource}}" onRef="onRef" onClickCallback="onClickCallback" />
    <view class="btn" onTap="moveFun">开始执行</view>
  </view>

-acss

.box{
  position: absolute;
  background: #ccc;
  background-size: 100% 100%;
  width: 750rpx;
  height: 723rpx;
}
.btn{
  position: absolute;
  bottom: 0;
}