这个图片翻转效果有些类似于支付宝五福翻转的效果,或者是游戏中的翻拍效果先附上效果图
第一步是两个正面反面的布局很简单就是一个ImageView和Textview组成我拿其中一个举例
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/main_fl_card_front" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@null" android:padding="16dp" android:src="@mipmap/two"/> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="20sp" android:text="大姑娘" android:textColor="@android:color/white"/> </RelativeLayout>
第二部主页布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_fl_container" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:onClick="fipCard" tools:context="com.example.administrator.cardflip.MainActivity"> <include layout="@layout/cell_card_front"></include> <include layout="@layout/cell_card_back"></include> </RelativeLayout>第三部 书写属性动画
动画出
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <!--旋转--> <objectAnimator android:duration="3000" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="180dp"> </objectAnimator> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1500" android:valueFrom="1.0" android:valueTo="0.0"> </objectAnimator>动画进
<?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> <!--旋转--> <objectAnimator android:duration="3000" android:propertyName="rotationY" android:valueFrom="-180" android:valueTo="0"></objectAnimator> <!--出现--> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="1500" android:valueFrom="0.0" android:valueTo="1.0"></objectAnimator> </set>
第四部整合代码实现效果
public class MainActivity extends AppCompatActivity { AnimatorSet mRightOutSet, mLeftOutSet; boolean mIsShowBack; @BindView(R.id.main_fl_card_back) RelativeLayout mainFlCardBack; @BindView(R.id.main_fl_card_front) RelativeLayout mainFlCardFront; @BindView(R.id.main_fl_container) RelativeLayout mainFlContainer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ButterKnife.bind(this); setAnimators();//设置动画 setCameraDistance();//设置距离 } //设置动画 private void setAnimators() { mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out); mLeftOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in); //设置点击事件 mRightOutSet.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); mainFlContainer.setClickable(false); } }); mLeftOutSet.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationStart(Animator animation) { super.onAnimationStart(animation); mainFlContainer.setClickable(true); } }); } //改变视角距离,贴近屏幕 private void setCameraDistance() { int distance = 16000; float scale = getResources().getDisplayMetrics().density * distance; mainFlCardFront.setCameraDistance(scale); mainFlCardBack.setCameraDistance(scale); } //点击卡片翻转卡片 public void fipCard(View view) { //正面朝上 if (!mIsShowBack) { mRightOutSet.setTarget(mainFlCardBack); mLeftOutSet.setTarget(mainFlCardFront); mRightOutSet.start(); mLeftOutSet.start(); mIsShowBack = true; } else { mRightOutSet.setTarget(mainFlCardFront); mLeftOutSet.setTarget(mainFlCardBack); mRightOutSet.start(); mLeftOutSet.start(); mIsShowBack = false; } } }
希望对你有帮助
项目地址:http://download.csdn.net/detail/liufatao/9750898