lottie

lottie là thư viện cho phép chạy các hoạt ảnh kết xuất từ After Effects và có thể chạy trên ứng dụng mobile và web. Bạn có thể điều khiển lottie component thông qua my.createLottieContext api.

Để hiểu thêm về lottie, vui lòng tham khảo https://airbnb.io/lottie.

Khả dụng: chỉ hỗ trợ từ phiên bản 17.5.2 trở lên.

Thuộc tính

Thuộc tính	Kiểu dữ liệu	Mô tả
path	string	Đường dẫn tới nội dung của file json. Hỗ trợ các file local hoặc remote
autoplay	boolean	Tự động phát animation. Mặc định là false.
speed	number	Tốc độ animation. Mặc định là 1. Giá trị từ 0 đến 1: tốc độ chậm lại; giá trị lớn 1: nhanh hơn.
onComplete	event	Sự kiện được gọi khi việc phát animation kết thúc, không tính phần loop.
onDataFailed	event	Sự kiện được kích hoạt khi load animation thất bại.
onDataReady	event	Sự kiện được kích hoạt khi animation được load xong.
onLoopComplete	event	Animation đuợc phát lần đầu tiên. Nó tiếp tục được phát lại (loop) lần 1, 2, 3 ... Ngay khi loop lần 1 kết thúc, sự kiện onLoopComplete sẽ đuợc kích hoạt

Lưu ý

Nếu gặp trường hợp lottie không hiển thị, bạn có thể kiểm tra nội dung của file lottie tại đây

Sample Code

Một số component được sử dụng trong source API Demo.

index.txml

<view class="container">
  <view class="block">
    <lottie
      id="lottie"
      loop="{{true}}"
      autoplay="{{true}}"
      onComplete="onComplete"
      onLoopComplete="onLoopComplete"
      onDataFailed="onDataFailed"
      onDataReady="onDataReady"
      path="./lottie.json"
    />
  </view>

  <view class="block">
    <view class="actions">
      <button onTap="play" size="small">Play</button>
      <button onTap="pause" size="small">Pause</button>
      <button onTap="stop" size="small">Stop</button>
      <button onTap="toggleDirection" size="small">Switch direction</button>
      <button onTap="decrease" size="small">- Speed</button>
      <button onTap="increase" size="small">+ Speed</button>
      <button onTap="goToAndStop" size="small">Go and stop</button>
      <button onTap="goToAndPlay" size="small">Go and play</button>
    </view>
  </view>
</view>

index.js

Page({
  speed: 1,
  onLoad() {
    this.lottieContext = my.createLottieContext('lottie');
  },
  onComplete(e) {
    console.log('onComplete', e);
  },
  onDataFailed(e) {
    console.log('onComplete', e);
  },
  onDataReady(e) {
    console.log('onDataReady', e);
  },
  onLoopComplete(e) {
    console.log('onLoopComplete', e);
  },
  lottieContext: null,
  play() {
    this.lottieContext.play();
  },
  pause() {
    this.lottieContext.pause();
  },
  stop() {
    this.lottieContext.stop();
  },
  decrease() {
    this.speed = this.speed - 0.1;
    this.lottieContext.setSpeed({ value: this.speed });
  },
  increase() {
    this.speed = this.speed + 0.1;
    this.lottieContext.setSpeed({ value: this.speed });
  },
  goToAndStop() {
    this.lottieContext.goToAndStop({ value: 0.1 });
  },
  goToAndPlay() {
    this.lottieContext.goToAndPlay({ value: 0.8 });
  },
  toggleDirection() {
    this.lottieContext.setDirection({
      value: this.direction === -1 ? 1 : -1
    });
  }
});