Add a new motion: Freeze about ember-animated HOT 9 OPEN

I thought I had already made a built-in wait motion, but I guess that wasn't in the library proper.

import { wait as waitUtil } from 'ember-animated';

export default function wait(sprite, opts) {
  return new Wait(sprite, opts).run();
}

class Wait extends Motion {
  * animate() {
    yield waitUtil(this.duration);
  }
}

from ember-animated.

I see. That works great!

So, there's no way to directly yield the wait call within my transition?

Intuitively I keep reaching for something like this

import { wait } from 'ember-animated';

export default Controller.extend({

  * transition({ duration, removedSprites }) {
    removedSprites.forEach(sprite => {
      yield wait(duration);
    });
  }
  
});

but it never actually works, and I end up going with Motions instead.

Will userland code ever actually be yield'ing within a transition? Maybe I need a mental model around Motion... it's under private but believe the class is public API? I could add some docs.

from ember-animated.

from ember-animated.

I have a local branch of the docs that I'm adding import paths and such to to facilitate our training on Monday. I'll add this.

If you were to just wait in the transition without ever initiating a motion
for a particular sprite, we have no reason to believe that sprite should
survive and interruption, because you weren’t using it.

I'm going to need more help understanding this. Maybe an example.

from ember-animated.

Think about what happens with removedSprites. If a removed sprite finishes its motion, it's done and we don't ever want to see it appearing on screen again. It would be confusing for it to continue to influence future transitions.

So when a transition is interrupted, we need to make a decision about which removed sprites to garbage collect vs keep in the next transition. The rule is that we keep ones that had at least one motion active when the interruption happened.

So if a transition never gets around to assigning any motion to a particular removed sprite, at interruption we're just going to delete it as unused. The transition is basically telling us it doesn't care about that sprite because that sprite is not "in motion".

If you do care about a sprite, even if only because it must stay visible in one place, then you need a wait motion to hold onto it.

from ember-animated.

@ef4 Could I PR this? It'd be great to have in my training on Monday.

from ember-animated.

Here's what I ended up with, for a "box" (say, an image) that starts out visible, and becomes a placeholder (still in the DOM and taking up space) while a separate Sprite is doing its thang.

In this case, I need the image to immediately hide when isFocused becomes true, at which point I show a placeholder; and when isFocused becomes false, I want to wait until the animation is finished to show it again.

<AnimatedContainer>
  {{#animated-if isFocused use=transition duration=1000}}
    <div class="w-16 h-16 opacity-0 pointer-events-none" data-animation-id='placeholder'>
    </div>
  {{else}}
    <div class="bg-red w-16 h-16">
    </div>
  {{/animated-if}}
</AnimatedContainer>

* transition({ removedSprites }) {
  removedSprites.forEach(sprite => {
    if (sprite.element.dataset.animationId === 'placeholder') {
      wait(sprite);
    }
  });
},

Not sure if this is good or if there's a simpler way.

Here's the rendering, the green box is there for reference to see how long the duration lasts.

from ember-animated.

Boom – and just like that I got it working!

from ember-animated.

Sure. Maybe we should call it "freeze" (inspired by the title of the PR) to distinguish from the lower-level wait function that is really just a promise-based setTimeout.

from ember-animated.