Nativescript Child Animations

一个小的 NativeScript 插件，简化了多个子元素动画的处理。

安装

在您的 NativeScript 源目录中运行

tns plugin add nativescript-child-animations

这应该在您的项目中的 package.json 文件内添加 child animations 包，使其可用于使用。

使用

此子动画包通过提供一个函数来实现，该函数包括：一个父（容器）视图、一个动画定义、每个子视图动画之间的延迟以及可选的 'reverse' 布尔值。

1. 在您想使用它的组件中导入 NativescriptChildAnimations 模块

   import { animateChildren } from 'nativescript-child-animations';

2. 使用参数调用 animateChildren() 函数

   animateChildren(parentView, animationDef, 70);

示例

example.component.html

<FlexBoxLayout flexDirection="column" id="parent">
  <Label style="transform: translate(0, -800)" text="I'm First!"></Label>
  <Label style="transform: translate(0, -800)" text="I'm Second!"></Label>
  <Label style="transform: translate(0, -800)" text="I'm Third!"></Label>
</FlexBoxLayout>

example.component.ts

import { animateChildren } from 'nativescript-child-animations';
import { Component, OnInit } from '@angular/core';
import { Page } from 'tns-core-modules/ui/page/page';
import { FlexboxLayout } from 'tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout/stack-layout';
import { AnimationDefinition } from 'tns-core-modules/ui/animation/animation';
import { AnimationCurve } from 'tns-core-modules/ui/enums';

@Component({
    selector: 'Home',
    moduleId: module.id,
    templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
    parentView: FlexboxLayout | StackLayout;
    animationDef: AnimationDefinition = {
        translate: { x: 0, y: 0 },
        duration: 1000,
        curve: AnimationCurve.easeOut
    }

    constructor(private page: Page) {}

    ngOnInit(): void {
        this.page.on('navigatedTo', () => {
            this.parentView = this.page.getViewById('parent');
            animateChildren(this.parentView, this.animationDef, 70, true);
        });
    }
}