add year-of-moo-animation App about unicorn-whale HOT 13 CLOSED

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

from unicorn-whale.

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

from unicorn-whale.

boom:

from unicorn-whale.

not managing players properly :(

from unicorn-whale.

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

from unicorn-whale.

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

from unicorn-whale.

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)

from unicorn-whale.

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;
}

from unicorn-whale.

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

from unicorn-whale.

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

from unicorn-whale.

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();
}

from unicorn-whale.

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

from unicorn-whale.

this latest strategy appears to be working:

from unicorn-whale.