NativeScript/e2e/ui-tests-app/app/animation/animation-army-100-page.ts

import * as view from "tns-core-modules/ui/core/view";
import { View } from "tns-core-modules/ui/core/view";
import * as pages from "tns-core-modules/ui/page";
import { Button } from "tns-core-modules/ui/button";
import { SegmentedBar, SegmentedBarItem } from "tns-core-modules/ui/segmented-bar";
import { Label } from "tns-core-modules/ui/label";
import { Animation, AnimationDefinition } from "tns-core-modules/ui/animation";
import * as fpsMeter from "tns-core-modules/fps-meter";

let fpsCallbackId;
export function onLoaded(args) {
    const page = args.object;
    const fpsLabel = view.getViewById(page, "fps") as Label;
    fpsCallbackId = fpsMeter.addCallback((fps: number, minFps: number) => {
        fpsLabel.text = `${fps.toFixed(2)}/${minFps.toFixed(2)}`;
    });
    fpsMeter.start();
}

export function onUnloaded() {
    fpsMeter.removeCallback(fpsCallbackId);
    fpsMeter.stop();
}

export function getBoxPropertyAnimationData(property: string,
    animateEase: string,
    target: View,
    extentX: number = 128,
    extentY: number = 128) {
    let animateKey;
    let animateValueTo;
    let animateValueFrom;
    let animateDuration = animateEase === "spring" ? 800 : 500;
    let animateReturnDelay = animateEase === "spring" ? 0 : 200;

    // Determine the full animation property name (some are shortened in UI), and the demo to/from values
    switch (property) {
        case "height":
            target.originX = target.originY = 0.5;
            animateKey = "height";
            animateValueTo = 0;
            animateValueFrom = extentY;
            break;
        case "width":
            target.originX = target.originY = 0.5;
            animateKey = "width";
            animateValueTo = 0;
            animateValueFrom = extentX;
            break;
        case "opacity":
            animateKey = "opacity";
            animateValueTo = 0;
            animateValueFrom = 1;
            break;
        case "color":
            animateKey = "backgroundColor";
            animateValueTo = "blue";
            animateValueFrom = "purple";
            break;
        case "rotate":
            target.originX = target.originY = 0.5;
            animateKey = "rotate";
            animateValueTo = 180;
            animateValueFrom = 0;
            break;
        case "scale":
            target.originX = target.originY = 0.5;
            animateKey = "scale";
            animateValueTo = { x: 0.1, y: 0.1 };
            animateValueFrom = { x: 1, y: 1 };
            break;
        default:
            throw new Error(`demo animation for "${property}" is not implemented`);
    }

    return {
        animateEase,
        animateKey,
        animateValueTo,
        animateValueFrom,
        animateReturnDelay,
        animateDuration
    };
}

export function easeAnimate(args) {
    const clicked = args.object as Button;
    const page: pages.Page = clicked.page;
    const select = view.getViewById(page, "select") as SegmentedBar;
    const item: SegmentedBarItem = select.items[select.selectedIndex];
    const animsIn: AnimationDefinition[] = [];
    const animsOut: AnimationDefinition[] = [];
    for (let i = 0; i < 100; i++) {
        const box = view.getViewById(page, "el-" + i) as Label;
        const prop = getBoxPropertyAnimationData(item.title, clicked.text, box, 32, 24);
        animsIn.push({
            [prop.animateKey]: prop.animateValueTo,
            delay: 15 * i,
            target: box,
            duration: prop.animateDuration,
            curve: prop.animateEase
        });
        animsOut.push({
            [prop.animateKey]: prop.animateValueFrom,
            target: box,
            delay: prop.animateReturnDelay + (5 * (Math.abs(i - 100))),
            duration: prop.animateDuration,
            curve: prop.animateEase
        });
    }
    new Animation(animsIn, false).play()
        .then(() => new Animation(animsOut, false).play())
        .catch((e) => console.log(e));
}