目录
效果展示
关键知识点
这个3D翻转效果的核心其实就是Rotate3DAnimation这个自定义的Animation类
public class Rotate3DAnimation extends Animation {
private int mCenterX,mCenterY;
private Camera mCamera;
private float mFromDegrees,mToDegrees;
private AnimationUpdateListener updateListener;
private int mWidth;
public AnimationUpdateListener getUpdateListener() {
return updateListener;
}
public void setUpdateListener(AnimationUpdateListener updateListener) {
this.updateListener = updateListener;
}
public Rotate3DAnimation(float mFromDegrees, float mToDegrees) {
this.mFromDegrees = mFromDegrees;
this.mToDegrees = mToDegrees;
}
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
mWidth = width;
mCenterX = width / 2;
mCenterY = height / 2;
mCamera = new Camera();
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
float degress = mFromDegrees + (interpolatedTime * (mToDegrees - mFromDegrees));
if(updateListener != null){
updateListener.onProgressUpdate(interpolatedTime,degress);
}
Matrix matrix = t.getMatrix();
mCamera.save();
//让旋转90度的时候不显的太大
if(interpolatedTime >= 0.5){
mCamera.translate(0,0,(Math.abs(interpolatedTime - 1) / 0.5f) * mWidth / 2);
}else {
mCamera.translate(0,0,(interpolatedTime / 0.5f) * mWidth / 2);
}
//图形绕Y轴旋转
mCamera.rotateY(degress);
mCamera.getMatrix(matrix);
//将原点移动到中心处
matrix.preTranslate(-mCenterX,-mCenterY);
matrix.postTranslate(mCenterX,mCenterY);
mCamera.restore();
super.applyTransformation(interpolatedTime, t);
}
/**
* 动画更新的回调
*/
public interface AnimationUpdateListener{
/**
* 进度回调
*/
void onProgressUpdate(float progress,float value);
}
}
我们这里主要是通过对android.graphics.Camera的操作来实现3D的变化，Camera的坐标系为三维左手坐标系，因此我们可以通过操作它来实现一些3D的效果
接下来我对各段代码进行详细说明。
下面这段代码是为了防止当图像旋转到90度的时候，图像的侧面刚好朝着我们导致看起来过大的问题，因此我们需要将图像沿着Z轴移动一下，就相当于一辆车从你身后往前开你会感觉车越来越小一个道理。
//让旋转90度的时候不显的太大
if(interpolatedTime >= 0.5){
mCamera.translate(0,0,(Math.abs(interpolatedTime - 1) / 0.5f) * mWidth / 2);
}else {
mCamera.translate(0,0,(interpolatedTime / 0.5f) * mWidth / 2);
}
不使用此段代码
使用此段代码后
下面这段代码是实现了图像旋转
//图形绕Y轴旋转
mCamera.rotateY(degress);
下面这段代码是为了将原点移动到图像的中心点
//将原点移动到中心处
matrix.preTranslate(-mCenterX,-mCenterY);
matrix.postTranslate(mCenterX,mCenterY);
如果不将图像移动到中心点则图像会沿着图像的左边旋转如下
这里还有一点要注意的是，我们需要将旋转后展示的页面（效果图的反面）提前先反转，这样在旋转后展示反面的时候就不会出现展示镜像的问题了，这里我通过继承FrameLayout并在dispatchDraw增加如下逻辑来实现的
@Override
protected void dispatchDraw(Canvas canvas) {
//将整个页面水平翻转，目的是为了抵消外布局翻转后的左右倒置现象
mCamera.save();
canvas.save();
//镜像反转
mCamera.rotateY(180);
Matrix matrix = new Matrix();
mCamera.getMatrix(matrix);
matrix.preTranslate(-getWidth()/2,-getHeight()/2);
matrix.postTranslate(getWidth()/2,getHeight()/2);
canvas.setMatrix(matrix);
mCamera.restore();
super.dispatchDraw(canvas);
canvas.restore();
}
3D翻转控件的使用方法
Rotate3DLayout内必需包含DefaultLayout（默认展示的页面）和ReverseLayout（翻转后展示的页面），然后以在DefaultLayout和ReverseLayout中进行自己的布局即可
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/bt_rotate"
android:text="3D旋转"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.example.rotate3dlayout.widget.Rotate3DLayout
android:id="@+id/rl_rotate"
android:background="@drawable/shape_bg"
android:padding="10dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:layout_width="300dp"
android:layout_height="400dp">
<com.example.rotate3dlayout.widget.DefaultLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="我是正面"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="我是正面"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:hint="我是正面"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</com.example.rotate3dlayout.widget.DefaultLayout>
<com.example.rotate3dlayout.widget.ReverseLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:text="我是反面"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="我是反面"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<EditText
android:hint="我是反面"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</com.example.rotate3dlayout.widget.ReverseLayout>
</com.example.rotate3dlayout.widget.Rotate3DLayout>
</LinearLayout>
通过rotate3D方法即可实现翻转
public class MainActivity extends AppCompatActivity {
private Button btRotate;
private Rotate3DLayout rlRotate;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
btRotate = (Button) findViewById(R.id.bt_rotate);
rlRotate = (Rotate3DLayout) findViewById(R.id.rl_rotate);
//点击后翻转
btRotate.setOnClickListener(v->rlRotate.rotate3D());
}
}
网友评论