I have an ImageView that I'm rotating for use as a loading animation. Once my data is loaded, I try to stop the animation, but instead of cycling to the end and then stopping, the animation goes to a halfway point, then stops, and then the image snaps back to its original state, which looks pretty ugly.
Here is what I've tried:
Option 1:
ImageView iv = (ImageView) findViewById(R.id.refreshImage);
if (iv != null) {
iv.clearAnimation();
}
Option 2:
ImageView iv = (ImageView) findViewById(R.id.refreshImage);
if (iv != null && iv.getAnimation() != null) {
iv.getAnimation().cancel();
}
Option 3:
ImageView iv = (ImageView) findViewById(R.id.refreshImage);
if (iv != null && iv.getAnimation() != null) {
iv.getAnimation().setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
animation.cancel();
}
@Override
public void onAnimationEnd(Animation animation) {
}
});
}
The end result is the same in all three cases. How do I rotate the image and have it end up back where it started?
Edit:
Some further information: My rotation animation:
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromDegrees="0"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
How I start the animation:
ImageView iv = (ImageView) findViewById(R.id.refreshImage);
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
rotation.setRepeatCount(Animation.INFINITE);
iv.startAnimation(rotation);
CSS animations emit events, so you can use the animationend event to intervene when the animation ends. const element = document. getElementById("element-to-be-animated"); element. addEventListener("animationend", () => { // Set your final state here.
The basics of pausing an animation The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element. style.
Use the animation-play-state property to play/pause the animation. Mention the keyframes properties 'from' and 'to' to mention the start and end of the animation.
Use clearAnimation() to stop an animation.
Set the animation repeatcount to infinite before you start it, then when the action finishes, set the repeatcount of the animation to 0. The animation will finish the current loop and the stop without the jump that you want to avoid.
//How you start
Animation rotation = AnimationUtils.loadAnimation(this, R.anim.rotate);
rotation.setRepeatCount(Animation.INFINITE);
iv.startAnimation(rotation);
//You do your stuff while it spins
...
//You tell it not to repeat again
rotation.setRepeatCount(0);
It's important that you first set it to Animation.INFINITE
(or -1 since they do the same) and then to 0
, if you set it to 1000
for instance, then it wont stop for some reason according to my testing.
You can use rotation.setFillAfter(true)
;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With