Question

我已经实现了卡片翻转动画，就像描述here一样。一切似乎工作正常，除了阴影，在翻转过程中表现奇怪（如here所示）。因为这些阴影是由高程引起的，所以当我将高程设置为0时，此图形错误会消失。但是，我宁愿不禁用阴影。

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

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>

Answer 1

尝试将CardView放入容器布局中：

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

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

</FrameLayout>

卡片翻转期间的奇怪阴影行为

1 个答案: