it-swarm-id.com

Membuat animasi flip 3D di Android menggunakan XML

Saya telah membuat tampilan flip 3D menggunakan tutorial Android ini Namun, saya telah melakukannya secara terprogram dan saya ingin melakukan semuanya dalam xml, jika memungkinkan. Saya tidak berbicara tentang hanya mengecilkan tampilan ke tengah dan kemudian mundur, tetapi flip 3D yang sebenarnya. 

Apakah ini dimungkinkan melalui xml?

23

Inilah jawabannya, meskipun hanya berfungsi dengan 3.0 dan di atasnya. 

1) Buat folder sumber daya baru yang disebut "animator".

2) Buat file .xml baru yang akan saya sebut "membalik". Gunakan kode xml berikut:

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:valueFrom="0" Android:valueTo="360" Android:propertyName="rotationY" >
</objectAnimator>

Tidak, tag objectAnimator tidak dimulai dengan huruf besar "O".

3) Mulai animasi dengan kode berikut:

ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(mContext, R.animator.flipping); 
anim.setTarget(A View Object reference goes here i.e. ImageView);
anim.setDuration(3000);
anim.start();

Saya mendapat semua ini dari sini .

55

Karena jawaban atas pertanyaan ini cukup tanggal, berikut adalah solusi yang lebih modern dengan mengandalkan ValueAnimators . Solusi ini mengimplementasikan flip 3D yang benar-benar menarik secara visual, karena tidak hanya membalikkan tampilan, tetapi juga menskalakannya saat itu juga. membalik (beginilah cara Apple melakukannya).

Pertama kami menyiapkan ValueAnimator:

mFlipAnimator = ValueAnimator.ofFloat(0f, 1f);
mFlipAnimator.addUpdateListener(new FlipListener(frontView, backView));

Dan pendengar pembaruan yang sesuai:

public class FlipListener implements ValueAnimator.AnimatorUpdateListener {

    private final View mFrontView;
    private final View mBackView;
    private boolean mFlipped;

    public FlipListener(final View front, final View back) {
        this.mFrontView = front;
        this.mBackView = back;
        this.mBackView.setVisibility(View.GONE);
    }

    @Override
    public void onAnimationUpdate(final ValueAnimator animation) {
        final float value = animation.getAnimatedFraction();
        final float scaleValue = 0.625f + (1.5f * (value - 0.5f) * (value - 0.5f));

        if(value <= 0.5f){
            this.mFrontView.setRotationY(180 * value);
            this.mFrontView.setScaleX(scaleValue);
            this.mFrontView.setScaleY(scaleValue);
            if(mFlipped){
                setStateFlipped(false);
            }
        } else {
            this.mBackView.setRotationY(-180 * (1f- value));
            this.mBackView.setScaleX(scaleValue);
            this.mBackView.setScaleY(scaleValue);
            if(!mFlipped){
                setStateFlipped(true);
            }
        }
    }

    private void setStateFlipped(boolean flipped) {
        mFlipped = flipped;
        this.mFrontView.setVisibility(flipped ? View.GONE : View.VISIBLE);
        this.mBackView.setVisibility(flipped ? View.VISIBLE : View.GONE);
    }
}

Itu dia!

Setelah pengaturan ini, Anda dapat membalik tampilan dengan menelepon

mFlipAnimator.start();

dan balikkan flip dengan menelepon

mFlipAnimator.reverse();

Jika Anda ingin memeriksa apakah tampilan dibalik, terapkan dan panggil fungsi ini:

private boolean isFlipped() {
    return mFlipAnimator.getAnimatedFraction() == 1;
}

Anda juga dapat memeriksa apakah tampilan saat ini terbalik dengan menerapkan metode ini:

private boolean isFlipping() {
    final float currentValue = mFlipAnimator.getAnimatedFraction();
    return (currentValue < 1 && currentValue > 0);
}

Anda dapat menggabungkan fungsi-fungsi di atas untuk mengimplementasikan fungsi Nice untuk mengganti flip, tergantung pada apakah flip atau tidak:

private void toggleFlip() {
    if(isFlipped()){
        mFlipAnimator.reverse();
    } else {
        mFlipAnimator.start();
    }
}

Itu dia! Sederhana dan mudah. Nikmati!

22
A. Steenbergen

Saya telah membuat program sederhana untuk membuat flip of view seperti:

enter image description here

Di Aktivitas, Anda harus membuat metode ini, untuk menambahkan flip_rotation dalam tampilan.

private void applyRotation(View view) 
{
    final Flip3dAnimation rotation = new Flip3dAnimation(view);
    rotation.applyPropertiesInRotation();
    view.startAnimation(rotation);
}

untuk ini, Anda harus menyalin kelas utama yang digunakan untuk menyediakan flip_rotation.

import Android.graphics.Camera;
import Android.graphics.Matrix;
import Android.util.Log;
import Android.view.View;
import Android.view.animation.AccelerateInterpolator;
import Android.view.animation.Animation;
import Android.view.animation.Transformation;

public class Flip3dAnimation extends Animation {
    private final float mFromDegrees;
    private final float mToDegrees;
    private final float mCenterX;
    private final float mCenterY;
    private Camera mCamera;

    public Flip3dAnimation(View view) {
        mFromDegrees = 0;
        mToDegrees = 720;
        mCenterX = view.getWidth() / 2.0f;
        mCenterY = view.getHeight() / 2.0f;
    }

    @Override
    public void initialize(int width, int height, int parentWidth,
            int parentHeight) {
        super.initialize(width, height, parentWidth, parentHeight);
        mCamera = new Camera();
    }

    public void applyPropertiesInRotation()
    {
        this.setDuration(2000);
        this.setFillAfter(true);
        this.setInterpolator(new AccelerateInterpolator());
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        final float fromDegrees = mFromDegrees;
        float degrees = fromDegrees
                + ((mToDegrees - fromDegrees) * interpolatedTime);

        final float centerX = mCenterX;
        final float centerY = mCenterY;
        final Camera camera = mCamera;

        final Matrix matrix = t.getMatrix();

        camera.save();

        Log.e("Degree",""+degrees) ;
        Log.e("centerX",""+centerX) ;
        Log.e("centerY",""+centerY) ;

        camera.rotateY(degrees);

        camera.getMatrix(matrix);
        camera.restore();

        matrix.preTranslate(-centerX, -centerY);
        matrix.postTranslate(centerX, centerY);

    }

}
7
Tushar Pandey

Salah satu solusi yang lebih baik untuk membalik gambar tanpa menggunakan animasi sumber daya, adalah sebagai berikut: -

  ObjectAnimator animation = ObjectAnimator.ofFloat(YOUR_IMAGEVIEW, "rotationY", 0.0f, 360f);  // HERE 360 IS THE ANGLE OF ROTATE, YOU CAN USE 90, 180 IN PLACE OF IT,  ACCORDING TO YOURS REQUIREMENT 

  animation.setDuration(500); // HERE 500 IS THE DURATION OF THE ANIMATION, YOU CAN INCREASE OR DECREASE ACCORDING TO YOURS REQUIREMENT
  animation.setInterpolator(new AccelerateDecelerateInterpolator());
  animation.start();
4

Tutorial atau tautan oleh om252345 tidak menghasilkan membalik 3D yang dapat dipercaya. Rotasi sederhana pada sumbu y bukanlah yang dilakukan di iOS. Efek zoom juga diperlukan untuk menciptakan kesan flip yang menyenangkan. Untuk itu, lihat contoh ini . Ada juga video di sini .

4
Ephraim
  1. Cara paling sederhana untuk melakukannya adalah menggunakan ViewPropertyAnimator

    mImageView.animate().rotationY(360f);
    

    Dengan menggunakan antarmuka yang lancar Anda dapat membuat animasi yang lebih kompleks dan menarik . E.g. Anda dapat mengaktifkan akselerasi perangkat keras cukup panggil metode withLayer () (API 16). Lebih banyak di sini

  2. Jika Anda ingin mengetahui cara membuat animasi film 3d, silakan ikuti sini dan sini

  3. Saya menerapkan solusi saya sendiri hanya untuk penelitian. Ini mencakup: pembatalan, akselerasi, dukungan API> = 15 dan didasarkan pada Animasi Properti . Seluruh animasi mencakup 4 bagian, 2 untuk setiap sisi. Setiap objectAnimator memiliki pendengar yang menentukan indeks animasi saat ini dan mewakili gambar di onAnimationStart dan nilai waktu putar saat ini di onAnimationCancel . Sepertinya

    mQuarterAnim1.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationStart(Animator animation) {
            mQuarterCurrentAnimStartIndex = QUARTER_ANIM_INDEX_1;
            mImageView.setImageResource(mResIdFrontCard);
        }
    
        @Override
        public void onAnimationCancel(Animator animation) {
            mQuarterCurrentAnimPlayTime = ((ObjectAnimator) animation).getCurrentPlayTime();
        }
    });
    

    Untuk mulai mengatur panggilan

    mAnimatorSet.play(mQuarterAnim1).before(mQuarterAnim2)
    

    Jika AnimatorSet dibatalkan, kami dapat menghitung delta dan menjalankan animasi terbalik dengan mengandalkan indeks saat ini dan nilai waktu putar saat ini.

    long degreeDelta = mQuarterCurrentAnimPlayTime * QUARTER_ROTATE / QUARTER_ANIM_DURATION;
    
    if (mQuarterCurrentAnimStartIndex == QUARTER_ANIM_INDEX_1) {
        mQuarterAnim4.setFloatValues(degreeDelta, QUARTER_FROM_1);
        mQuarterAnim4.setDuration(mQuarterCurrentAnimPlayTime);
    
        mAnimatorSet.play(mQuarterAnim4);
    }
    

    contoh lengkap di sini

3
yoAlex5

Menambah jawaban bagus A. Steenbergen. Ketika membalik tampilan yang sama (memperbarui TextView misalnya) saya menghapus View.Visibility perubahan dalam konstruktor untuk menjaga transisi lebih lancar.

public FlipListener(final View front, final View back) {
    this.mFrontView = front;
    this.mBackView = back;
}
0
seekingStillness