收藏
回答

关于animation动画不执行问题

我的需求是做一个砸金蛋功能,点击金蛋弹出modal ,这个modal是一个砸金蛋的动画。第一次执行这个点击事件触发这个事件没有问题,但是当我关闭这个modal再次打开 这个动画效果不触发了,求解答在这先谢过了,下面附上代码(点击事件触发下面弹框有定义了动画animationData,调用基础库是2.1.1

<!--砸金蛋modal  -->

<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>

<view class="modal-dialog" wx:if="{{showModal}}">

<view class="modal-background">

<view class="modal-out" style="">

<view bindtap="remove">关闭金蛋模态框</view>

<image bindtap="eggclick" src="../../static/images/egg.png" style="height:325rpx;width:301rpx;"></image>

<view   style="position:absolute;right:0rpx;top:-180rpx">

<image class="modal-chui" animation="{{animationData}}" src="../../static/images/chuizi.png" ></image>

</view>

</view>

</view>

</view>



clickeggs: function () {

this.setData({ showModal: true });

let animation1 = wx.createAnimation({

duration: 1000,

transformOrigin: "right bottom",

timingFunction: 'ease'

})

setTimeout(function () {

animation1.rotate(-25).step()

animation1.rotate(15).step()

animation1.rotate(-25).step()

animation1.rotate(15).step()

animation1.rotate(-25).step()

animation1.rotate(15).step()

this.setData({

animationData: animation1.export(),

})

}.bind(this), 200);

},




回答关注问题邀请回答
收藏

6 个回答

  • lemon
    lemon
    2018-07-08

    有人知道吗

    2018-07-08
    有用 1
    回复 2
    • lemon
      lemon
      2018-07-08

      有人吗


      2018-07-08
      回复
    • 阿็果์
      阿็果์
      2018-07-10

      百度查遍了,我到是有点眉目

      2018-07-10
      回复
  • 席多拉·莱得
    席多拉·莱得
    2018-07-18

    锤子这个图片旋转了角度没有复位

    2018-07-18
    有用
    回复
  • 2018-07-11

    重复执行的animation建议写在CSS,

    2018-07-11
    有用
    回复 1
    • lemon
      lemon
      2018-07-11

      文档上并没有css上的写法啊

      2018-07-11
      回复
  • 阿็果์
    阿็果์
    2018-07-10

    解决了吗,我也是遇到同样问题,动画执行第一次正常,

    2018-07-10
    有用
    回复 1
    • lemon
      lemon
      2018-07-11

      用hidden ,

      2018-07-11
      回复
  •  
     
    2018-07-09

    有结果了么?

    2018-07-09
    有用
    回复 1
  • 卢霄霄
    卢霄霄
    2018-07-09

    能做个代码片段吗?

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2018-07-09
    有用
    回复 21
    查看更多(16)
登录 后发表内容