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,