android学习(十八) 添加动画(三) 显示卡片翻转动画

来源：互联网发布：linux 终端重启编辑：程序博客网时间：2024/06/14 12:39

完成以下文件：
· src/CardFlipActivity.java
· animator/card_flip_right_in.xml
· animator/card_flip_right_out.xml
· animator/card_flip_left_in.xml
· animator/card_flip_left_out.xml
· layout/fragment_card_back.xml
· menu/menu.xml

创建动画

创建卡片翻转动画。
card_flip_left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">    <!--再翻转之前设置alpha为0是必要的-->    <objectAnimator        android:valueFrom="1.0"        android:valueTo="0.0"        android:propertyName="alpha"        android:duration="0" />    <!--翻转 -->    <objectAnimator        android:valueFrom="180"        android:valueTo="0"        //动画类型(以Y轴翻转)        android:propertyName="rotationY"        //变化速度        android:interpolator="@android:interpolator/accelerate_decelerate"        //动画时长(毫秒)        android:duration="@integer/card_flip_time_full" />    <objectAnimator        android:valueFrom="0.0"        android:valueTo="1.0"        android:propertyName="alpha"        android:startOffset="@integer/card_flip_time_half"        android:duration="1" /></set>

card_flip_left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">    <!--翻转-->    <objectAnimator        android:valueFrom="0"        android:valueTo="-180"        android:propertyName="rotationY"        android:interpolator="@android:interpolator/accelerate_decelerate"        android:duration="@integer/card_flip_time_full" />    <objectAnimator        android:valueFrom="1.0"        android:valueTo="0.0"        android:propertyName="alpha"        android:startOffset="@integer/card_flip_time_half"        android:duration="1" /></set>

card_flip_right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:valueFrom="1.0"        android:valueTo="0.0"        android:propertyName="alpha"        android:duration="0" />    <objectAnimator        android:valueFrom="180"        android:valueTo="0"        android:propertyName="rotationY"        android:interpolator="@android:interpolator/accelerate_decelerate"        android:duration="@integer/card_flip_time_full" />    <objectAnimator        android:valueFrom="0.0"        android:valueTo="1.0"        android:propertyName="alpha"        android:startOffset="@integer/card_flip_time_half"        android:duration="1" /></set>

card_flip_right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">    <objectAnimator        android:valueFrom="0"        android:valueTo="-180"        android:propertyName="rotationY"        android:interpolator="@android:interpolator/accelerate_decelerate"        android:duration="@integer/card_flip_time_full" />    <objectAnimator        android:valueFrom="1.0"        android:valueTo="0.0"        android:propertyName="alpha"        android:startOffset="@integer/card_flip_time_half"        android:duration="1" /></set>

创建视图

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:background="#a6c"    android:padding="16dp"    android:gravity="bottom">    <TextView android:id="@android:id/text1"        style="?android:textAppearanceLarge"        android:textStyle="bold"        android:textColor="#fff"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="@string/card_back_title" />    <TextView style="?android:textAppearanceSmall"        android:textAllCaps="true"        android:textColor="#80ffffff"        android:textStyle="bold"        android:lineSpacingMultiplier="1.2"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="@string/card_back_description" /></LinearLayout>

另一个卡片

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:src="@drawable/image1"    android:scaleType="centerCrop"    android:contentDescription="@string/description_image_1" />

创建Fragment

    //正面的卡片    public class CardFrontFragment extends Fragment {        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState) {            return inflater.inflate(R.layout.fragment_card_front, container, false);        }    }    //反面的卡片    public class CardBackFragment extends Fragment {        @Override        public View onCreateView(LayoutInflater inflater, ViewGroup container,                Bundle savedInstanceState) {            return inflater.inflate(R.layout.fragment_card_back, container, false);        }    }

注意:继承的不是v4的Fragment

动画卡片翻转

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/container"    android:layout_width="match_parent"    android:layout_height="match_parent" />

在activity代码里设置显示Fragment为CardFrontFragment

public class CardFlipActivity extends Activity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_activity_card_flip);        if (savedInstanceState == null) {            getFragmentManager()                    .beginTransaction()                    .add(R.id.container, new CardFrontFragment())                    .commit();        }    }    ...}

· 设置为碎片转换所创建的自定义动画。
· 替换当前显示的一个新的片段,进行你创建的自定义动画。
· 将先前显示的片段添加到碎片后堆栈中，这样当用户按下后退按钮时，卡片就会翻转过来。
具体代码。

    private void flipCard() {        if (mShowingBack) {            getFragmentManager().popBackStack();            return;        }        //向后翻转        mShowingBack = true;        //创建并提交一个新的片段事务，将该片段添加到该卡的后面，        // 使用自定义动画，并作为片段管理器的后台堆栈的一部        //不检验资源类型        getFragmentManager()                .beginTransaction()                .setCustomAnimations(R.animator.card_flip_right_in,                        R.animator.card_flip_right_out,                        R.animator.card_flip_left_in,                        R.animator.card_flip_left_out)                .replace(R.id.container, new CardBackFragment())                //将此transaction添加到后台堆栈，允许用户按回到前面的卡片。                .addToBackStack(null)                .commit();    }    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.activity_crossfade,menu);        return super.onCreateOptionsMenu(menu);    }    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()){            case R.id.activity_crossfade:                flipCard();                break;        }        return super.onOptionsItemSelected(item);    }

摘自android developer

0 0