收藏
回答

同一个动画数据连续调用,动画效果不一致了?

wxml

<view id="goods-ball" animation="{{actionData}}">
</view>


js代码

  // 创建动画实例
    runGoodsAnim: function(callback) {
        let animObj = wx.createAnimation({
            duration: 700,
            delay: 0,
            timingFunction: "ease-in-out"
        });
        // 缩放动画
        animObj.opacity(1).scale(0.3).step();
        // 曲线动画
        animObj.translateX(-250).translateY(1900).opacity(0).step();
        this.setData({
            actionData: animObj.export(),
        });
        callback()
    },


wxss

#goods-ball {
    position: fixed;
    top: 2%;
    left: 50%;
    opacity: 0;
    width: 300rpx;
    height: 300rpx;
    background-color: red;
    margin-left: -150rpx;
    border-radius: 50%;
    overflow: hidden;
  }


我需要的效果是先放大然后位移下去,结果多次调用后,这个view就会从下面往上出来了QAQ

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

1 个回答

  • 小心立早鱼
    小心立早鱼
    2020-10-29

    好吧,把创建的对象放到onLoad

    onLoad(){
      this.animObj = wx.createAnimation({
          duration: 700,
          delay: 0,
          timingFunction: "ease-in-out"
      });
    }
    


    每次调用前把状态清掉就行了

    initAnim: function() {
        this.actionObj.translateX(0)
                      .translateY(0)
                      .opacity(0)
                      .scale(1)
                      .step({duration: 2000})
        this.setData({
            actionData: this.actionObj.export(),
        });
    },
    



    2020-10-29
    有用
    回复
登录 后发表内容
问题标签