Wie mache ich eine reibungslose Bildrotation in Android?

Ich verwende a RotateAnimation, um ein Bild zu drehen, das ich als benutzerdefinierten zyklischen Spinner in Android verwende. Hier ist meine rotate_indefinitely.xmlDatei, in die ich gelegt habe res/anim/:

<?xml version="1.0" encoding="UTF-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:duration="1200" />    

Wenn ich dies auf meine ImageViewVerwendung anwende AndroidUtils.loadAnimation(), funktioniert es großartig!

spinner.startAnimation( 
    AnimationUtils.loadAnimation(activity, R.anim.rotate_indefinitely) );

Das einzige Problem ist, dass die Bilddrehung am Anfang jedes Zyklus anzuhalten scheint.

Mit anderen Worten, das Bild dreht sich um 360 Grad, hält kurz an und dreht sich dann wieder um 360 Grad usw.

Ich vermute, dass das Problem darin besteht, dass die Animation einen Standardinterpolator wie android:iterpolator="@android:anim/accelerate_interpolator"( AccelerateInterpolator) verwendet, aber ich weiß nicht, wie ich ihm sagen soll, dass die Animation nicht interpoliert werden soll.

Wie kann ich die Interpolation deaktivieren (wenn dies tatsächlich das Problem ist), um meinen Animationszyklus reibungslos zu gestalten?

Sie haben Recht mit AccelerateInterpolator; Sie sollten stattdessen LinearInterpolator verwenden.

Sie können das in android.R.anim.linear_interpolatorIhrer Animations-XML-Datei integrierte mit verwenden android:interpolator="@android:anim/linear_interpolator".

Oder Sie können Ihre eigene XML-Interpolationsdatei in Ihrem Projekt erstellen, z. B. benennen Sie sie res/anim/linear_interpolator.xml:

<?xml version="1.0" encoding="utf-8"?>
<linearInterpolator xmlns:android="http://schemas.android.com/apk/res/android" />

Und fügen Sie Ihrer Animation XML hinzu:

android:interpolator="@anim/linear_interpolator"

Besonderer Hinweis: Wenn sich Ihre Rotationsanimation innerhalb eines Sets befindet, scheint das Einstellen des Interpolators nicht zu funktionieren. Durch Drehen des oberen Elements wird das Problem behoben. (Dies spart Zeit.)

Ich hatte auch dieses Problem und versuchte erfolglos, den linearen Interpolator in XML zu setzen. Die Lösung, die für mich funktioniert hat, bestand darin, die Animation als RotateAnimation im Code zu erstellen.

RotateAnimation rotate = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setDuration(5000);
rotate.setInterpolator(new LinearInterpolator());

ImageView image= (ImageView) findViewById(R.id.imageView);

image.startAnimation(rotate);

Das funktioniert gut

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1600"
    android:fromDegrees="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="358" />

Umkehren rückwärts drehen:

<?xml version="1.0" encoding="UTF-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1600"
    android:fromDegrees="358"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:toDegrees="0" />

Vielleicht hilft so etwas:

Runnable runnable = new Runnable() {
    @Override
    public void run() {
        imageView.animate().rotationBy(360).withEndAction(this).setDuration(3000).setInterpolator(new LinearInterpolator()).start();
    }
};

imageView.animate().rotationBy(360).withEndAction(runnable).setDuration(3000).setInterpolator(new LinearInterpolator()).start();

Übrigens können Sie um mehr als 360 drehen wie:

imageView.animate().rotationBy(10000)...

Versuchen Sie es mit, toDegrees="359"da 360 ° und 0 ° gleich sind.

ObjectAnimator.ofFloat(view, View.ROTATION, 0f, 360f).setDuration(300).start();

Versuche dies.

Rotationsobjekt programmgesteuert.

// Drehung im Uhrzeigersinn:

    public void rotate_Clockwise(View view) {
        ObjectAnimator rotate = ObjectAnimator.ofFloat(view, "rotation", 180f, 0f);
//        rotate.setRepeatCount(10);
        rotate.setDuration(500);
        rotate.start();
    }

// Drehung gegen den Uhrzeigersinn:

 public void rotate_AntiClockwise(View view) {
        ObjectAnimator rotate = ObjectAnimator.ofFloat(view, "rotation", 0f, 180f);
//        rotate.setRepeatCount(10);
        rotate.setDuration(500);
        rotate.start();
    } 

Ansicht ist ein Objekt Ihrer ImageView oder anderer Widgets.

rotate.setRepeatCount (10); Verwenden Sie diese Option, um Ihre Rotation zu wiederholen.

500 ist Ihre Animationszeitdauer.

Beschneiden des <set>Elements, das das Element umhüllt hat<rotate> Element hat, löst das Problem!

Danke an Shalafi!

Ihre Rotation_ccw.xml sollte also so aussehen:

<?xml version="1.0" encoding="utf-8"?>

<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="-360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:fillAfter="false"
    android:startOffset="0"
    android:repeatCount="infinite"
    android:interpolator="@android:anim/linear_interpolator"
    />

Egal was ich versuchte, ich konnte dies nicht richtig zum Laufen bringen, indem ich Code (und setRotation) für eine reibungslose Rotationsanimation verwendete. Am Ende habe ich die Gradänderungen so klein gemacht, dass die kleinen Pausen nicht wahrgenommen werden. Wenn Sie nicht zu viele Umdrehungen ausführen müssen, ist die Zeit zum Ausführen dieser Schleife vernachlässigbar. Der Effekt ist eine gleichmäßige Rotation:

        float lastDegree = 0.0f;
        float increment = 4.0f;
        long moveDuration = 10;
        for(int a = 0; a < 150; a++)
        {
            rAnim = new RotateAnimation(lastDegree, (increment * (float)a),  Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
            rAnim.setDuration(moveDuration);
            rAnim.setStartOffset(moveDuration * a);
            lastDegree = (increment * (float)a);
            ((AnimationSet) animation).addAnimation(rAnim);
        }

Wie hanry oben erwähnt hat, ist das Setzen des Liner-Iterpolators in Ordnung. Aber wenn die Rotation innerhalb eines Satzes liegt, müssen Sie android: shareInterpolator = "false" setzen, um es glatt zu machen.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
**android:shareInterpolator="false"**
>
<rotate
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="300"
    android:fillAfter="true"
    android:repeatCount="10"
    android:repeatMode="restart"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%" />
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:duration="3000"
    android:fillAfter="true"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="0"
    android:toYScale="0" />
</set>

Wenn Sharedinterpolator nicht falsch ist, gibt der obige Code Störungen.

Wenn Sie eine Set-Animation wie ich verwenden, sollten Sie die Interpolation innerhalb des Set-Tags hinzufügen:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">

 <rotate
    android:duration="5000"
    android:fromDegrees="0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:startOffset="0"
    android:toDegrees="360" />

 <alpha
    android:duration="200"
    android:fromAlpha="0.7"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toAlpha="1.0" />

</set>

Das hat bei mir funktioniert.

In Kotlin:

 ivBall.setOnClickListener(View.OnClickListener {

            //Animate using XML
            // val rotateAnimation = AnimationUtils.loadAnimation(activity, R.anim.rotate_indefinitely)

            //OR using Code
            val rotateAnimation = RotateAnimation(
                    0f, 359f,
                    Animation.RELATIVE_TO_SELF, 0.5f,
                    Animation.RELATIVE_TO_SELF, 0.5f

            )
            rotateAnimation.duration = 300
            rotateAnimation.repeatCount = 2

            //Either way you can add Listener like this
            rotateAnimation.setAnimationListener(object : Animation.AnimationListener {

                override fun onAnimationStart(animation: Animation?) {
                }

                override fun onAnimationRepeat(animation: Animation?) {
                }

                override fun onAnimationEnd(animation: Animation?) {

                    val rand = Random()
                    val ballHit = rand.nextInt(50) + 1
                    Toast.makeText(context, "ballHit : " + ballHit, Toast.LENGTH_SHORT).show()
                }
            })

            ivBall.startAnimation(rotateAnimation)
        })

Ist es möglich, dass Sie, weil Sie von 0 auf 360 wechseln, etwas mehr Zeit bei 0/360 verbringen, als Sie erwarten? Vielleicht auf Grad auf 359 oder 358 setzen.

Versuchen Sie, mehr als 360 zu verwenden, um einen Neustart zu vermeiden.

Ich benutze 3600 insted von 360 und das funktioniert gut für mich:

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="3600"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:duration="8000"
    android:pivotX="50%"
    android:pivotY="50%" />

Wenn Sie in Android ein Objekt animieren und von Objekt1 zu Standort2 verschieben möchten, ermittelt die Animations-API die Zwischenpositionen (Tweening) und stellt die entsprechenden Verschiebungsvorgänge zu den entsprechenden Zeiten mithilfe eines Timers in den Hauptthread . Dies funktioniert einwandfrei, außer dass der Haupt-Thread normalerweise für viele andere Dinge verwendet wird - Malen, Öffnen von Dateien, Reagieren auf Benutzereingaben usw. Ein Timer in der Warteschlange kann häufig verzögert werden. Gut geschriebene Programme versuchen immer, so viele Operationen wie möglich in Hintergrundthreads (nicht Hauptthreads) auszuführen. Sie können jedoch nicht immer vermeiden, den Hauptthread zu verwenden. Vorgänge, bei denen Sie ein UI-Objekt bearbeiten müssen, müssen immer im Hauptthread ausgeführt werden. Außerdem leiten viele APIs Operationen als eine Form der Thread-Sicherheit zurück zum Haupt-Thread.

Alle Ansichten werden auf demselben GUI-Thread gezeichnet, der auch für alle Benutzerinteraktionen verwendet wird.

Wenn Sie also die GUI schnell aktualisieren müssen oder wenn das Rendern zu lange dauert und die Benutzererfahrung beeinträchtigt, verwenden Sie SurfaceView.

Beispiel für ein Rotationsbild:

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback {
    private DrawThread drawThread;

    public MySurfaceView(Context context) {
        super(context);
        getHolder().addCallback(this);
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {   
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        drawThread = new DrawThread(getHolder(), getResources());
        drawThread.setRunning(true);
        drawThread.start();
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        boolean retry = true;
        drawThread.setRunning(false);
        while (retry) {
            try {
                drawThread.join();
                retry = false;
            } catch (InterruptedException e) {
            }
        }
    }
}


class DrawThread extends Thread{
    private boolean runFlag = false;
    private SurfaceHolder surfaceHolder;
    private Bitmap picture;
    private Matrix matrix;
    private long prevTime;

    public DrawThread(SurfaceHolder surfaceHolder, Resources resources){
        this.surfaceHolder = surfaceHolder;

        picture = BitmapFactory.decodeResource(resources, R.drawable.icon);

        matrix = new Matrix();
        matrix.postScale(3.0f, 3.0f);
        matrix.postTranslate(100.0f, 100.0f);

        prevTime = System.currentTimeMillis();
    }

    public void setRunning(boolean run) {
        runFlag = run;
    }

    @Override
    public void run() {
        Canvas canvas;
        while (runFlag) {
            long now = System.currentTimeMillis();
            long elapsedTime = now - prevTime;
            if (elapsedTime > 30){

                prevTime = now;
                matrix.preRotate(2.0f, picture.getWidth() / 2, picture.getHeight() / 2);
            }
            canvas = null;
            try {
                canvas = surfaceHolder.lockCanvas(null);
                synchronized (surfaceHolder) {
                    canvas.drawColor(Color.BLACK);
                    canvas.drawBitmap(picture, matrix, null);
                }
            } 
            finally {
                if (canvas != null) {
                    surfaceHolder.unlockCanvasAndPost(canvas);
                }
            }
        }
    }
}

Aktivität:

public class SurfaceViewActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MySurfaceView(this));
    }
}

private fun rotateTheView(view: View?, startAngle: Float, endAngle: Float) {
    val rotate = ObjectAnimator.ofFloat(view, "rotation", startAngle, endAngle)
    //rotate.setRepeatCount(10);
    rotate.duration = 400
    rotate.start()
}