动态添加带动画组件的问题
发布于 6 年前 作者 fang88 11241 次浏览 来自 问答

我要实现的是按一个按钮，扔出个拖鞋，拖鞋带动画。

有两个问题:

  1. 在创建拖鞋数据时设置动画，动画不会被播放。只能setTimeout延迟一点时间再设置动画。

  2. 每次创建一个拖鞋都会导致之前的拖鞋重播动画。（确保每个拖鞋有独立的key也不行）。这样只要动画有多个step，就都会有问题。

不知道正常的是不是这样实现的，是否有其他更标准的做法，谢谢。

下面是代码和素材。

// pages/bugs/bugAnim.js
const getRandom = (min, max) => {
  return Math.random() * (max - min) + min
}
 
Page({
  data: {
    slippers: [],
  },
 
  throwSlipper() {
    let d = new Date()
    let key = d.getTime()
 
    var animation = wx.createAnimation({
      duration: 400,
      timingFunction: 'ease',
    })
 
    animation.scale(0.5).step()
    animation.rotate(getRandom(-90, 90),).step() //假如注释掉这行，动画只有一个step的情况下则没问题
 
    let slipper = {
      x: getRandom(0, 320),
      y: getRandom(100, 500),
      key: key,
      // anim: animation.export(),  //如果这里直接设置animation，则没有反应
    }
 
    let slippers = this.data.slippers
    slippers.push(slipper)
 
    this.setData({
      slippers: slippers,
    })
 
    //这里设置动画才有效，一定要滞后一点时间，时间短了也有几率不成功
    setTimeout(() => {
      slipper.anim = animation.export()
      this.setData({
        slippers: slippers,
      })
    }, 100)
  },
})
<!--pages/bugs/bugAnim.wxml-->
<view class="bugView">
  <view wx:for="{{slippers}}" wx:key="key" wx:for-item="slipper" class="slipperFX" style="left:{{slipper.x}}px;top:{{slipper.y}}px">
      <image class="slipper" src="res/slipper.png" mode="aspectFit" animation="{{slipper.anim}}"></image>
  </view>
  <button bindtap="throwSlipper">扔拖鞋</button>
</view>
/* pages/bugs/bugAnim.wxss */
.bugView {
  position: absolute;
  width:100%;
  height:100%;
  background: pink;
}
 
button {
  position: absolute;
  width:100%;
  bottom: 20px;
  margin: auto;
}
 
.slipperFX {
  position: absolute;
  width: 0px;
  height: 0px;
}
 
.slipper {
  position: absolute;
  width: 54px;
  height: 120px;
  display: block;
  left:-27px;
  top:-60px;
}

slipper.png

1 回复

没人看吗

回到顶部