Android实现卡片翻转动画

概述最近项目上用到了卡片的翻转效果，大致研究了下，也参考了网上的一些Demo，简单实现如下：

最近项目上用到了卡片的翻转效果，大致研究了下，也参考了网上的一些Demo，简单实现如下：

activity_main.xml

<?xml version="1.0" enCoding="utf-8"?> <FrameLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:ID="@+ID/card_main_container"  androID:layout_height="match_parent"  androID:layout_wIDth="match_parent">   <include layout="@layout/activity_card_back"/>   <include layout="@layout/activity_card_front"/> </FrameLayout> 

可以看出，用到了两个布局

activity_card_back.xml

<?xml version="1.0" enCoding="utf-8"?> <linearLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:ID="@+ID/card_back_container"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_marginleft="@dimen/activity_horizontal_margin"  androID:layout_margintop="@dimen/activity_vertical_margin"  androID:layout_marginRight="@dimen/activity_horizontal_margin"  androID:layout_marginBottom="@dimen/activity_vertical_margin"  androID:background="@drawable/shape_card_back_bg"  androID:orIEntation="vertical">   <TextVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:gravity="center"  androID:text="背面"  androID:textSize="30sp"/> </linearLayout>

activity_card_front.xml

<?xml version="1.0" enCoding="utf-8"?> <linearLayout  xmlns:androID="http://schemas.androID.com/apk/res/androID"  androID:ID="@+ID/card_Font_container"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:layout_marginleft="@dimen/activity_horizontal_margin"  androID:layout_margintop="@dimen/activity_vertical_margin"  androID:layout_marginRight="@dimen/activity_horizontal_margin"  androID:layout_marginBottom="@dimen/activity_vertical_margin"  androID:background="@drawable/shape_card_front_bg"  androID:orIEntation="vertical">   <TextVIEw  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  androID:gravity="center"  androID:text="正面"  androID:textSize="30sp"/> </linearLayout> 

附上自定义的图片：
shape_card_back_bg.xml

<?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID">  <corners androID:radius="30dp"/>  <solID androID:color="@androID:color/holo_red_light"/> </shape> 

shape_card_front_bg.xml

<?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID">  <corners androID:radius="30dp"/>  <solID androID:color="@androID:color/darker_gray"/> </shape> 

主要的逻辑如下：

package com.jackIE.flipanimationdemo;  import androID.animation.Animator; import androID.animation.AnimatorInflater; import androID.animation.AnimatorListenerAdapter; import androID.animation.AnimatorSet; import androID.os.Bundle; import androID.support.v7.app.AppCompatActivity; import androID.vIEw.VIEw; import androID.Widget.FrameLayout; import androID.Widget.linearLayout;  public class MainActivity extends AppCompatActivity implements VIEw.OnClickListener {  private FrameLayout mCardMainContainer;  private linearLayout mCardFontContainer,mCardBackContainer;   private AnimatorSet mRightOutAnimatorSet,mleftInAnimatorSet;   private boolean mIsShowBack = false; //是否显示背面   @OverrIDe  protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);   initVIEw();  initEvent();  }   private voID initVIEw() {  mCardMainContainer = (FrameLayout) findVIEwByID(R.ID.card_main_container);  mCardFontContainer = (linearLayout) findVIEwByID(R.ID.card_Font_container);  mCardBackContainer = (linearLayout) findVIEwByID(R.ID.card_back_container);   setAnimators(); // 设置动画  setCameradistance(); // 设置镜头距离  }   private voID initEvent() {  mCardMainContainer.setonClickListener(this);  }   private voID setAnimators() {  mRightOutAnimatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.anim_right_out);  mleftInAnimatorSet = (AnimatorSet) AnimatorInflater.loadAnimator(this,R.animator.anim_left_in);   // 设置点击事件  mRightOutAnimatorSet.addListener(new AnimatorListenerAdapter() {   @OverrIDe   public voID onAnimationStart(Animator animation) {   super.onAnimationStart(animation);   mCardMainContainer.setClickable(false);   }  });   mleftInAnimatorSet.addListener(new AnimatorListenerAdapter() {   @OverrIDe   public voID onAnimationEnd(Animator animation) {   super.onAnimationEnd(animation);   mCardMainContainer.setClickable(true);   }  });  }   private voID setCameradistance() {  int distance = 16000;  float scale = getResources().getdisplayMetrics().density * distance;  mCardFontContainer.setCameradistance(scale);  mCardBackContainer.setCameradistance(scale);  }   private voID flipCard() {  if (!mIsShowBack) { // 正面朝上   mRightOutAnimatorSet.setTarget(mCardFontContainer);   mleftInAnimatorSet.setTarget(mCardBackContainer);   mRightOutAnimatorSet.start();   mleftInAnimatorSet.start();   mIsShowBack = true;  } else { // 背面朝上   mRightOutAnimatorSet.setTarget(mCardBackContainer);   mleftInAnimatorSet.setTarget(mCardFontContainer);   mRightOutAnimatorSet.start();   mleftInAnimatorSet.start();   mIsShowBack = false;  }  }   @OverrIDe  public voID onClick(VIEw v) {  switch (v.getID()) {   case R.ID.card_main_container:   flipCard();   break;  }  } } 

用到一些动画的资源：

anim_left_in.xml

<?xml version="1.0" enCoding="utf-8"?> <set xmlns:androID="http://schemas.androID.com/apk/res/androID">  <!--消失-->  <objectAnimator  androID:duration="0"  androID:propertyname="Alpha"  androID:valueFrom="1.0"  androID:valueto="0.0"/>   <!--旋转-->  <objectAnimator  androID:duration="@integer/anim_length"  androID:propertyname="rotationY"  androID:valueFrom="-180"  androID:valueto="0"/>   <!--出现-->  <objectAnimator  androID:duration="0"  androID:propertyname="Alpha"  androID:startOffset="@integer/anim_half_length"  androID:valueFrom="0.0"  androID:valueto="1.0"/> </set> 

anim_right_out.xml

<?xml version="1.0" enCoding="utf-8"?> <set xmlns:androID="http://schemas.androID.com/apk/res/androID">  <!--旋转-->  <objectAnimator  androID:duration="@integer/anim_length"  androID:propertyname="rotationY"  androID:valueFrom="0"  androID:valueto="180"/>   <!--消失-->  <objectAnimator  androID:duration="0"  androID:propertyname="Alpha"  androID:startOffset="@integer/anim_half_length"  androID:valueFrom="1.0"  androID:valueto="0.0"/> </set> 

用到了属性动画，为了兼容性，别忘了如下配置：

效果图如下：

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android实现卡片翻转动画全部内容，希望文章能够帮你解决Android实现卡片翻转动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。