css-imgani

css-imgani

游戏

安装

npm install css-imgani

使用

• json

{
    "usingComponents": {
        "css-imgani": "css-imgani/index"
    }
}

• js

Page({
  data: {
    img: {
      time: 1,
      src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01zNZ0Vp1EUdNMa36OB_!!2185320355.png",//图片
      width: 681,
      height: 1075,
      left: 28,
      top: 184,
    }
  },
  onLoad(query) {
    console.log('page onLoad', query)
  },
  onShow() { },
  onStartFun(){
    this.aniRef.start();
  },
  onResetFun(){
    this.aniRef.reset();
  },

  onInitDone(ref) {
    this.aniRef = ref;

    // this.aniRef.start();
    console.log("initDone...")
  },
  onAniDone() {
    console.log("动画执行完毕")
  }
})

• xaml

  <view class="page">
    <css-imgani img="{{img}}" onInitDone="onInitDone" onAniDone="onAniDone" />

    <view class="btn" onTap="onStartFun">开始</view>
    <view class="btn2" onTap="onResetFun">重置</view>
  </view>

• acss

.page{
  width: 681rpx;
  height: 1075rpx;
  position: relative;
}
.btn{
  position: fixed;
  left: 0;
  bottom: 0;
}
.btn2{
  position: fixed;
  left: 0;
  bottom: 40rpx;
}