nativescript-akylas-lottie | NativeScript 商城

NativeScript-Lottie

NativeScript 插件，用于展示 Airbnb Lottie 以实现出色的动画。

变更日志

本项目的所有显著变更都将记录在变更日志中。

演示屏幕

此 .gif 无法充分展示流畅的动画

LottieView

安装

要安装，请执行

tns plugin add nativescript-lottie

使用

NativeScript (核心)

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
    <StackLayout>
        <Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />
    </StackLayout>
</Page>

TS

import { LottieView } from "nativescript-lottie";

public yourLoadedEvent(args) {
    this._myLottie = args.object as LottieView; /// this is the instance of the LottieAnimationView
}

NativeScript Angular

XML

<StackLayout>
    <LottieView width="100" height="150" [src]="src" [loop]="loop" [autoPlay]="autoPlay" (loaded)="lottieViewLoaded($event)">     </LottieView>
</StackLayout>

组件

import { Component } from '@angular/core';
import { registerElement } from 'nativescript-angular';
import { LottieView } from 'nativescript-lottie';

registerElement('LottieView', () => LottieView);

@Component({
  templateUrl: 'home.component.html',
  moduleId: module.id
})
export class HomeComponent {
  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = [
      'Mobilo/A.json',
      'Mobilo/D.json',
      'Mobilo/N.json',
      'Mobilo/S.json'
    ];
    this.src = this.animations[0];
  }

  lottieViewLoaded(event) {
    this._lottieView = <LottieView>event.object;
  }
}

NativeScript Vue

Bootstrap（可能在 app.js 中）

Vue.registerElement(
  'LottieView',
  () => require('nativescript-lottie').LottieView
);

组件

<template>
    <Page class="page">
        <StackLayout>
            <LottieView height="130" src="PinJump.json" :loop="true" :autoPlay="true" @loaded="lottieViewLoaded"></LottieView>
        </StackLayout>
    </page
</template>

<script>
    export default {
        methods: {
            lottieViewLoaded(args) {
                this._lottieView = args.object;
            },
        },
        data() {
            return {
                _lottieView: null,
            }
        }
    };
</script>

资产

:fire: 您可以在 sample-effects 文件夹中找到动画。

Android

将动画文件放置在 NS 应用程序的 app/App_Resources/Android/src/main/assets 文件夹中。

注意：在 nativescript-vue 项目中，上述文件夹可能不存在。将文件放置在 platforms/android/app/src/main/assets。

iOS

将动画文件放置在您的 app/App_Resources/iOS/ 文件夹中。

属性（可绑定）

属性	类型	默认	描述
`autoPlay`	`布尔值`	`false`	如果为 `true`，则在加载时启动 LottieView 动画。
`loop`	`布尔值`	`false`	如果为 `true`，则连续循环动画。
`src`	`字符串`	`null`	动画路径到 `.json` 文件。

属性

属性	类型	默认	描述
`completionBlock`	`(布尔值) => void`	`null`	完成块将在动画完成后执行。动画在播放完毕且不再循环时被认为已完成。
`duration`	`数字`	`null`	获取动画的持续时间。
`progress`	`数字`	`0`	获取/设置动画的进度。
`speed`	`数字`	`1`	获取/设置动画的速度。

方法

方法	返回	参数	描述
`cancelAnimation`	`void`	None	暂停 LottieView 实例的动画。
`isAnimating`	`布尔值`	None	如果 LottieView 正在动画，则返回 true，否则返回 false。
`playAnimation`	`void`	None	播放 LottieView 实例的动画。
`playAnimationFromProgressToProgress`	`void`	startProgress, endProgress	从指定的起始和结束进度值（介于 0 和 1 之间）播放 LottieView 实例的动画。
`setColorValueDelegateForKeyPath`	`void`	value, keyPath	在 LottieView 实例中设置与指定 keyPath 匹配的每个属性上的提供颜色值。
`setOpacityValueDelegateForKeyPath`	`void`	value, keyPath	在 LottieView 实例中设置与指定 keyPath 匹配的每个属性上的提供不透明度值（0 - 1）。

贡献者


bradmartin	NathanWalker	rhanb	HamdiWanis


itstheceo	mudlabs