Android 实现卡片翻转的动画(翻牌动画)
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 实现的,如果动画需要再次显示,那么在动画结束之后就需要将控件的属性值设置为初始值,因为属性动画会修改控件的属性值为动画结束时的属性值。
参考文章
Android 实现卡片翻转的动画(翻牌动画)的更多相关文章
- 【Android Developers Training】 71. 显示翻牌动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 翻牌动画(CocosCreator)
推荐阅读: 我的CSDN 我的博客园 QQ群:704621321 在游戏中,有时候为了通过一种有意思的途径,让用户在一些物品中随机获取某种物品,除了前面我们提到的使用大转盘抽奖获得, ...
- android 帧动画,补间动画,属性动画的简单总结
帧动画——FrameAnimation 将一系列图片有序播放,形成动画的效果.其本质是一个Drawable,是一系列图片的集合,本身可以当做一个图片一样使用 在Drawable文件夹下,创建ani ...
- 浅谈Android样式开发之View Animation (视图动画)
引言 一个用户体验良好的App肯定少不了动画效果.Android为我们提供了2种动画框架,分别是视图动画(View Animation)和属性动画(Property Animation).视图动画比较 ...
- Android Activity和Fragment的转场动画
Android Activity和Fragment的转场动画 Activity转场动画 Activity的转场动画是通过overridePendingTransition(int enterAnim, ...
- [转]ANDROID L——Material Design详解(动画篇)
转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! 转自:http://blog.csdn.net/a396901990/article/de ...
- Android开发教程AnimationDrawable逐帧播放动画
下面我们一起来看篇Android开发AnimationDrawable控制逐帧播放动画实现过程,希望文章对各位朋友带不一些帮助. 当我们点击按钮时,该图片会不停的旋转,当再次点击按钮时,会停止在当前的 ...
- Android隐藏虚拟按键,关闭开机动画、开机声音
/*********************************************************************** * Android隐藏虚拟按键,关闭开机动画.开机声音 ...
- Android ViewPager多页面滑动切换以及动画效果
一.首先,我们来看一下效果图,这是新浪微博的Tab滑动效果.我们可以手势滑动,也可以点击上面的头标进行切换.与此同方式,白色横条会移动到相应的页卡头标下.这是一个动画效果,白条是缓慢滑动过去的.好了, ...
随机推荐
- 【原创精品】mac 彻底卸载趋势科技
在公司,给我的mac 笔电装了公司的查杀毒软件,此后,这货就像挥之不去的病毒,就像你心理上阴影一样如影随形,最邻人方案的是这货没界面,只是个后台服务,一般人就没办法了.最最令人反感的是它经常控制/拖慢 ...
- The Quad - Directory Explorer(一款四窗口的文件资源管理器)
官网:http://www.q-dir.com/ 参考这位兄弟的介绍:https://www.cnblogs.com/clso/p/4694486.html 一款四窗口的文件资源管理器.
- MySQL系列
目录: 一.初识数据库 二.库相关操作 三.表相关操作 四.记录相关操作 五.数据备份.pymysql模块 六.视图.触发器.事务.存储过程.函数 七.ORM框架SQLAlchemy 八.索引原理与慢 ...
- avue的小白之路
经过几天的看实例,我稍稍了解到了avue,写这个博客主要是最近学习avue的一个总结.. avue是基于vue与element ui的一个框架,强烈建议等了解这其中道理在学习avue会事半功倍:这是我 ...
- 普通用户添加sudo权限
1.切换超级用户 su - root 2.编辑配置文件 vim /etc/sudoers ## Allow root to run any commands anywhere root ALL=(AL ...
- 3dmax 笔记本电脑
一般来说,苹果MacBook系列适合运行3ds Max. 3ds Max是一款大型图像处理软件,对电脑硬件要求高.在所有MacBook系列中,配备Retina屏幕的MacBook Pro 15寸是最佳 ...
- linux服务器用ssh 公钥下载代码 创建公钥,添加
ssh-keygen -t rsa -C "8....@qq.com"cd ~/.sshcat id_rsa.pub 粘贴到对应的 https://github.com/setti ...
- 1.初识Node.js
Node.js基础知识大汇总 1.下载并安装npm,检测安装是否成功(在命令行输入node -v,看是否会输出对应版本号) 2.写一个hello world 程序. (1).打开notepad,新建一 ...
- Spiring系列__03IOC补充
这篇文章是对前一篇的一些补充: 1.SpringIOC容器可以管理Bean的声明周期: 通过构造器或工厂方法创建bean的实例: 为bean属性设置值或者引入其他bean: 调用bean的初始化方法, ...
- SpringInAction学习笔记(一):核心概念
Spring自带了多种应用上下文 AnnotationConfigApplicationContext:从一个或多个java配置类中加载应用上下文 AnnotationConfigWebApplica ...