两个activity的3D翻转动画.md
一.业务需求
这里在公司项目设计时,用到了一个小的需求,就是点击一个按钮然后整个activity的页面进行3d翻转;
二.设计思路
由于是2个activity的之间的翻转动画,就意味着前90度是A页面进行翻转翻转结束后B页面从90到0度完成整个翻转过程;再从B翻转到A也是同样,B先翻转90度然后A再从90度翻转到0度,这样就完成了一个衔接;
那么这里就需要一个3D的翻转类,

三.代码实现
import android.view.animation.Animation;
import android.view.animation.Transformation;
import android.graphics.Camera;
import android.graphics.Matrix;
/**
* An animation that rotates the view on the Y axis between two specified angles.
* This animation also adds a translation on the Z axis (depth) to improve the effect.
*/
public class Rotate3dAnimation extends Animation {
private final float mFromDegrees;
private final float mToDegrees;
private final float mCenterX;
private final float mCenterY;
private final float mDepthZ;
private final boolean mReverse;
private Camera mCamera;
/**
* Creates a new 3D rotation on the Y axis. The rotation is defined by its
* start angle and its end angle. Both angles are in degrees. The rotation
* is performed around a center point on the 2D space, definied by a pair
* of X and Y coordinates, called centerX and centerY. When the animation
* starts, a translation on the Z axis (depth) is performed. The length
* of the translation can be specified, as well as whether the translation
* should be reversed in time.
*
* @param fromDegrees the start angle of the 3D rotation
* @param toDegrees the end angle of the 3D rotation
* @param centerX the X center of the 3D rotation
* @param centerY the Y center of the 3D rotation
* @param reverse true if the translation should be reversed, false otherwise
*/
public Rotate3dAnimation(float fromDegrees, float toDegrees,
float centerX, float centerY, float depthZ, boolean reverse) {
mFromDegrees = fromDegrees;
mToDegrees = toDegrees;
mCenterX = centerX;
mCenterY = centerY;
mDepthZ = depthZ;
mReverse = reverse;
}
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mCamera = new Camera();
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
final float fromDegrees = mFromDegrees;
float degrees = fromDegrees + ((mToDegrees - fromDegrees) * interpolatedTime);
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
final Matrix matrix = t.getMatrix();
camera.save();
if (mReverse) {
camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);
} else {
camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));
}
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
import android.app.Activity;
import android.util.Log;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
public class RotationHelper {
DisplayNextView displayNext;
public RotationHelper(Activity con,int order){
displayNext = new DisplayNextView(con, order);
}
// 逆时针旋转90
public void applyFirstRotation(ViewGroup layout,float start, float end) {
// Find the center of the container
final float centerX = layout.getWidth() / 2.0f;
final float centerY = layout.getHeight() / 2.0f;
Log.i("centerX =" + centerX, "centerX");
Log.i("centerY =" + centerY, "centerY");
// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end,
centerX, centerY, 310.0f, true);
rotation.setDuration(700);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
rotation.setAnimationListener(displayNext);
layout.startAnimation(rotation);
}
public void applyLastRotation(ViewGroup layout,float start, float end) {
// Find the center of the container
final float centerX = layout.getWidth() / 2.0f;
final float centerY = layout.getHeight() / 2.0f;
Log.i("centerX =" + centerX, "centerX");
Log.i("centerY =" + centerY, "centerY");
// Create a new 3D rotation with the supplied parameter
// The animation listener is used to trigger the next animation
final Rotate3dAnimation rotation = new Rotate3dAnimation(start, end,
160, 192, 310.0f, false);
rotation.setDuration(700);
rotation.setFillAfter(true);
rotation.setInterpolator(new AccelerateInterpolator());
layout.startAnimation(rotation);
}
}
import android.app.Activity;
import android.view.animation.Animation;
public class DisplayNextView implements Animation.AnimationListener {
Object obj;
// 动画监听器的构造函数
Activity ac;
int order;
public DisplayNextView(Activity ac, int order) {
this.ac = ac;
this.order = order;
}
public void onAnimationStart(Animation animation) {
}
public void onAnimationEnd(Animation animation) {
doSomethingOnEnd(order);
}
public void onAnimationRepeat(Animation animation) {
}
private final class SwapViews implements Runnable {
public void run() {
switch (order) {
case Constants.KEY_FIRST_INVERSE:
((TranslateLayout) ac).jumpToSecond();
break;
case Constants.KEY_SECOND_CLOCKWISE:
((Second) ac).jumpToFirst();
break;
}
}
}
//动画完成的监听
public void doSomethingOnEnd(int _order) {
switch (_order) {
case Constants.KEY_FIRST_INVERSE:
((TranslateLayout) ac).layout1.post(new SwapViews());
break;
case Constants.KEY_SECOND_CLOCKWISE:
((Second) ac).layout2.post(new SwapViews());
break;
}
}
}
public class Constants {//相关常量
public final static int KEY_FIRST_INVERSE = 1;
public final static int KEY_FIRST_CLOCKWISE = 2;
public final static int KEY_SECOND_INVERSE = 3;
public final static int KEY_SECOND_CLOCKWISE = 4;
}
//第一个页面
public class TranslateLayout extends Activity implements OnClickListener {
RelativeLayout layout1;
String tag="";
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.first);
ImageView first_btn = (ImageView) findViewById(R.id.first_btn);
first_btn.setOnClickListener(this);
layout1 = (RelativeLayout) findViewById(R.id.layout1);
showView();
}
public void showView() {
/* 取得Intent中的Bundle对象 */
Bundle bundle = this.getIntent().getExtras();
if (bundle != null) {
/* 取得Bundle对象中的数据 */
tag = bundle.getString("second","");
Log.d("first_tag",tag);
if (tag.equals("Second")) {
rotateHelper = new RotationHelper(this,
Constants.KEY_FIRST_CLOCKWISE);
rotateHelper.applyLastRotation(layout1, -90, 0);
}
}
}
RotationHelper rotateHelper;
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
rotateHelper = new RotationHelper(this, Constants.KEY_FIRST_INVERSE);
rotateHelper.applyFirstRotation(layout1, 0, -90);
}
@Override
protected void onPause() {
overridePendingTransition(0, 0);
super.onPause();
}
public void jumpToSecond() {
Intent in = new Intent();
in.setClass(this, Second.class);
// new一个Bundle对象,并将要传递的数据传入
Bundle bundle = new Bundle();
bundle.putString("front", "First");
/* 将Bundle对象assign给Intent */
in.putExtras(bundle);
// 如果已经打开过的实例,将不会重新打开新的Activity
startActivity(in);
//关闭掉动画
overridePendingTransition(0, 0);
}
}
/**
* Created by cxf on 2017/9/13.
*
* @title
* @describe
* @email chenxianfu_it@163.com
*/
//第二个页面
public class Second extends Activity implements OnClickListener {
String tag = "";
RotationHelper rotateHelper;
RelativeLayout layout2;
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.second);
layout2 = (RelativeLayout) findViewById(R.id.layout2);
showView();
setListener();
}
public void setListener() {
ImageView second_btn = (ImageView) findViewById(R.id.second_btn);
second_btn.setOnClickListener(this);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
rotateHelper = new RotationHelper(this,
Constants.KEY_SECOND_CLOCKWISE);
rotateHelper.applyFirstRotation(layout2, 0, 90);
}
public void showView() {
/* 取得Intent中的Bundle对象 */
Bundle bundle = this.getIntent().getExtras();
if (bundle != null) {
/* 取得Bundle对象中的数据 */
tag = bundle.getString("front");
}
System.out.println("bundle =" + tag);
if (tag.equals("First")) {
rotateHelper = new RotationHelper(this, Constants.KEY_SECOND_INVERSE);
rotateHelper.applyLastRotation(layout2, 90, 0);
}
}
@Override
protected void onDestroy() {
overridePendingTransition(0, 0);
super.onDestroy();
}
public void jumpToFirst() {
Intent in = new Intent();
in.setClass(this, TranslateLayout.class);
Bundle bundle = new Bundle();
bundle.putString("second", "Second");
in.putExtras(bundle);
startActivity(in);
overridePendingTransition(0, 0);
finish();
}
}
两个activity的3D翻转动画.md的更多相关文章
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- 【译】仿Taasky的3D翻转菜单动画实现
最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...
- 纯CSS 3D翻转一个面(翻转导航菜单 立方体)
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...
- WPF实现3D翻转的动画效果
1.前端代码实现 1.1 原理见代码注析 <Grid MouseDown="Grid_MouseDown"> <Viewport3D> <Viewpo ...
- 《转载》两个activity界面间跳转切换动画效果
1overridePendingTransition Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出 ...
- CSS3之图片3D翻转效果(网页效果--每日一更)
今天,带来的是纯CSS3的效果--图片3D翻转. 请看效果:亲,请点击这里 这个效果主要还是运用了CSS3的transform变形属性,与上个效果不同的是,这次并不是动画,所以没有采用animatio ...
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
摘要: 通过backface-visibility:hidden;属性,我们可以使一个元素在翻转之后消失,这是可以使用另一个元素放在它的背面,从而制作出一种元素翻转之后出现另一个元素的效果. ... ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
随机推荐
- 避免uncaughtException错误引起node.js进程崩溃
uncaughtException 未捕获的异常, 当node.js 遇到这个错误,整个进程直接崩溃. 或许这俩个人上辈子一定是一对冤家. 或许这俩个人经历了前世500次的回眸才换来了今生的相遇,只可 ...
- redis慢日志
redis的slowlog是redis用于记录记录慢查询执行时间的日志系统.由于slowlog只保存在内存中,因此slowlog的效率很高,完全不用担心会影响到redis的性能.Slowlog是Red ...
- pl/sql的介绍
为什么需要pl/sql编程? 因为使用纯的sql语句来操作数据库,有先天性的技术缺陷: 1.不能模块编程: 2.执行速度慢: 3.安全性有问题: 4.浪费带宽. pl/sql是什么? pl/sql(p ...
- 【Redis使用系列】Redis常用操作
一.string类型的常用命令 set key value #一个key对应一个value.多次赋值,会覆盖前面. setnx key value #如果key存在则创建key1,并返回1,如果 ...
- 网络1712--c语言一二维数组作业总结
1.成绩摆前头 1.1基本要求(1分) 按时交 - 有分 未交 - 0分 迟交一周以上 - 倒扣本次作业分数 抄袭 - 0分 泛泛而谈(最多七分) 1.2评分要点 PTA作业总结(4分) 同学代码互评 ...
- C语言的第一次作业
一.PTA实验作业 题目1. 温度转换 本题要求编写程序,计算华氏温度150°F对应的摄氏温度.计算公式:C=5×(F−32)/9,式中:C表示摄氏温度,F表示华氏温度,输出数据要求为整型. 1.实验 ...
- 20155214&20155216 实验二:固件程序设计
---恢复内容开始--- 20155214&20155216 实验二:固件程序设计 实验内容及要求 实验二 固件程序设计-1-MDK 实验要求: 1.注意不经老师允许不准烧写自己修改的代码 2 ...
- C语言--第0周作业
1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题: 1)最理想的师生关系是健身教练和学员的关系,在这种师生关系中你期望获得来自老师的哪些帮助? 答: 若教练和学员的关系是最理想的师生关系,那就意味 ...
- C语言--第七周作业
一.求交错序列前N项和 1.代码 #include <stdio.h> int main() { int i=1,N; double j=0,sum=0; scanf("%d&q ...
- 结合Socket实现DDoS攻击
一.实验说明 1. 实验介绍 通过上一节实验的SYN泛洪攻击结合Socket实现DDoS攻击. 2. 开发环境 Ubuntu Linux Python 3.x版本 3. 知识点 本次实验将涉及以下知识 ...