nativescript
नेटिवस्क्रिप्ट में एनिमेशन को लागू करना

StackLayout की पृष्ठभूमि एनीमेशन

टैपिंग बटन पर स्टैकलआउट का पृष्ठभूमि रंग एनिमेटेड

पृष्ठों / main.component.ts

import {Component, ElementRef, ViewChild} from "@angular/core";
import {Color} from "color";
import {View} from "ui/core/view";

    @Component({
        selector: "main",
        template: `
            <StackLayout #el>
              <Button text="Apply Changes" (tap)="changeBgColor()"></Button>
            </StackLayout>
        `,
        styleUrls: ["pages/main/main-common.css"],
    })
    
    export class MainComponent {
        @ViewChild("el") el: ElementRef;
        changeBgColor() {
            let el = <View>this.el.nativeElement;
            el.animate({
                backgroundColor: new Color("#222"),
                duration: 300
            });
        }
    }

पृष्ठों / मुख्य-common.css

StackLayout{
    background-color: #333;
}

एनीमेशन समय समारोह और एनीमेशन गुणों का उपयोग।

पृष्ठों / main.component.ts

import {Component, ElementRef, ViewChild} from "@angular/core";
import {View} from "ui/core/view";
import {AnimationCurve} from "ui/enums";

@Component({
    selector: "main",
    template: `
        <StackLayout>
          <Image #img src="~/assets/images/user-shape.png"></Image>
          <Button text="Apply Changes" (tap)="animateImage()"></Button>
        </StackLayout>
    `,
    styleUrls: ["pages/main/main-common.css"],
})

export class MainComponent {
    @ViewChild("img") img: ElementRef;
    animateImage() {
        let img = <View>this.img.nativeElement;
        img.animate({
            translate: { x: 0, y: 120 },
            duration: 2000,
            curve: AnimationCurve.easeIn
        });
    }
}

अन्य एनीमेशन गुणों के लिए #snippet

आप CubicBezier का उपयोग करके अपना खुद का टाइमिंग फंक्शन भी लिख सकते हैं।

1. क्यूबिकियर का उपयोग

img.animate({
        translate: { x: 0, y: 120 },
        duration: 2000,
        curve: AnimationCurve.cubicBezier(0.1, 0.2, 0.1, 1)
  });

2. एनिमेशन गुण

अस्पष्टता

img.animate({
    opacity: 0,
    duration: 2000
});

अनुवाद करना

img.animate({
    translate: { x: 120, y: 0},
    duration: 2000
});

स्केल

img.animate({
    scale: { x: 1.5, y: 1.5},
    duration: 2000
});

घुमाएँ

img.animate({
    rotate: 270,
    duration: 2000
});