Nhảy tới nội dung

my.createAnimation

createAnimation

my.createAnimation là API để tạo ra một animation instance.

Animation instance sử dụng các hàm của nó để mô tả animation và cuối cùng, sử dụng hàm export để truyền thuộc tính animation vào các view trên TXML.

Quét mã để trải nghiệm​

Xem code mẫu trên Tini Studio

Demo​

Trải nghiệm thử với trình giả lập bên dưới

API Params​

Thuộc tínhKiểu dữ liệuMô tả
durationNumberThời gian để animation được thực hiện, mặc định là 400ms
timeFunctionStringHiệu ứng để thực hiện animation, có thể nhận các giá trị: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end. Mặc định là linear.
delayNumberAnimation delay time. Đơn vị tính mili giây.
transformOriginstringGiá trị ban đầu của CSS transform.

Sample Code​

.animation-element {
  width: 100px;
  height: 100px;
  background: red;
}
<view class="page">
  <view class="page-description">Animation</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">Rotate/view>
      <view type="primary" onTap="scale">Scale</view>
      <view type="primary" onTap="translate">Translate</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="skew">Skew</view>
      <view type="primary" onTap="rotateAndScale">Rotate and scale</view>
      <view type="primary" onTap="rotateThenScale">Rotate then scale</view>
    </view>
    <view class="page-section-btns">
      <view type="primary" onTap="all">All animation</view>
      <view type="primary" onTap="allInQueue">All in queue</view>
      <view type="primary" onTap="reset">Reset</view>
    </view>
  </view>
</view>
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() });
  }
});