常常會登錄簡書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，那我也自己做一個粗來。長期積累，知識面越拓越寬，你就會驚人地發現，哇，原來我還有這么多不會！這就是不停學下去的動力！
關注我，一起成長吧！
