Как сделать плавный поворот изображения в Android?


217

Я использую RotateAnimationдля поворота изображения, которое я использую как пользовательский циклический спиннер в Android. Вот мой rotate_indefinitely.xmlфайл, который я поместил в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" />    

Когда я применяю это к своему ImageViewиспользованию AndroidUtils.loadAnimation(), это прекрасно работает!

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

Единственная проблема заключается в том, что вращение изображения, кажется, останавливается в верхней части каждого цикла.

Другими словами, изображение поворачивается на 360 градусов, кратковременно останавливается, затем снова поворачивается на 360 градусов и т. Д.

Я подозреваю, что проблема в том, что анимация использует интерполятор по умолчанию, такой как android:iterpolator="@android:anim/accelerate_interpolator"( AccelerateInterpolator), но я не знаю, как сказать ему не интерполировать анимацию.

Как я могу отключить интерполяцию (если это действительно проблема), чтобы сделать цикл анимации плавным?

Ответы:


199

Вы правы насчет AccelerateInterpolator; Вы должны использовать LinearInterpolator вместо этого.

Вы можете использовать встроенный android.R.anim.linear_interpolatorиз вашего файла анимации XML с android:interpolator="@android:anim/linear_interpolator".

Или вы можете создать свой собственный XML-файл интерполяции в вашем проекте, например, назвать его res/anim/linear_interpolator.xml:

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

И добавьте к вашей анимации XML:

android:interpolator="@anim/linear_interpolator"

Специальное примечание: если ваша анимация поворота находится внутри набора, настройка интерполятора не работает. Поворот верхнего элемента исправляет это. (это сэкономит ваше время.)


1
Это потому, что интерполятор был написан неправильно (без "n"). Вам не нужно делать свой собственный
Kingpin

25
Я пробовал каждый доступный интерполятор, включая линейный, и я все еще получаю эту маленькую «заминку» в начале каждого цикла.
Адам Рабунг

11
Если ваша анимация поворота находится внутри набора, настройка интерполятора не работает. Делая поворот верхнего элемента исправляет это
shalafi

Эй, что, если вы действительно хотите использовать accelerate_decelerate_interpolator без небольшой «паузы» между каждой анимацией?
agonist_

90

У меня тоже была эта проблема, и я безуспешно пытался установить линейный интерполятор в xml. Решение, которое работало для меня, состояло в том, чтобы создать анимацию в виде RotateAnimation в коде.

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

9
если вы хотите, чтобы анимация оставалась в конце в ориентации, добавьтеrotate.setFillAfter(true);
Fonix

4
если вы хотите, чтобы анимация rotate.setRepeatCount(Animation.INFINITE);
оставалась

38

Это отлично работает

<?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" />

Чтобы повернуть назад:

<?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" />

5
Для обратного достаточно просто повторить счет 2 и установить android: repeatMode = "reverse" - не нужно иметь два разных XML-файла.
RoundSparrow Hilltx

3
почему 358 а не 359 или 360?
behelit

Куда добавить этот файл в ресурсы? Является ли анимация отдельным пакетом для этого?
abggcv

30

Может быть, что-то вроде этого поможет:

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

Кстати, вы можете вращаться более чем на 360, как:

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

Отлично работает, imageView.clearAnimation () также очистит работоспособный объект?
XcodeNOOB

Он отлично работает для запуска анимации, но после запуска запуска не очищается с помощью imageView.clearAnimation (), я использовал в событии слушателя касания
Abhijit Jagtap

Не могу остановить эти runnables независимо друг от друга
Штаны

@ Штаны, которые вы можете вызывать с помощью EndAction (this) при некоторых условиях. Если условие ложно, withEndAction (this) не будет вызываться, и анимация должна прекратиться
Виталий Зинченко,



8

Вращение объекта программно.

// вращение по часовой стрелке:

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

// вращение против часовой стрелки:

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

Посмотреть - это объект вашего ImageView или других виджетов.

rotate.setRepeatCount (10);используйте, чтобы повторить ваше вращение.

500 - ваша продолжительность анимации.


6

Обрезка <set>-элемент, который обернул<rotate> -элементом, решает проблему!

Спасибо Шалафи!

Так что ваш Rotation_ccw.xml должен выглядеть примерно так:

<?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"
    />

3

Независимо от того, что я пытался, я не мог заставить это работать правильно, используя код (и setRotation) для плавной анимации вращения. То, что я закончил, делало изменения степени настолько маленькими, что маленькие паузы незаметны. Если вам не нужно делать слишком много поворотов, время выполнения этого цикла незначительно. Эффект плавного вращения:

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

где у вас "анимация" объявления переменных?
Ришабх Саксена

3

Как уже упоминал Ханри, подкладка лайнера iterpolator вполне подойдет. Но если вращение находится внутри набора, вы должны поставить android: shareInterpolator = "false", чтобы сделать его плавным.

<?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>

Если Sharedinterpolator не равен false, приведенный выше код дает глюки.


3

Если вы используете набор анимации, как я, вы должны добавить интерполяцию внутри тега набора:

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

Это сработало для меня.


3

В Котлине:

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

1

Возможно ли, что с 0 до 360 вы потратите немного больше времени на 0/360, чем ожидаете? Возможно, установите в градусы 359 или 358.


1
Отличная теория. Я уверен, что это не так, потому что ускорение / замедление довольно плавное и продуманное. На всякий случай, хотя я пытался уменьшить градусы до 358, и не было заметных изменений в поведении.
Эмби

1

Попробуйте использовать более 360, чтобы избежать перезапуска.

Я использую 3600 insted из 360, и это прекрасно работает для меня:

<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%" />

0

В Android, если вы хотите анимировать объект и заставить его переместить объект из location1 в location2, API-интерфейс анимации определяет промежуточные местоположения (анимацию движения), а затем помещает в основной поток соответствующие операции перемещения в подходящее время с использованием таймера. , Это прекрасно работает, за исключением того, что основной поток обычно используется для многих других вещей - рисования, открытия файлов, ответа на пользовательский ввод и т. Д. Таймер в очереди часто может быть отложен. Хорошо написанные программы всегда будут пытаться выполнить как можно больше операций в фоновых (не основных) потоках, однако вы не всегда можете избежать использования основного потока. Операции, которые требуют, чтобы вы работали с объектом пользовательского интерфейса, всегда должны выполняться в основном потоке. Кроме того, многие API будут направлять операции обратно в основной поток как форму безопасности потока.

Все представления отображаются в одном потоке графического интерфейса, который также используется для всех действий пользователя.

Поэтому, если вам нужно быстро обновить графический интерфейс или если рендеринг занимает слишком много времени и влияет на работу пользователя, используйте SurfaceView.

Пример поворота изображения:

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

деятельность:

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

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

1
Хотя этот код может обеспечить решение вопроса, лучше добавить контекст относительно того, почему / как он работает. Это может помочь будущим пользователям учиться и применять эти знания в своем собственном коде. Вы также, вероятно, получите положительные отзывы от пользователей в виде откликов, когда код объясняется.
Borchvm
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.