注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好。
原文链接:http://developer.android.com/training/animation/cardflip.html
这一节课将向您展示如何用自定义的fragment动画来实现翻牌动画(Card Flip)。翻牌动画是在视图切换的时候以翻牌形式为过渡动画的效果,其如下所示:
如果你希望略过这部分内容直接看代码样例,可以直接下载样例代码,然后选择淡入淡出动画的例子。下面的文件是实现代码:
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
layout/fragment_card_front.xml
一). 创建动画执行器
要创建翻牌动画,在“卡片”移出或者移入时,你需要两个动画执行器(Animator)。
card_flip_left_in.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" /> <!-- Rotate. -->
<objectAnimator
android:valueFrom="-180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" /> <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<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">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" /> <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<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">
<!-- Before rotating, immediately set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:duration="0" /> <!-- Rotate. -->
<objectAnimator
android:valueFrom="180"
android:valueTo="0"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" /> <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
<objectAnimator
android:valueFrom="0.0"
android:valueTo="1.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
card_flip_right_out.xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Rotate. -->
<objectAnimator
android:valueFrom="0"
android:valueTo="-180"
android:propertyName="rotationY"
android:interpolator="@android:interpolator/accelerate_decelerate"
android:duration="@integer/card_flip_time_full" /> <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
<objectAnimator
android:valueFrom="1.0"
android:valueTo="0.0"
android:propertyName="alpha"
android:startOffset="@integer/card_flip_time_half"
android:duration="1" />
</set>
二). 创建视图
“卡片”的每一面是任何你希望的相互独立的内容,比如两屏的文字,两幅图片,或者任何视图的组合。接下来你就需要后面需要增加动画的fragment的两个布局。下面卡片其中一面的布局:
<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
为卡片的正反面创建fragment。这些类返回你之前在每个fragment中的onCreateView()方法中创建的布局。你可以在这些fragment的父activity(你期望显示卡牌的地方)创建这些fragment的实例。下面的代码展示了一个包含有fragment内部类的activity类:
public class CardFlipActivity extends Activity {
...
/**
* A fragment representing the front of the card.
*/
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);
}
} /**
* A fragment representing the back of the card.
*/
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);
}
}
}
四). 卡片翻转动画
现在,你需要展示一个父activity中的fragment。要这么做,首先为你的activity创建布局。下面的例子创建了一个FrameLayout,你可以在运行时添加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的代码中,将视图设置为你刚才创建的布局。也可以展示一个创建activity时默认的fragment,下面的代码展示了如何显示默认的卡牌的正面:
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();
}
}
...
}
现在你已经有了卡牌的正面,你可以在某个时间通过卡牌反面的动画显示卡牌的背面。创建一个方法来显示卡牌的另一面,它做如下几件事情:
设置你之前为fragment切换所创建的自定义动画。
用新的fragment替换当前显示的fragment,并用你创建的自定义动画来执行这次动画切换。
将之前显示的fragment添加到回退栈中,所以当用户按下返回键时,卡片会翻转回来。
private void flipCard() {
if (mShowingBack) {
getFragmentManager().popBackStack();
return;
} // Flip to the back. mShowingBack = true; // Create and commit a new fragment transaction that adds the fragment for the back of
// the card, uses custom animations, and is part of the fragment manager's back stack. getFragmentManager()
.beginTransaction() // Replace the default fragment animations with animator resources representing
// rotations when switching to the back of the card, as well as animator
// resources representing rotations when flipping back to the front (e.g. when
// the system Back button is pressed).
.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 any fragments currently in the container view with a fragment
// representing the next page (indicated by the just-incremented currentPage
// variable).
.replace(R.id.container, new CardBackFragment()) // Add this transaction to the back stack, allowing users to press Back
// to get to the front of the card.
.addToBackStack(null) // Commit the transaction.
.commit();
}
【Android Developers Training】 71. 显示翻牌动画的更多相关文章
-
【Android Developers Training】 66. 添加动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 68. 序言:添加动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 61. 序言:使用OpenGL ES显示图像
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 105. 显示一个位置地址
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 101. 显示快速联系人挂件(Quick Contact Badge)
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 73. 布局变化的动画
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 60. 在你的UI中显示位图
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 55. 序言:高效显示位图
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
-
【Android Developers Training】 16. 暂停和恢复一个Activity
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
随机推荐
-
[译]libev和libevent的设计差异
本文译自what's the difference between libev and libevent? 作者是libev作者 [问]两个库都是为异步io调度而设计,在Linux上都是使用epoll ...
-
求两个集合的交集和并集C#
我是用hashset<T>来实现的 具体如代码所示 using System; using System.Collections.Generic; using System.Linq; u ...
-
PHP简易聊天室&;调试问题
在进入login.php程序之后 <?php error_reporting(E_ALL^E_NOTICE); session_start(); //装载Session库,一定要放在首行 $u ...
-
HDU 5025 (BFS+记忆化状压搜索)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5025 题目大意: 迷宫中孙悟空救唐僧,可以走回头路.必须收集完钥匙,且必须按顺序收集.迷宫中还有蛇, ...
-
[转]如何学好windows c++编程 学习精髓(收集,整理)
以下是很多VC爱好者的学习经历,希望对大家有所帮助: 我记得我在网上是这么说的:先学win32的SDK,也就是API, 再学MFC,这么一来呢,就先有个基础,MFC是API的封装, 如果API用的熟了 ...
-
Windows下MySQL重装引起问题的解决
解决了Plugin 'InnoDB' init function returned error问题和error1405那个安全设置密码登陆问题,我个人觉得关键点在于删除C:/Documents and ...
-
yum安装k8s集群(kubernetes)
此案例是以一个主,三个node来部署的,当然node可以根据自己情况部署 192.168.1.130 master 192.168.1.131 node1 192.168.1.132 node2 19 ...
-
linux 不允许多线程共享sqlite句柄
参考链接: http://blog.csdn.net/liangzhao_jay/article/details/45642085 sqlite3采用文件锁,效率过低. sqlite3采用的3种线程模 ...
-
如何查看哪个进程,使用了哪个CPU
某些时候,我们需要知道,在Unix/Linux 环境中,CPU究竟消耗在了哪些进程上面. 如下是最简单的方法: ps -elF
-
在WebBrowser中发送POST请求
我们要用到的也是WebBrowser的“Navigate”方法,其函数原型如下所示: Sub Navigate(URL As String, [Flags], [TargetFrameName], [ ...