วิธีการหมุนภาพที่ราบรื่นใน 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
เนื่องจาก interpolator สะกดผิด (ไม่ใช่ "n") คุณไม่จำเป็นต้องทำด้วยตัวเอง
Kingpin

25
ฉันได้ลองใช้ตัวแก้ไขปัญหาทุกตัวที่มีอยู่รวมถึงแบบเส้นตรงและฉันยังคงได้รับ "hitch" ตัวเล็ก ๆ นี้ที่จุดเริ่มต้นของทุกรอบ
Adam Rabung

11
หากภาพเคลื่อนไหวการหมุนของคุณอยู่ในชุดการตั้งค่าตัวแทรกสัญญาณดูเหมือนจะไม่ทำงาน ทำให้การหมุนองค์ประกอบด้านบนแก้ไขได้
shalafi

เฮ้ถ้าคุณต้องการใช้ acceler_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);
ahmednabil88

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
สำหรับ reverse เพียงแค่มี repeatcount 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 () จะล้างค่า runnable ด้วยหรือไม่
XcodeNOOB

มันทำงานได้ดีสำหรับแอนิเมชั่นเริ่มต้น แต่หลังจาก runnable เริ่มทำงานมันไม่ได้ทำความสะอาดโดย imageView.clearAnimation () ฉันใช้ในเหตุการณ์ผู้ฟังแบบสัมผัส
Abhijit Jagtap

ไม่สามารถหยุด runnables เหล่านี้ได้อย่างอิสระ
กางเกง

@Pants คุณสามารถโทรหาด้วย EndEction (สิ่งนี้) ในเงื่อนไขบางประการ หากเงื่อนไขเป็นเท็จด้วย EndEction (สิ่งนี้) จะไม่ถูกเรียกใช้และการเคลื่อนไหวจะหยุด
Vitaly Zinchenko



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

viewเป็นวัตถุของ ImageView ของคุณหรือวิดเจ็ตอื่น ๆ

rotate.setRepeatCount (10); ใช้ในการหมุนซ้ำ

500คือช่วงเวลาเคลื่อนไหวของคุณ


6

การตัดแต่ง<set>-Element ที่ห่อ<rotate>-Element แก้ปัญหาได้!

ขอบคุณ Shalafi!

ดังนั้น 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);
        }

การประกาศตัวแปร "ภาพเคลื่อนไหว" ของคุณอยู่ที่ไหน
Rishabh Saxena

3

ดังที่ hanry ได้กล่าวถึงแล้ว แต่ถ้าการหมุนอยู่ในชุดคุณต้องใส่ 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 ไม่ใช่เท็จรหัสข้างต้นจะให้ข้อบกพร่อง


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

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

1

เป็นไปได้ไหมว่าเนื่องจากคุณไปจาก 0 ถึง 360 คุณจะใช้เวลาเพิ่มขึ้นเล็กน้อยที่ 0/360 มากกว่าที่คุณคาดไว้ อาจถูกตั้งค่าเป็นตกลงเป็น 359 หรือ 358


1
ทฤษฎีที่ยิ่งใหญ่ ฉันค่อนข้างแน่ใจว่าไม่ใช่เพราะการเร่งความเร็ว / การชะลอตัวนั้นค่อนข้างราบรื่นและดูอย่างรอบคอบ ในกรณีที่ฉันพยายามลดองศาเป็น 358 และไม่มีการเปลี่ยนแปลงที่สังเกตเห็นได้ในพฤติกรรม
emmby

1

ลองใช้มากกว่า 360 เพื่อหลีกเลี่ยงการเริ่มต้นใหม่

ฉันใช้ 3600 ติดตั้ง 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 หากคุณต้องการทำให้วัตถุเคลื่อนไหวและทำให้วัตถุเคลื่อนที่จากตำแหน่งที่ 1 ไปยังตำแหน่งที่ 2 API ของแอนิเมชั่นจะแสดงตำแหน่งกลาง (การทวีคูณ) จากนั้นจัดคิวลงบนเธรดหลักเพื่อดำเนินการย้ายที่เหมาะสมตามเวลาที่เหมาะสม . วิธีนี้ใช้งานได้ดียกเว้นว่าเธรดหลักมักใช้กับสิ่งอื่น ๆ อีกมากมายเช่นการทาสีการเปิดไฟล์การตอบสนองต่ออินพุตของผู้ใช้เป็นต้นตัวจับเวลาที่อยู่ในคิวมักจะล่าช้า โปรแกรมที่เขียนมาอย่างดีจะพยายามทำการดำเนินการให้มากที่สุดเท่าที่จะทำได้ในเธรดพื้นหลัง (ไม่ใช่ตัวหลัก) แต่คุณไม่สามารถหลีกเลี่ยงการใช้เธรดหลักได้เสมอไป การดำเนินการที่ต้องการให้คุณดำเนินการกับวัตถุ UI จะต้องทำบนเธรดหลักเสมอ นอกจากนี้ APIs จำนวนมากจะดำเนินการช่องทางกลับไปที่เธรดหลักในรูปแบบของความปลอดภัยของเธรด

มุมมองทั้งหมดจะถูกวาดบนเธรด GUI เดียวกันซึ่งใช้สำหรับการโต้ตอบกับผู้ใช้ทั้งหมด

ดังนั้นหากคุณต้องการอัปเดต GUI อย่างรวดเร็วหรือหากการเรนเดอร์ใช้เวลานานเกินไปและส่งผลกระทบต่อประสบการณ์ของผู้ใช้ให้ใช้ 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
ในขณะที่รหัสนี้อาจให้คำตอบสำหรับคำถาม แต่ก็ควรเพิ่มบริบทว่าทำไมมันถึงทำงานอย่างไร สิ่งนี้สามารถช่วยผู้ใช้ในอนาคตเรียนรู้และนำความรู้นั้นไปใช้กับรหัสของตนเอง คุณมีแนวโน้มที่จะได้รับการตอบรับเชิงบวกจากผู้ใช้ในรูปแบบของ upvotes เมื่ออธิบายรหัส
borchvm
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.