常常会登录简书App看文章和技术博客，很喜欢简书App清新的设计。今天，仿着简书登录注册页面的3d翻转效果做了一个，虽然不是高大上的技术，但是总能让人眼前一亮。
简书效果图：
原版
自制效果图：（ps截屏用来作旋转封面图）
自制
实现思路：
一个正面的布局，一个反面的布局，先隐藏反面布局；点击事件开启3d旋转动画，沿Y轴旋转0-90度，此时隐藏正面，显示背面。接着再开启3d旋转动画，沿Y轴旋转270-360度，正好从垂直到正对。
1.调用Camera相机的rotateY()沿X、Y轴翻转的方法，根据翻转角度进行矩阵转换。
注：相机有Camera和Camera2类，而Camera有graphics包和hardware两个包下的类，这里用的是graphics下的，拍照的相机用的hardware包下的。
image.png
3D旋转动画类：
mDepthZ：Z轴中心点； mReverse：旋转过程是否需要扭曲一边高度。
public class Rotate3D extends Animation {
// 开始角度
private final float mFromDegrees;
// 结束角度
private final float mToDegrees;
// X轴中心点
private final float mCenterX;
// Y轴中心点
private final float mCenterY;
// Z轴中心点
private final float mDepthZ;
//是否需要扭曲
private final boolean mReverse;
//摄像头
private Camera mCamera;
public Rotate3D(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);
}
}
2.布局文件，一个RelativeLayout包含两个imageview，分别显示正面和反面。
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
tools:context="com.example.rotate3d.rotate3d.MainActivity">
<RelativeLayout
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_page1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/bg1"/>
<ImageView
android:id="@+id/iv_page2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@mipmap/bg2"
android:visibility="gone"/>
</RelativeLayout>
</RelativeLayout>
3.点击页面，判断是从登录到注册还是注册到登录翻转
rlContainer.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(curPage == PAGE_LOGIN){
rotateAnim();
curPage = PAGE_REGISTER;
}else{
rotateAnim();
curPage = PAGE_LOGIN;
}
}
});
4.创建0-90度3d旋转动画，结束时控制子view显示隐藏，切换页面。继续启动3d动画，进行270-360度动画完成一圈。还不清楚的就拿2张卡片旋转一下，我就是这么整理思路的。
rotateAnim()实现：
private void rotateAnim(){
Rotate3D rotate3D = new Rotate3D(0,90,rlContainer.getWidth()/2,rlContainer.getHeight()/2,DEPTHZ,true);
rotate3D.setDuration(DURATION);
rotate3D.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if(curPage == PAGE_LOGIN){
imageView1.setVisibility(View.GONE);
imageView2.setVisibility(View.VISIBLE);
}else{
imageView1.setVisibility(View.VISIBLE);
imageView2.setVisibility(View.GONE);
}
Rotate3D rotate3D = new Rotate3D(270,360,rlContainer.getWidth()/2,rlContainer.getHeight()/2,DEPTHZ,false);
rotate3D.setDuration(DURATION);
rotate3D.setInterpolator(new DecelerateInterpolator());
rlContainer.startAnimation(rotate3D);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
rlContainer.startAnimation(rotate3D);
}
完整的MainActivity：
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.widget.ImageView;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
private RelativeLayout rlContainer;
private ImageView imageView1,imageView2;
private final int PAGE_LOGIN = 0;
private final int PAGE_REGISTER = 1;
private final int DEPTHZ = 500;
private final int DURATION = 300;
private int curPage;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
init();
}
private void init() {
rlContainer = (RelativeLayout) findViewById(R.id.rl);
imageView1 = (ImageView) findViewById(R.id.iv_page1);
imageView2 = (ImageView) findViewById(R.id.iv_page2);
rlContainer.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(curPage == PAGE_LOGIN){
rotateAnim();
curPage = PAGE_REGISTER;
}else{
rotateAnim();
curPage = PAGE_LOGIN;
}
}
});
}
private void rotateAnim(){
Rotate3D rotate3D = new Rotate3D(0,90,rlContainer.getWidth()/2,rlContainer.getHeight()/2,DEPTHZ,true);
rotate3D.setDuration(DURATION);
rotate3D.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
if(curPage == PAGE_LOGIN){
imageView1.setVisibility(View.GONE);
imageView2.setVisibility(View.VISIBLE);
}else{
imageView1.setVisibility(View.VISIBLE);
imageView2.setVisibility(View.GONE);
}
Rotate3D rotate3D = new Rotate3D(270,360,rlContainer.getWidth()/2,rlContainer.getHeight()/2,DEPTHZ,false);
rotate3D.setDuration(DURATION);
rotate3D.setInterpolator(new DecelerateInterpolator());
rlContainer.startAnimation(rotate3D);
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
rlContainer.startAnimation(rotate3D);
}
}
学技术就是这样啊，看别人的公众号、博客，看到别人会的技术，哦，666，那我也自己做一个粗来。长期积累，知识面越拓越宽，你就会惊人地发现，哇，原来我还有这么多不会！这就是不停学下去的动力！
关注我，一起成长吧！
