支付寶小程序API 動畫·Animation

my.createAnimation

簡介

my.createAnimation 是用于創(chuàng)建動畫實例 animation 的 API。調(diào)用實例的方法來描述動畫，最后通過動畫實例的 export 方法將動畫數(shù)據(jù)導(dǎo)出并傳遞給組件的 animation 屬性。

使用限制

調(diào)用 export 方法后，之前的動畫操作將會被清除。

掃碼體驗

示例代碼

// API-DEMO page/API/animation/animation.json
{
    "defaultTitle": "Animation"
}

<!-- API-DEMO page/API/animation/animation.axml-->
<view class="page">
  <view class="page-description">動畫 API</view>
  <view class="page-section">
    <view class="page-section-title">my.createAnimation</view>
    <view class="page-section-demo">
      <view class="animation-element" animation="{{animation}}"></view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="rotate">旋轉(zhuǎn)</view>
      <view type="primary" onTap="scale"> 縮放</view>
      <view type="primary" onTap="translate">移動</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="skew">傾斜</view>
      <view type="primary" onTap="rotateAndScale">旋轉(zhuǎn)并縮放</view>
      <view type="primary" onTap="rotateThenScale">旋轉(zhuǎn)后縮放</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="all">同時展示全部</view>
      <view type="primary" onTap="allInQueue">順序展示全部</view>
      <view type="primary" onTap="reset">還原</view>
    </view>
  </view>
</view>

// API-DEMO page/API/animation/animation.js
Page({
  onReady() {
    this.animation = my.createAnimation()
  },
  rotate() {
    this.animation.rotate(Math.random() * 720 - 360).step()
    this.setData({ animation: this.animation.export() })
  },
  scale() {
    this.animation.scale(Math.random() * 2).step()
    this.setData({ animation: this.animation.export() })
  },
  translate() {
    this.animation.translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
    this.setData({ animation: this.animation.export() })
  },
  skew() {
    this.animation.skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({ animation: this.animation.export() })
  },
  rotateAndScale() {
    this.animation.rotate(Math.random() * 720 - 360)
      .scale(Math.random() * 2)
      .step()
    this.setData({ animation: this.animation.export() })
  },
  rotateThenScale() {
    this.animation.rotate(Math.random() * 720 - 360).step()
      .scale(Math.random() * 2).step()
    this.setData({ animation: this.animation.export() })
  },
  all() {
    this.animation.rotate(Math.random() * 720 - 360)
      .scale(Math.random() * 2)
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50)
      .skew(Math.random() * 90, Math.random() * 90)
      .step()
    this.setData({ animation: this.animation.export() })
  },
  allInQueue() {
    this.animation.rotate(Math.random() * 720 - 360).step()
      .scale(Math.random() * 2).step()
      .translate(Math.random() * 100 - 50, Math.random() * 100 - 50).step()
      .skew(Math.random() * 90, Math.random() * 90).step()
    this.setData({ animation: this.animation.export() })
  },
  reset() {
    this.animation.rotate3d(0, 0, 0, 0)
      .rotateX(0)
      .rotateY(0)
      .rotateZ(0)
      .scale(1)
      .translate(0, 0)
      .skew(0, 0)
      .step({ duration: 0 })
    this.setData({ animation: this.animation.export() })
  }
})

/* API-DEMO page/API/animation/animation.acss */
.animation-element {
  width: 200rpx;
  height: 200rpx;
  background-color: #108ee9;
  transform: scaleX(1) scaleY(1);
}

入?yún)?/h4>

Object 類型，屬性如下：

屬性	類型	必填	描述
duration	Integer	否	動畫的持續(xù)時間，單位 ms，默認(rèn)值 400。
timeFunction	String	否	定義動畫的效果，默認(rèn)值“l(fā)inear”，有效值：linear、ease、ease-in、ease-in-out、ease-out、step-start、step-end。
delay	Integer	否	動畫延遲時間，單位 ms，默認(rèn)值 0。
transformOrigin	String	否	設(shè)置 transform-origin，默認(rèn)值“50% 50% 0”。

示例代碼

//.js
const animation = my.createAnimation({
  transformOrigin: "top right",
  duration: 3000,
  timeFunction: "ease-in-out",
  delay: 100,
})

animation

動畫實例可以調(diào)用以下方法來描述動畫，調(diào)用結(jié)束后會返回實例本身，支持鏈?zhǔn)秸{(diào)用的寫法。view 的 animation 屬性初始化為 {} 時，在基礎(chǔ)庫 1.11.0（不包含 1.11.0）及以下版本會報錯，建議初始化為 null。

樣式

旋轉(zhuǎn)

縮放

偏移

傾斜

矩陣變形

動畫隊列

• 調(diào)用動畫操作方法后，需調(diào)用 step() 用于表示一組動畫完成，在一組動畫中可以調(diào)用任意多個動畫方法，一組動畫中的所有動畫會同時開始，當(dāng)一組動畫完成后才會進(jìn)行下一組動畫。
• step() 可以傳入一個跟 my.createAnimation() 一樣的配置參數(shù)用于指定當(dāng)前組動畫的配置。