导航栏特效

最新推荐文章于 2021-05-27 09:19:33 发布

原创最新推荐文章于 2021-05-27 09:19:33 发布 · 422 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#动画

动画专栏收录该内容

0 篇文章

订阅专栏

var that = this;
wx.getSystemInfo({
      success: function (res) {

        that.setData({
          wh: res.windowHeight,
          navh: (res.windowHeight * 0.55 - res.windowHeight * 0.08) / 6 * 0.8,
          margin: (res.windowHeight * 0.55 - res.windowHeight * 0.08) / 6 * 0.2,
          top: res.windowHeight * 0.08,
          rw: res.windowWidth / 750
        })
      }
    })
    var rw = this.data.rw
    var animation1 = wx.createAnimation({

    })
    var animation2 = wx.createAnimation({
    })
    var animation3 = wx.createAnimation({
    })
    var animation4 = wx.createAnimation({
    })
    var animation5 = wx.createAnimation({
    })
    var animation6 = wx.createAnimation({
    })
    this.animation1 = animation1
    this.animation2 = animation2
    this.animation3 = animation3
    this.animation4 = animation4
    this.animation5 = animation5
    this.animation6 = animation6
    animation1.translateX(rw * 720).step({ duration: 800, delay: 300, timingFunction: "linear" }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    animation2.translateX(rw * 720).step({ duration: 800, timingFunction: "linear", delay: 500 }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    animation3.translateX(rw * 720).step({ duration: 800, timingFunction: "linear", delay: 700 }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    animation4.translateX(rw * 720).step({ duration: 800, timingFunction: "linear", delay: 900 }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    animation5.translateX(rw * 720).step({ duration: 800, timingFunction: "linear", delay: 1100 }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    animation6.translateX(rw * 720).step({ duration: 800, timingFunction: "linear", delay: 1300 }).translateX(rw * 650).step({ duration: 500, timingFunction: "ease", delay: 0 }).translateX(rw * 680).step({ duration: 400, timingFunction: "ease", delay: 0 })
    this.setData({
      animation1: animation1.export(),
      animation2: animation2.export(),
      animation3: animation3.export(),
      animation4: animation4.export(),
      animation5: animation5.export(),
      animation6: animation6.export(),
    })

wxml:
 animation='{{animation1}}'