欧美日韩精品一区二区在线线,一级无码在线收看,精品国产高清91,久久精品欧美电影
取消
中文
EN
取消

# 動畫

# 界面動畫的常見方式

在小程序中，通?？梢允褂?CSS 漸變 和 CSS 動畫 來創(chuàng)建簡易的界面動畫。

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

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

事件名 含義
transitionend CSS 漸變結(jié)束或 wx.createAnimation 結(jié)束一個階段
animationstart CSS 動畫開始
animationiteration CSS 動畫結(jié)束一個階段
animationend CSS 動畫結(jié)束

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

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

# 關(guān)鍵幀動畫

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

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

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

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

參數(shù)說明

屬性 類型 默認值 必填 說明
selector String 是 選擇器（同 SelectorQuery.select 的選擇器格式）
keyframes Array 是 關(guān)鍵幀信息
duration Number 是 動畫持續(xù)時長（毫秒為單位）
callback function 否 動畫完成后的回調(diào)函數(shù)

keyframes 中對象的結(jié)構(gòu)

屬性 類型 默認值 必填 說明
offset Number 否 關(guān)鍵幀的偏移，范圍[0-1]
ease String linear 否 動畫緩動函數(shù)
transformOrigin String 否 基點位置，即 CSS transform-origin
backgroundColor String 否 背景顏色，即 CSS background-color
opacity Number 否 不透明度，即 CSS opacity
width String 否 寬度，即 CSS width
height String 否 高度，即 CSS height
left String 否 左邊位置，即 CSS left
top String 否 頂邊位置，即 CSS top
right String 否 右邊位置，即 CSS right
bottom String 否 底邊位置，即 CSS bottom
matrix Array 否 變換矩陣，即 CSS transform matrix
matrix3d Array 否 三維變換矩陣，即 CSS transform matrix3d
rotate Number 否 旋轉(zhuǎn)，即 CSS transform rotate
rotate3d Array 否 三維旋轉(zhuǎn)，即 CSS transform rotate3d
rotateX Number 否 X 方向旋轉(zhuǎn)，即 CSS transform rotateX
rotateY Number 否 Y 方向旋轉(zhuǎn)，即 CSS transform rotateY
rotateZ Number 否 Z 方向旋轉(zhuǎn)，即 CSS transform rotateZ
scale Array 否 縮放，即 CSS transform scale
scale3d Array 否 三維縮放，即 CSS transform scale3d
scaleX Number 否 X 方向縮放，即 CSS transform scaleX
scaleY Number 否 Y 方向縮放，即 CSS transform scaleY
scaleZ Number 否 Z 方向縮放，即 CSS transform scaleZ
skew Array 否 傾斜，即 CSS transform skew
skewX Number 否 X 方向傾斜，即 CSS transform skewX
skewY Number 否 Y 方向傾斜，即 CSS transform skewY
translate Array 否 位移，即 CSS transform translate
translate3d Array 否 三維位移，即 CSS transform translate3d
translateX Number 否 X 方向位移，即 CSS transform translateX
translateY Number 否 Y 方向位移，即 CSS transform translateY
translateZ Number 否 Z 方向位移，即 CSS transform translateZ

# 示例代碼

在開發(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))

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

this.clearAnimation(selector, options, callback)

參數(shù)說明

屬性 類型 默認值 必填 說明
selector String 是 選擇器（同 SelectorQuery.select 的選擇器格式）
options Object 否 需要清除的屬性，不填寫則全部清除
callback Function 否 清除完成后的回調(diào)函數(shù)

# 滾動驅(qū)動的動畫

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

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

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

ScrollTimeline 中對象的結(jié)構(gòu)

屬性 類型 默認值 必填 說明
scrollSource String 是 指定滾動元素的選擇器（只支持 scroll-view），該元素滾動時會驅(qū)動動畫的進度
orientation String vertical 否 指定滾動的方向。有效值為 horizontal 或 vertical
startScrollOffset Number 是 指定開始驅(qū)動動畫進度的滾動偏移量，單位 px
endScrollOffset Number 是 指定停止驅(qū)動動畫進度的滾動偏移量，單位 px
timeRange Number 是 起始和結(jié)束的滾動范圍映射的時間長度，該時間可用于與關(guān)鍵幀動畫里的時間 (duration) 相匹配，單位 ms

# 示例代碼

在開發(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 響應(yīng)事件 的方式可以通過使用 WXS 來響應(yīng)事件的方法來動態(tài)調(diào)整節(jié)點的 style 屬性。通過不斷改變 style 屬性的值可以做到動畫效果。同時，這種方式也可以根據(jù)用戶的觸摸事件來動態(tài)地生成動畫。

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

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