add year-of-moo-animation App

[BryanWilhite]

continuing on from #4, the two subtopics should be covered immediately:

• https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#using-animation-and-useanimation
• https://www.yearofmoo.com/2017/06/new-wave-of-animation-features.html#programmatic-animations-with-animationbuilder

[BryanWilhite]

ng generate app year-of-moo-animation --skip-tests --style=scss --dry-run

ng generate component components/index --flat=false --module=app --project=year-of-moo-animation --spec=false --styleext=scss --dry-run
ng generate component components/use-animation --flat=false --module=app --project=year-of-moo-animation --spec=false --styleext=scss --dry-run
ng generate component components/animation-builder --flat=false --module=app --project=year-of-moo-animation --spec=false --styleext=scss --dry-run

[BryanWilhite]

to switch apps for npm start the defaultProject config setting (in angular.json) has to be set; to check the current value:

ng config defaultProject

to set the value:

ng config defaultProject year-of-moo-animation

[BryanWilhite]

boom:

[BryanWilhite]

not managing players properly :(

[BryanWilhite]

i've noticed that @matsko never uses AnimationPlayer.reset() in his entire demo repository; in his sole example, showing the use of AnimationBuilder, he has a method, animateTo() that appears to not reuse instances of AnimationPlayer

when @matsko uses the term reusable he is almost always referring to reusable AnimationReferenceMetadata not reusable AnimationPlayer instances; nevertheless there is a reason why methods reset() and setPosition(0) exist on AnimationPlayer

[BryanWilhite]

the animation-builder demo is not working at all on Chrome; simultaneously a warning message in the console on Edge suggest that web-animations-js [NPM] is required

[BryanWilhite]

this is the pattern that is working:

slideBack(): void {
    this.photos.forEach(img => {
        const player = this.getImgPlayer(slideBackAnimation, img);
        player.play();
    });
}
slideForward(): void {
    this.photos.forEach(img => {
        const player = this.getImgPlayer(slideForwardAnimation, img);
        player.play();
    });
}

previously, i tried to store AnimationPlayer[] in a private field in order to loop through each and play() but this did not work on Chrome

my concern however is that these local instances of player might be stacking up in memory; i thought i was being clever by doing this:

player.onDone(() => player.destroy());

but this throws errors likely due to race conditions (then there is a temptation to delay the call with something like setTimeout but this feels like playing games)

[BryanWilhite]

this 'game' is working:

player.onDone(() => {
    console.log(`player ${player['id']} done`, player);
    setTimeout(() => player.destroy(), 500);
});

however, the final animation state is destroyed when the player is destroyed

more context around the above:

private getPlayer(
    animationMetadata: AnimationReferenceMetadata,
    el: Element
): AnimationPlayer {
    const factory = this.animationBuilder.build(animationMetadata);
    const x = el.clientWidth / 2;
    const player = factory.create(el, { params: { x: x } });
    player.onDestroy(() => console.log(`player ${player['id']} destroyed`));
    player.onDone(() => {
        console.log(`player ${player['id']} done`, player);
        setTimeout(() => player.destroy(), 500);
    });
    return player;
}

[BryanWilhite]

quick look at the reset() method:

this move does not pop the element back to where it started the animation on Edge—on Chrome it is fine:

player.onDone(() => {
    console.log(`player ${player['id']} done`, player);
    setTimeout(() => player.reset(), 500);
});

this is telling me, i need to resolve #8

[BryanWilhite]

for this particular example the goal post will be moved to show both of these scenarios:

• reusing an animation player
• using an animation player once (and destroying it before it is replaced)

the latter scenario is important when AnimationOptions.params need to change frequently for a given animation

[BryanWilhite]

this approach is not working:

slideDivBack(): void {
    const player = this.simpleBlockAnimationMeta.slideBackPlayer;
    if (player.hasStarted()) {
        player.reset();
    }
    player.play();
}
slideDivForward(): void {
    const player = this.simpleBlockAnimationMeta.slideForwardPlayer;
    if (player.hasStarted()) {
        player.reset();
    }
    player.play();
}

[BryanWilhite]

another approach: exclusively address the concern of using an animation player once (and destroying it before it is replaced)

the arguments passed to getPlayer() should contain a unique ID; this unique ID should be saved in a private array of { id: string, player: AnimationPlayer }

the catch is around generating the unique ID

[BryanWilhite]

this latest strategy appears to be working: