feat: add example with AnimationBuilder

Author: sis0k0

app/animation-builder.component.ts

@@ -0,0 +1,25 @@
+import { AnimationBuilder, style, animate } from '@angular/animations';
+import { Component, ViewChild } from '@angular/core';
+ 
+@Component({
+ template: `
+ <Button #button (tap)="makeAnimation()" class="btn btn-primary" text="Tap to disappear!"></Button>
+ `
+})
+export class AnimationBuilderComponent {
+ @ViewChild('button')
+ private button;
+
+ constructor(private _builder: AnimationBuilder) {}
+ 
+ makeAnimation() {
+ const myAnimation = this._builder.build([
+ style({ "opacity": 1 }),
+ animate(1000, style({ "opacity": 0 }))
+ ]);
+ 
+ const player = myAnimation.create(this.button.nativeElement);
+ 
+ player.play();
+ }
+}

app/animations-list.component.ts

@@ -18,6 +18,7 @@ class Link {
 })
 export class AnimationsListComponent {
  public links: Link[] = [
+ new Link("Animation builder", "/builder"),
  new Link("External animation", "/external"),
  new Link("Selector", "/selector"),
  new Link("Query with stagger", "/query-stagger"),

app/app.routing.ts

@@ -3,6 +3,7 @@ import { Routes } from "@angular/router";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 
 import { AnimationsListComponent } from "./animations-list.component";
+import { AnimationBuilderComponent } from "./animation-builder.component";
 import { ExternalAnimationComponent } from "./external-animation.component";
 import { FadeInOutComponent } from "./fade-in-out.component";
 import { OptionsComponent } from "./options.component";
@@ -14,6 +15,7 @@ import { QueryStaggerComponent } from "./query-stagger.component";
 const routes: Routes = [
  { path: "", pathMatch: "full", redirectTo: "list" },
  { path: "list", component: AnimationsListComponent },
+ { path: "builder", component: AnimationBuilderComponent },
  { path: "external", component: ExternalAnimationComponent },
  { path: "fade-in-out", component: FadeInOutComponent },
  { path: "options", component: OptionsComponent },
@@ -32,6 +34,7 @@ export class AppRoutingModule { }
 
 export const routedComponents = [
  AnimationsListComponent,
+ AnimationBuilderComponent,
  ExternalAnimationComponent,
  FadeInOutComponent,
  OptionsComponent,