Android 实现卡片翻转的动画(翻牌动画)

需求描述

  点击卡片,卡片翻转过来显示内容。

  点击左边的卡片,将卡片翻转显示右边的图片结果。

功能实现

  因为要翻转所以使用动画来完成翻转的动画。动画分为两部分,一部分是左边的布局以中心垂直线从左向右旋转,旋转 180 度之后隐藏,另一部分是右边的布局以中心垂直线从右向左旋转,旋转 180 度之后显示。
  这种动画涉及到播放顺序的问题,所以动画使用 Animator 属性动画实现。
布局

    <FrameLayout
android:id="@+id/activity_main_result_layout_fl"
android:layout_width="@dimen/activity_main_result_width"
android:layout_height="@dimen/activity_main_result_height"
android:layout_gravity="center"
android:layout_marginTop="@dimen/activity_main_result_margin_top"> <ImageView
android:id="@+id/activity_main_result_iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/result" /> <TextView
android:id="@+id/activity_main_result_tv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textColor="@android:color/white"
android:textSize="@dimen/activity_main_text_size"
android:visibility="gone" /> </FrameLayout>

动画文件

  • rotate_in_anim .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="1000"
    android:propertyName="rotationY"
    android:valueFrom="-180"
    android:valueTo="0" /> <!--出现-->
    <objectAnimator
    android:duration="0"
    android:propertyName="alpha"
    android:startOffset="500"
    android:valueFrom="0.0"
    android:valueTo="1.0" />
    </set>
  • rotate_out_anim.xml

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--旋转-->
    <objectAnimator
    android:duration="1000"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="180" /> <!--消失-->
    <objectAnimator
    android:duration="0"
    android:propertyName="alpha"
    android:startOffset="500"
    android:valueFrom="1.0"
    android:valueTo="0.0" />
    </set>

播放动画

    tv_result.setVisibility(View.VISIBLE);
tv_sure.setVisibility(View.VISIBLE);
AnimatorSet inAnimator = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.rotate_in_anim);
AnimatorSet outAnimator = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.rotate_out_anim);
int distance = 16000;
float scale = getResources().getDisplayMetrics().density * distance;
iv_result.setCameraDistance(scale); //设置镜头距离
tv_result.setCameraDistance(scale); //设置镜头距离
outAnimator.setTarget(iv_result);
inAnimator.setTarget(tv_result);
outAnimator.start();
inAnimator.start();
outAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
iv_result.setVisibility(View.GONE);
iv_result.setAlpha(1.0f);
iv_result.setRotationY(0.0f);
}
});

  注意:动画的实现方式是使用了属性动画 Animator 实现的,如果动画需要再次显示,那么在动画结束之后就需要将控件的属性值设置为初始值,因为属性动画会修改控件的属性值为动画结束时的属性值。

参考文章

http://lishuaishuai.iteye.com/blog/2297056

Android 实现卡片翻转的动画(翻牌动画)的更多相关文章

  1. 【Android Developers Training】 71. 显示翻牌动画

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  2. 翻牌动画(CocosCreator)

    推荐阅读:  我的CSDN  我的博客园  QQ群:704621321       在游戏中,有时候为了通过一种有意思的途径,让用户在一些物品中随机获取某种物品,除了前面我们提到的使用大转盘抽奖获得, ...

  3. android 帧动画,补间动画,属性动画的简单总结

      帧动画——FrameAnimation 将一系列图片有序播放,形成动画的效果.其本质是一个Drawable,是一系列图片的集合,本身可以当做一个图片一样使用 在Drawable文件夹下,创建ani ...

  4. 浅谈Android样式开发之View Animation (视图动画)

    引言 一个用户体验良好的App肯定少不了动画效果.Android为我们提供了2种动画框架,分别是视图动画(View Animation)和属性动画(Property Animation).视图动画比较 ...

  5. Android Activity和Fragment的转场动画

    Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...

  6. [转]ANDROID L——Material Design详解(动画篇)

    转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...

  7. Android开发教程AnimationDrawable逐帧播放动画

    下面我们一起来看篇Android开发AnimationDrawable控制逐帧播放动画实现过程,希望文章对各位朋友带不一些帮助. 当我们点击按钮时,该图片会不停的旋转,当再次点击按钮时,会停止在当前的 ...

  8. Android隐藏虚拟按键,关闭开机动画、开机声音

    /*********************************************************************** * Android隐藏虚拟按键,关闭开机动画.开机声音 ...

  9. Android ViewPager多页面滑动切换以及动画效果

    一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...

随机推荐

  1. 【原创精品】mac 彻底卸载趋势科技

    在公司,给我的mac 笔电装了公司的查杀毒软件,此后,这货就像挥之不去的病毒,就像你心理上阴影一样如影随形,最邻人方案的是这货没界面,只是个后台服务,一般人就没办法了.最最令人反感的是它经常控制/拖慢 ...

  2. The Quad - Directory Explorer(一款四窗口的文件资源管理器)

    官网:http://www.q-dir.com/ 参考这位兄弟的介绍:https://www.cnblogs.com/clso/p/4694486.html 一款四窗口的文件资源管理器.

  3. MySQL系列

    目录: 一.初识数据库 二.库相关操作 三.表相关操作 四.记录相关操作 五.数据备份.pymysql模块 六.视图.触发器.事务.存储过程.函数 七.ORM框架SQLAlchemy 八.索引原理与慢 ...

  4. avue的小白之路

    经过几天的看实例,我稍稍了解到了avue,写这个博客主要是最近学习avue的一个总结.. avue是基于vue与element ui的一个框架,强烈建议等了解这其中道理在学习avue会事半功倍:这是我 ...

  5. 普通用户添加sudo权限

    1.切换超级用户 su - root 2.编辑配置文件 vim /etc/sudoers ## Allow root to run any commands anywhere root ALL=(AL ...

  6. 3dmax 笔记本电脑

    一般来说,苹果MacBook系列适合运行3ds Max. 3ds Max是一款大型图像处理软件,对电脑硬件要求高.在所有MacBook系列中,配备Retina屏幕的MacBook Pro 15寸是最佳 ...

  7. linux服务器用ssh 公钥下载代码 创建公钥,添加

    ssh-keygen -t rsa -C "8....@qq.com"cd ~/.sshcat id_rsa.pub 粘贴到对应的 https://github.com/setti ...

  8. 1.初识Node.js

    Node.js基础知识大汇总 1.下载并安装npm,检测安装是否成功(在命令行输入node -v,看是否会输出对应版本号) 2.写一个hello world 程序. (1).打开notepad,新建一 ...

  9. Spiring系列__03IOC补充

    这篇文章是对前一篇的一些补充: 1.SpringIOC容器可以管理Bean的声明周期: 通过构造器或工厂方法创建bean的实例: 为bean属性设置值或者引入其他bean: 调用bean的初始化方法, ...

  10. SpringInAction学习笔记(一):核心概念

    Spring自带了多种应用上下文 AnnotationConfigApplicationContext:从一个或多个java配置类中加载应用上下文 AnnotationConfigWebApplica ...