NativeScript 插件，用于暴露 Airbnb Lottie 以实现酷炫的动画。

变更日志

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

演示屏幕

这个.gif无法公正地展示流畅的动画

安装

要安装，请执行

tns plugin add @nativescript-community/ui-lottie

用法

NativeScript (核心)

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="@nativescript-community/ui-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-community/ui-lottie";

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

NativeScript Angular

模块

首先，您需要将 NativeScriptLottieModule 包含在您的 app.module.ts

import { NativeScriptLottieModule} from '@nativescript-community/ui-lottie/angular';

@NgModule({
    imports: [
        NativeScriptLottieModule
    ],
    ...
})

XML

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

组件

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

@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

引导

如果您想使用此插件与 Vue，请在您的 app.js 或 main.js 中这样做

import LottieView from '@nativescript-community/ui-lottie/vue';

Vue.use(LottieView);

这将安装并注册 LottieView 组件到您的 Vue 实例，现在您可以使用此插件了。

组件

<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/ 文件夹中。

属性（可绑定）

属性

方法

贡献者

bradmartin	NathanWalker	rhanb	HamdiWanis

itstheceo	mudlabs