卡片翻转期间的奇怪阴影行为 [英] Strange shadow behaviour during card flip

问题描述

我实现了卡片翻转动画，如here.一切似乎都工作正常，除了阴影，在翻转过程中表现得很奇怪(如此处所示).因为这些阴影是由高程引起的，所以当我将高程设置为 0 时，这个图形错误就会消失.但是，我不想禁用阴影.

I have implemented a card flip animation, like described here. Everything seems to work fine, except the shadows, which behave strangely during the flip (as can be seen here). Because these shadows are caused by the elevation, this graphical error disappears when I set the elevation to 0. However, I would prefer not to disable the shadows.

如何在不禁用高程的情况下修复此动画，或者这是不可能的?

How can I fix this animation without disabling the elevation, or is this impossible?

FlashcardFragment.java

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);

    this.cardFront = (CardView) this.getView().findViewById(R.id.flashcard_front);
    this.cardBack  = (CardView) this.getView().findViewById(R.id.flashcard_back );

    this.getView().setOnClickListener(new View.OnClickListener()
    {
        @Override
        public void onClick(View view){
            flip();
        }
    });

    float scale = this.getResources().getDisplayMetrics().density * 8000;
    this.cardFront.setCameraDistance(scale);
    this.cardBack.setCameraDistance(scale);
    this.cardBack.setAlpha(0.0f); // hides back of card
}

public void flip() {
    if (this.flipped) return;
    this.flipped = true;

    AnimatorSet animationOut = (AnimatorSet) AnimatorInflater.loadAnimator(this.getContext(), R.animator.flashcard_flip_out);
    AnimatorSet animationIn  = (AnimatorSet) AnimatorInflater.loadAnimator(this.getContext(), R.animator.flashcard_flip_in );

    animationOut.setTarget(this.cardFront);
    animationIn.setTarget(this.cardBack);

    animationOut.start();
    animationIn.start();
}

flashcard_flip_in.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="1000" />

    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="0" />

</set>

flashcard_clip_out.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="1000" />

    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:duration="0" />

</set>

fragment_flashcard.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.project.FlashcardFragment" >

    <include layout="@layout/flashcard"
        android:id="@+id/flashcard_back" />

    <include layout="@layout/flashcard"
        android:id="@+id/flashcard_front" />

</FrameLayout>

flashcard.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="@dimen/card_corner_radius"
    card_view:cardElevation="@dimen/card_elevation_raised"
    card_view:cardUseCompatPadding="true" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/padding_default" >

        <TextView style="@android:style/TextAppearance.Large"
            android:id="@+id/flashcard_header"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

推荐答案

尝试将您的 CardView 放在容器布局中:

Try putting your CardView in a container layout:

<FrameLayout
    android:id="@+id/card_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp">

    <include layout="@layout/flashcard" />

</FrameLayout>

这篇关于卡片翻转期间的奇怪阴影行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！