当前位置：首页 > 软件库 > 手机/移动开发 > >

ui-lottie

NativeScript plugin to expose Airbnb Lottie

授权协议 View license

开发语言 JavaScript TypeScript

所属分类手机/移动开发

软件类型开源软件

地区不详

投递者燕翔飞

操作系统 iOS

开源组织无

适用人群未知

软件官网

软件文档

官方下载

软件概览

nativescript-community/ui-lottie

NativeScript plugin to expose Airbnb Lottie for awesome animations.

Changelog

All notable changes to this project will be documented in the changelog.

Demo Screen

The .gif does not do the fluid animations justice

Installation

To install execute:

tns plugin add @nativescript-community/ui-lottie

Usage

NativeScript (Core)

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

XML

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

Component

import { Component } from '@angular/core';
import { registerElement } from 'nativescript-angular';
import { LottieView } from '@nativescript-community/ui-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 (probably in app.js)

Vue.registerElement(
  'LottieView',
  () => require('@nativescript-community/ui-lottie').LottieView
);

Component

<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>

Assets

�� You can find animations in the sample-effects folder.

Android

Place your animation files in the NS app's app/App_Resources/Android/src/main/assets folder.

Note: In a nativescript-vue project the above folder may not exist. Place the files in platforms/android/app/src/main/assets.

iOS

Place your animations files in your app/App_Resources/iOS/ folder.

Properties (bindable)

Property	Type	Default	Description
`autoPlay`	`boolean`	`false`	Start LottieView animation on load if `true`.
`loop`	`boolean`	`false`	Loop continuously animation if `true`.
`src`	`string`	`null`	Animation path to `.json` file.

Properties

Property	Type	Default	Description
`completionBlock`	`(boolean) => void`	`null`	Completion block to be executed upon completion of the animation. The animation is considered complete when it finishes playing and is no longer looping.
`duration`	`number`	`null`	Get the duration of the animation.
`progress`	`number`	`0`	Get/set the progress of the animation.
`speed`	`number`	`1`	Get/set the speed of the animation.

Methods

Method	Return	Parameters	Description
`cancelAnimation`	`void`	None	Pauses the animation for the LottieView instance.
`isAnimating`	`boolean`	None	Returns true if the LottieView is animating, else false.
`playAnimation`	`void`	None	Plays the animation for the LottieView instance.
`playAnimationFromProgressToProgress`	`void`	startProgress, endProgress	Plays the animation for the LottieView instance from the specified start and end progress values (between 0 and 1).
`setColorValueDelegateForKeyPath`	`void`	value, keyPath	Sets the provided color value on each property that matches the specified keyPath in the LottieView instance.
`setOpacityValueDelegateForKeyPath`	`void`	value, keyPath	Sets the provided opacity value (0 - 1) on each property that matches the specified keyPath in the LottieView instance.

Contributors


bradmartin	NathanWalker	rhanb	HamdiWanis


itstheceo	mudlabs

使用案例

vue-lottie实现前端动画

Lottie简介官方文档：https://lottiefiles.com/ Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。交互性非常好，动画支持倍速播放，倒放
iOS动画库-lottie

前几天airbnb开源了一个动画库lottie,地址是github.com/airbnb/lott… 是一个通过AE制作动画后通过插件bodymoving转换成json文件。在native或者react-native中直接播放动画的一个库。假若用app动画效果这方面需求，可以不用写任何关于动画相关的代码直接加入一个json文件就足够了 ##适用范围以往动画往往的通过gif或者手写一长串代码才能实
lottie

在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 2.全局引入vue-lottie 在main.js引入并注册全局组件即可 import lottie from 'vue-lottie'; Vue.component('lottie', lottie) 当然也可以局部引入 3.引入你的lottie资源 // 第一步：

ui-lottie

nativescript-community/ui-lottie

NativeScript plugin to expose Airbnb Lottie for awesome animations.

Changelog

Demo Screen

Installation

Usage

NativeScript (Core)

XML

TS

NativeScript Angular

XML

Component

NativeScript Vue

Bootstrap (probably in app.js)

Component

Assets

Android

iOS

Properties (bindable)

Properties

Methods

Contributors

同类工具

相关阅读

相关文章

相关问答

相关文档