微信小程序 動畫

動畫

界面動畫的常見方式

在小程序中，通常可以使用 CSS 漸變 和 CSS 動畫 來創(chuàng)建簡易的界面動畫。

動畫過程中，可以使用 bindtransitionend bindanimationstart bindanimationiteration bindanimationend 來監(jiān)聽動畫事件。

注意：這幾個事件都不是冒泡事件，需要綁定在真正發(fā)生了動畫的節(jié)點上才會生效。

同時，還可以使用 wx.createAnimation 接口來動態(tài)創(chuàng)建簡易的動畫效果。（新版小程序基礎庫中推薦使用下述的關鍵幀動畫接口代替。）

關鍵幀動畫

基礎庫 2.9.0 開始支持，低版本需做兼容處理。

從小程序基礎庫 2.9.0 開始支持一種更友好的動畫創(chuàng)建方式，用于代替舊的 wx.createAnimation 。它具有更好的性能和更可控的接口。

在頁面或自定義組件中，當需要進行關鍵幀動畫時，可以使用 this.animate 接口：

this.animate(selector, keyframes, duration, callback)

參數(shù)說明

keyframes 中對象的結構

示例代碼

在開發(fā)者工具中預覽效果

  this.animate('#container', [
    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
    { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate屬性")
      })
  }.bind(this))

  this.animate('.block', [
    { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
    { scale: [2, 2], rotate: 90 },
  ], 5000, function () {
    this.clearAnimation('.block', function () {
      console.log("清除了.block上的所有動畫屬性")
    })
  }.bind(this))

調用 animate API 后會在節(jié)點上新增一些樣式屬性覆蓋掉原有的對應樣式。如果需要清除這些樣式，可在該節(jié)點上的動畫全部執(zhí)行完畢后使用 this.clearAnimation 清除這些屬性。

this.clearAnimation(selector, options, callback)

參數(shù)說明

滾動驅動的動畫

我們發(fā)現(xiàn)，根據(jù)滾動位置而不斷改變動畫的進度是一種比較常見的場景，這類動畫可以讓人感覺到界面交互很連貫自然，體驗更好。因此，從小程序基礎庫 2.9.0 開始支持一種由滾動驅動的動畫機制。

基于上述的關鍵幀動畫接口，新增一個 ScrollTimeline 的參數(shù)，用來綁定滾動元素（目前只支持 scroll-view）。接口定義如下：

this.animate(selector, keyframes, duration, ScrollTimeline)

ScrollTimeline 中對象的結構

示例代碼

在開發(fā)者工具中預覽效果

  this.animate('.avatar', [{
    borderRadius: '0',
    borderColor: 'red',
    transform: 'scale(1) translateY(-20px)',
    offset: 0,
  }, {
    borderRadius: '25%',
    borderColor: 'blue',
    transform: 'scale(.65) translateY(-20px)',
    offset: .5,
  }, {
    borderRadius: '50%',
    borderColor: 'blue',
    transform: `scale(.3) translateY(-20px)`,
    offset: 1
  }], 2000, {
    scrollSource: '#scroller',
    timeRange: 2000,
    startScrollOffset: 0,
    endScrollOffset: 85,
  })

  this.animate('.search_input', [{
    opacity: '0',
    width: '0%',
  }, {
    opacity: '1',
    width: '100%',
  }], 1000, {
    scrollSource: '#scroller',
    timeRange: 1000,
    startScrollOffset: 120,
    endScrollOffset: 252
  })

高級的動畫方式

在一些復雜場景下，上述的動畫方法可能并不適用。

WXS 響應事件 的方式可以通過使用 WXS 來響應事件的方法來動態(tài)調整節(jié)點的 style 屬性。通過不斷改變 style 屬性的值可以做到動畫效果。同時，這種方式也可以根據(jù)用戶的觸摸事件來動態(tài)地生成動畫。

連續(xù)使用 setData 來改變界面的方法也可以達到動畫的效果。這樣可以任意地改變界面，但通常會產生較大的延遲或卡頓，甚至導致小程序僵死。此時可以通過將頁面的 setData 改為 自定義組件 中的 setData 來提升性能。下面的例子是使用 setData 來實現(xiàn)秒表動畫的示例。