常常會(huì)登錄簡(jiǎn)書App看文章和技術(shù)博客，很喜歡簡(jiǎn)書App清新的設(shè)計(jì)。今天，仿著簡(jiǎn)書登錄注冊(cè)頁面的3d翻轉(zhuǎn)效果做了一個(gè)，雖然不是高大上的技術(shù)，但是總能讓人眼前一亮。
簡(jiǎn)書效果圖：
原版
自制效果圖：（ps截屏用來作旋轉(zhuǎn)封面圖）
自制
實(shí)現(xiàn)思路：
一個(gè)正面的布局，一個(gè)反面的布局，先隱藏反面布局；點(diǎn)擊事件開啟3d旋轉(zhuǎn)動(dòng)畫，沿Y軸旋轉(zhuǎn)0-90度，此時(shí)隱藏正面，顯示背面。接著再開啟3d旋轉(zhuǎn)動(dòng)畫，沿Y軸旋轉(zhuǎn)270-360度，正好從垂直到正對(duì)。
1.調(diào)用Camera相機(jī)的rotateY()沿X、Y軸翻轉(zhuǎn)的方法，根據(jù)翻轉(zhuǎn)角度進(jìn)行矩陣轉(zhuǎn)換。
注：相機(jī)有Camera和Camera2類，而Camera有g(shù)raphics包和hardware兩個(gè)包下的類，這里用的是graphics下的，拍照的相機(jī)用的hardware包下的。
image.png
3D旋轉(zhuǎn)動(dòng)畫類：
mDepthZ：Z軸中心點(diǎn)； mReverse：旋轉(zhuǎn)過程是否需要扭曲一邊高度。
public class Rotate3D extends Animation {
// 開始角度
private final float mFromDegrees;
// 結(jié)束角度
private final float mToDegrees;
// X軸中心點(diǎn)
private final float mCenterX;
// Y軸中心點(diǎn)
private final float mCenterY;
// Z軸中心點(diǎn)
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();//取得當(dāng)前矩陣
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);//翻轉(zhuǎn)
camera.getMatrix(matrix);// 取得變換后的矩陣
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
}
}
2.布局文件，一個(gè)RelativeLayout包含兩個(gè)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.點(diǎn)擊頁面，判斷是從登錄到注冊(cè)還是注冊(cè)到登錄翻轉(zhuǎn)
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.創(chuàng)建0-90度3d旋轉(zhuǎn)動(dòng)畫，結(jié)束時(shí)控制子view顯示隱藏，切換頁面。繼續(xù)啟動(dòng)3d動(dòng)畫，進(jìn)行270-360度動(dòng)畫完成一圈。還不清楚的就拿2張卡片旋轉(zhuǎn)一下，我就是這么整理思路的。
rotateAnim()實(shí)現(xiàn)：
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);
}
}
學(xué)技術(shù)就是這樣啊，看別人的公眾號(hào)、博客，看到別人會(huì)的技術(shù)，哦，666，那我也自己做一個(gè)粗來。長期積累，知識(shí)面越拓越寬，你就會(huì)驚人地發(fā)現(xiàn)，哇，原來我還有這么多不會(huì)！這就是不停學(xué)下去的動(dòng)力！
關(guān)注我，一起成長吧！
