gridview 中一项的卡片翻转动画

Question

所以我正在为餐厅制作一个应用程序，它使用 gridview 显示项目，每个项目视图都有一个用于购买餐点的按钮和 3 个 textviews 和 imageview 来显示餐点图片及其名称、详细信息和价格。

我在这里尝试做的是对 gridview 中的一项进行翻转动画，以在背面显示有关这顿饭的更多详细信息。

来自 Google android 开发者网站的 卡片翻转动画 示例使用帧布局中的 2 个片段来翻转整个片段我不需要，我只需要翻转一个项目，该项目是 gridview 的一部分，它已经在一个在片段中调用的 baseadapter 中，将它们全部保存

我搜索了很多并找到了示例，但是当我尝试实现它们时，我无法在我的 sdk 中找到 "android.animation" 包，并提到我已经从 sdk manger 更新了支持库。

伙计们，请帮帮我，我真的很需要它。谢谢。

这是应用的一些屏幕截图代码.

https://drive.google.com/folder/d/0B9ZvWspyBhx1RUNydFFIei1qdm8/edit

Answer 1

好的，如果我理解了这个问题，您应该确保在 GridView 中点击项目，所以首先在布局上的 GridView 项目中 xml 设置：

android:focusable="false"
android:focusableInTouchMode="false"
android:clickable="false"

然后，在您的 gridView 上设置 OnItemClickListener()：

myGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
            flipTheView(view, position);
        }
    });

视图对象是在 GridView 上单击的项目，position（猜猜是什么？）是项目在适配器中的位置（显示在 Grid 上）

private void flipTheView(View view) {
  AnimatorSet setFlipInFront = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.animator.flip_in_front);

  setFlipInFront.setTarget(view);
  setFlipInFront.start();
}

和flip_in_front.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator">
<!-- Rotate. -->1000
<objectAnimator
    android:valueFrom="0"
    android:valueTo="-180"
    android:propertyName="rotationY"

    android:duration="@integer/card_flip_time_full" />

<!-- When the rotation reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="@integer/500"/>
</set>

Answer 2

多亏了这个教程，我确实找到了问题的答案

http://icetea09.com/blog/2014/10/21/android-card-flip-animation/

flight_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="-180"
    android:valueTo="0"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- When the roration reach half of animation, show the card -->
<objectAnimator
    android:valueFrom="0.0"
    android:valueTo="1.0"
    android:propertyName="alpha"
    android:duration="1"
    android:startOffset="250"/>
</set>

flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
    android:valueFrom="0"
    android:valueTo="180"
    android:propertyName="rotationY"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:duration="500" />

<!-- Half-way through the rotation, hide the front card -->
<objectAnimator
    android:valueFrom="1.0"
    android:valueTo="0.0"
    android:propertyName="alpha"
    android:startOffset="250"
    android:duration="1" />
</set>

fav_grid_single.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:padding="10dp"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin" >

<LinearLayout
    android:id="@+id/fav_grid_single_Front"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/view_dropshadow" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <ImageView
            android:id="@+id/fav_grid_image"
            android:layout_width="312dp"
            android:layout_height="212dp"
            android:padding="10dp" />

        <TextView
            android:id="@+id/fav_grid_detialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_nameText"
            android:padding="10dp"
            android:text="ههههههههههههههههههههههههههههه"
            android:textColor="#111"
            android:textSize="17dp" />

        <TextView
            android:id="@+id/fav_grid_priceText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/fav_grid_buyButton"
            android:layout_alignBottom="@+id/fav_grid_buyButton"
            android:layout_alignRight="@+id/fav_grid_nameText"
            android:padding="5dp"
            android:text="500 SDG"
            android:textColor="#111"
            android:textSize="18dp" />

        <TextView
            android:id="@+id/fav_grid_nameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_image"
            android:layout_marginLeft="18dp"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <RatingBar
            android:id="@+id/fav_ratingBar"
            android:layout_width="260dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/fav_grid_detialsText"
            android:layout_below="@+id/fav_grid_detialsText"
            android:paddingLeft="10dp" />

        <Button
            android:id="@+id/fav_grid_buyButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignLeft="@+id/fav_grid_nameText"
            android:layout_below="@+id/fav_ratingBar"
            android:background="@drawable/buy"
            android:padding="5dp"
            android:textSize="0dp" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/fav_grid_single_Back"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:alpha="0"
    android:background="@drawable/view_dropshadow"
    android:orientation="horizontal" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/rounded_corner"
        android:padding="10dp"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin" >

        <TextView
            android:id="@+id/fav_grid_morespaText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp" />

        <TextView
            android:id="@+id/fav_grid_moreNameText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_morespaText"
            android:padding="5dp"
            android:text="الاسم"
            android:textColor="#111"
            android:textSize="25dp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/fav_grid_moreDetialsText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/fav_grid_moreNameText"
            android:padding="5dp"
            android:text="التفاصيل"
            android:textColor="#111"
            android:textSize="20dp" />
    </RelativeLayout>
</LinearLayout>

<Button
    android:id="@+id/fav_grid_flipButton"
    style="?android:attr/buttonStyleSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/info3" />

</RelativeLayout>

FavGrid.java

final Button info = (Button) grid.findViewById(R.id.fav_grid_flipButton);
        info.setOnClickListener(new OnClickListener() {
            public void onClick(View arg0) {
            setRightOut = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flip_right_out);


            setLeftIn = (AnimatorSet) AnimatorInflater.loadAnimator(context,
            R.animator.flight_left_in);
                View v = parent.getChildAt(Integer.parseInt(buy.getText().toString()));
                imgFront = (LinearLayout)v.findViewById(R.id.fav_grid_single_Front);
                imgBack = (LinearLayout)v.findViewById(R.id.fav_grid_single_Back);
                if(!isBackVisible){
                    setRightOut.setTarget(imgFront);
                    setLeftIn.setTarget(imgBack);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = true;
                }
                else{
                    setRightOut.setTarget(imgBack);
                    setLeftIn.setTarget(imgFront);
                    setRightOut.start();
                    setLeftIn.start();
                    isBackVisible = false;
                }
            }
        });

gridview 中一项的卡片翻转动画

Card flip animation for one item in a gridview

android

card-flip