我的需求是做一个砸金蛋功能,点击金蛋弹出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回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • Joseph

    18人对此回答表示赞同

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

    展开
    18
    0回复
    发布于 6年前

    评论(0)

    收起评论

  • 杏仁糖

    16人对此回答表示赞同

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

    展开
    16
    1回复
    发布于 6年前

    评论(1)

    收起评论

    • Luz鹿糍 2019-02-03 18:32

      用hidden,

      回复
  • Charles

    12人对此回答表示赞同

    能做个代码片段吗?

    展开
    12
    21回复
    发布于 6年前

    评论(21)

    收起评论

    • 六神无主 2019-02-07 14:05

      每组动画执行完都有一个结果,当再次刷新控件状态时,保留的状态是一组动画中第一个动作的结果,所以再次执行相同的动画(所谓相同的动画就是指动画中第一组动作是相同的即默认相同),保持不动了;如果清空动画对象,再次执行之前的动画,保持一致,正常执行。同理,如果变更另一组新的动画执行,也是可以正常执行的。

      回复
    • Julia 2019-02-09 22:35

      是啊,之前已经export一次了为啥还需要在export一次

      回复
    • 在劫难逃 2019-02-11 19:56

      不要每次都拿着半截就开跑啊,所以,为啥需要在export一次呢。。

      回复
    • Henry韩飞 2019-02-13 14:33

      wechatide://minicode/zFAGkPmH7AFD

      回复
    • Alondra 2019-02-15 20:01

      谢谢大佬了,完美解决了这个问题!!

      回复
    • Simon叔 2019-02-17 17:56

      wechatide://minicode/zFAGkPmH7AFD

      回复
    • 杏仁糖 2019-02-19 09:22

      嗯,我去提交bug吧,看看有没有官方人来给个说法还是觉得变扭

      回复
    • Luke 2019-02-21 12:30

      嗯,没有回调,我一般也是用的setTimeout

      回复
    • Alan被注册了 2019-02-23 16:45

      你知道微信小程序这个animation有没有执行完的回调函数啊文档上我也没见到,现在是用settimeout做的

      回复
    • Ethan 2019-02-25 09:41

      你知道这个animation有没有结束后的回调。文档上也没见到有,我思路是搞个settimeout执行回调方法

      回复
    • Easton 2019-02-27 09:28

      先就用hidden处理吧,我还是觉得这里是个bug,如果官方看见,希望能处理下。

      回复
    • 北冥有鱼 2019-03-01 20:32

      我在点击事件后立马点击关闭modal那个按钮,然后再次打开也不会触发

      回复
    • Skye 2019-03-03 11:54

      但是你是在click的时候重新设上去了的啊,又还有200ms延迟,肯定是已经有了的啊。第一次执行也是从隐藏到显示然后设动画。后面的都一样的啊。。

      回复
    • Brayden 2019-03-05 22:31

      我的理解是wx:if会再隐藏的时候摧毁这个事件hidden不会

      回复
    • 刘梦晖 2019-03-07 13:30

      你懂了?我没懂。。。因为你的用法其实没有问题的。毕竟第一次是有效的。我感觉像是个bug

      回复
    • Jackson李南 2019-03-09 12:39

      懂了老哥,wx:if和hidden的区别,万分感谢!!!

      回复
    • Rita 2019-03-11 16:34


      回复
    • 亚当思密达 2019-03-13 17:37

      好的,万分感谢

      回复
    • 货真价实冰麒麟 2019-03-15 10:39

      处理中……请稍后

      回复
    • Lydia 2019-03-17 09:43

      wechatide://minicode/qTduWMmG7fTX

      回复
    • Camila 2019-03-19 12:29

      好的我马上做一个

      回复
    加载更多
  • Charlotte

    9人对此回答表示赞同

    有结果了么?

    展开
    9
    1回复
    发布于 6年前

    评论(1)

    收起评论

    • Chavez3 2019-02-05 15:50

      还没有有个大哥在帮忙看,wechatide://minicode/qTduWMmG7fTX这个是代码片段

      回复
  • Jina金呐

    7人对此回答表示赞同

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

    展开
    7
    1回复
    发布于 6年前

    评论(1)

    收起评论

    • 一见倾心 2019-02-02 16:47

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

      回复
  • 陈诗_Echo

    3人对此回答表示赞同

    有人知道吗

    展开
    3
    2回复
    发布于 6年前

    评论(2)

    收起评论

    • fo系青年 2019-01-29 17:16

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

      回复
    • 大勇 2019-01-31 08:39

      有人吗

      回复
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部