收藏
回答

动态添加带动画组件的问题

问题模块
API和组件

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


有两个问题:

  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

最后一次编辑于  2017-09-26  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 李炜
    李炜
    2017-09-30

    没人看吗

    2017-09-30
    赞同
    回复