I recall an older convo on here regarding pausing ...

# compose

[Tash]

I recall an older convo on here regarding pausing animations with ManualAnimationClock.
In general what’s the declarative way to think about “freezing” and “resuming/reverting” animations, and are there any related APIs at the moment? Came across *Pausable*MonotonicFrameClock but seems like a lower level API 🤔

[Doris Liu]

What's the use case you are trying to achieve with pausing? Maybe there are other ways to do it.

[Tash]

Sure! I am working on an animation where you can drag and fling an item offscreen. Would like for a way for that animation to be intercepted and “frozen” by the parent component, and later “resumed” or “reverted” if needed. Happy to offer more details if needed!

[Tash]

High-level thinking that it might be Transition based, and there could be states such as Idle, Fling, Frozen, or something like that, so that the transition state can be set by the parent component (assuming that state gets hoisted out of the draggable/animating component)

[Doris Liu]

Fling is sort of indeterministic in terms of initial velocity and consequently where it's going to stop naturally (i.e. target value). Transition may not support that depending on what's the intended behavior for your Fling. Sounds like what could be helpful here is some form of seeking support for Transition, where you can control the progress explicitly.

[Doris Liu]

Unfortunately, we don't have a seeking API yet. 😅 You may be able to create a clock and freeze it, but reversing that clock likely won't work as stateful animations don't anticipate time to go backwards, and therefore child animations of a Transition will not change their states from finished to unfinished if time goes backward past their finishing time.

With that said, for now I'd recommend using an Animatable to animate a single progress, and derive other animation values from that progress. It's unfortunate, but hopefully we'll have an API for seeking soon.

[Tash]

Ahh, I see. At the moment, I have something like:

class SwipeableItemState {

  val animatableOffset = Animatable(Offset(0f, 0f), Offset.VectorConverter)

  fun pause() {
    / ** pause whatever is going on at this point **/
  }
  
  fun flingAway() {
    // Calculate fling target, determine custom endX,endY
    animatableOffset.animateTo(
      targetValue = Offset(endX, endY),
      initialVelocity = startVelocity
    )
  }

}

[Tash]

But yeah, I think I get what you mean. I wonder if animateTo was in launch { } and the Job was prematurely cancelled….would that freeze the Animatable to wherever it was 🤔

[Doris Liu]

Yes, if the job was cancelled, the animation will be stopped and the velocity will be reset to 0. Visually it would look like the animation is frozen. Since we are talking about pausing and resuming the animation, it's probably not a concern that next time when you start the animation again (at some point) it starts with a 0 velocity. If you do care about resuming with the same velocity, you could call stop() on the Animatable and store the velocity from the returned AnimationResult.endState

[Tash]

Oh wow, this is great info, thank you loads! Will play around with this and see how it goes 🙏🏼

[Rafs]

I am faced with a similar issue where I have to pause and resume the animation but it seems the animation properties are reset. The duration is reset again causing the animation to run for the same amount of time as though it was restarted. @Doris Liu

[Doris Liu]

@Rafs do you mind sharing your use case for pausing and resuming? 🙂