收藏
回答

请教一下如何让动画循环播放

var animation = wx.createAnimation({

      duration: 20000,

      timingFunction: 'linear',

    })

  audioPlay: function (e) {

  //  在标签页添加 data-*** 可以通过e.currentTarget.dataset.*** 取值

        this.audioCtx.play()

        this.setData({

          courseImg: '../../images/pause.png'

      })

        this.setData({

          temp1: true

        })

        this.setData({

          temp2: false

        })

        var that = this

        setInterval(function(){

          that.animation = animation

          animation.rotate(360).step()

          that.setData({

            animationData: animation.export()

          })

        },1000)

  },

这是 代码,但是动画只会播放一次,不知道如何去循环播放,请教一下大神

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

13 个回答

  • 多吃水果
    多吃水果
    05-09

    真难用,还不入原声的animateApi

    05-09
    有用
    回复
  • TANGYC_
    TANGYC_
    2022-05-12
    <view animation="{{animationRec}}" class="rec"></view>
    


    // animation/translateX/translateX.js
    Page({
      data: {
        animationRec: {},
      },
    
    
      onLoad: function (options) {},
      onShow() {
        var animation = wx.createAnimation({
          duration: 1000,
          timingFunction: "ease",
        });
        this.animation = animation;
        setInterval(
          function () {
            this.startMove();
          }.bind(this),
          1000
        );
      },
    
    
      startMove() {
        // 先旋转同时放大,然后平移
        this.animation.translate(200, 0).step({ duration: 1000 });
        this.animation.translate(0, 0).step({ duration: 1000 });
        this.setData({
          animationRec: this.animation.export(),
        });
      },
    });
    
    
    
    2022-05-12
    有用
    回复 1
    • TANGYC_
      TANGYC_
      2022-05-12
      这个可行
      2022-05-12
      回复
  • 健康和平安是最重要的
    健康和平安是最重要的
    2018-07-04

    setinterval里数据执行完要处理(比如++),这样每次都执行新的动画

    2018-07-04
    有用
    回复
  • 一只毛桃
    一只毛桃
    2017-09-25

    楼主最现在解决了吗,请教一下

    2017-09-25
    有用
    回复
  • 聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    2017-05-12

    先放着干别的,到时候弄好了再来回复你,谢谢了

    2017-05-12
    有用
    回复
  • 炒饭²º²¹
    炒饭²º²¹
    2017-05-12

    这就涉及到我的知识盲区了 楼主你再多试试吧

    2017-05-12
    有用
    回复
  • 聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    2017-05-12

          }, loopValue)

      },playCD:function(){

        var animation = wx.createAnimation({

          duration: 20000,

          timingFunction: 'linear',

        })

          var that = this

          console.info('开始调用了')

          var timer  =  setInterval(function () {

            this.animation = animation

            animation.rotate(360).step()

            that.setData({

              animationData: animation.export()

            })

          }, 1000)

          setTimeout(function (){

            clearInterval(timer)

          },1000)

      },


    已经放到了playCD里,还是不行

    2017-05-12
    有用
    回复
  • 炒饭²º²¹
    炒饭²º²¹
    2017-05-12

    那你这个setInterval应该把整个动画都要把括进去了,包括创建动画,而不仅仅只是执行动画这一块了 楼主你再试试

    2017-05-12
    有用
    回复
  • 聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪聪
    2017-05-12

    还是只播放了一次,看API写的   animationData: animation.export()

    export 方法每次调用后会清掉之前的动画操作


    2017-05-12
    有用
    回复
  • 炒饭²º²¹
    炒饭²º²¹
    2017-05-12

    试试这样的 

    audioPlay: function (e) {

      //  在标签页添加 data-*** 可以通过e.currentTarget.dataset.*** 取值

            this.audioCtx.play()

            this.setData({

              courseImg: '../../images/pause.png',   temp1: true, temp2: false

          })

        

            var that = this

            setInterval(function(){

              that.playCD()

            },2000)


      },

    playCD:function(){

          var that = this;

          console.info('开始调用了')

          var timer=setInterval(function () {

            that.animation = animation

            animation.rotate(360).step()

            that.setData({

              animationData: animation.export()

            })

          }, 1000)

        setTimeout(function(){

          clearInterval(timer);

        },1000)

      },


    2017-05-12
    有用
    回复

正在加载...

登录 后发表内容