时间戳

首页 > 解决方案 > Android Studio - 翻转卡

android - Android Studio - 翻转卡

问题描述

我正在尝试对两个图像产生效果，就好像它是翻转卡片动画一样。图片 1 =“botaoiniciar”和图片 2 =“botaosair”。在我单击初始图像的那一刻，它变成了第二个，但随后它卡在了第二个图像上，我希望它回来。我正在使用以下代码。我感谢您的关注。

final ImageView botaoiniciar = (ImageView) findViewById(R.id.botaoiniciar);

    botaoiniciar.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            final ObjectAnimator oa1 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 1f, 0f);
            final ObjectAnimator oa2 = ObjectAnimator.ofFloat(botaoiniciar, "scaleX", 0f, 1f);
            oa1.setInterpolator(new DecelerateInterpolator());
            oa2.setInterpolator(new AccelerateDecelerateInterpolator());
            oa1.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    botaoiniciar.setImageResource(R.drawable.botaosair);
                    oa2.start();
                }
            });
            oa1.start();
        }
    });

标签： android

解决方案

您需要保留动画师并在卡片翻转时更改它们。布尔值可以保持翻转状态。这是我的例子：

public class MyFragment extends Fragment {
@OnClick(R.id.frmMain) //onclick for container of two sides
public void onClick() {
    flipCard();  //call method that flips card base on current "mIsBackVisible" state 
}

@BindView(R.id.card_front)
FrameLayout mCardFront;
@BindView(R.id.card_back)
FrameLayout mCardBack;

AnimatorSet animFront;
AnimatorSet animBack;

private boolean mIsBackVisible = false; //keeping card flip state

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View root = inflater.inflate(R.layout.myLauyout, container, false);
    ButterKnife.bind(this, root);

    //important part is this two lines + onclick for container
    loadAnimations();       //initialize animations
    changeCameraDistance(); //optimize card appearance (optional)

    return root;
}

private void changeCameraDistance() {
    int distance = 8000;
    float scale = getResources().getDisplayMetrics().density * distance;
    mCardFront.setCameraDistance(scale);
    mCardBack.setCameraDistance(scale);
}

private void loadAnimations() {
    animBack = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_back);
    animFront = (AnimatorSet) AnimatorInflater.loadAnimator(getContext(), R.animator.flip_front);
}

public void flipCard() {
    if (!mIsBackVisible) {
        animBack.setTarget(mCardFront);
        animFront.setTarget(mCardBack);
        animBack.start();
        animFront.start();
        mIsBackVisible = true;
    } else {
        animBack.setTarget(mCardBack);
        animFront.setTarget(mCardFront);
        animBack.start();
        animFront.start();
        mIsBackVisible = false;
    }
}
}

这是我在 res/animator/flip_front.xml 中的动画师：

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

<objectAnimator
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:repeatMode="reverse"
    android:duration="@integer/anim_length" />

<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:startOffset="@integer/anim_length_half"
    android:duration="0" />
</set>

res/animator/flip_back.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
    android:valueFrom="0"
    android:valueTo="180"
    android:propertyName="rotationY"
    android:duration="@integer/anim_length" />

<objectAnimator
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:startOffset="@integer/anim_length_half"
    android:duration="0" />
</set>

如果有任何问题，请发表评论。;)

推荐阅读