动画系列之——高仿简书App登录注册3D旋转

常常会登录简书App看文章和技术博客,很喜欢简书App清新的设计。今天,仿着简书登录注册页面的3d翻转效果做了一个,虽然不是高大上的技术,但是总能让人眼前一亮。

github代码直通车

简书效果图:


原版

自制效果图:(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,那我也自己做一个粗来。长期积累,知识面越拓越宽,你就会惊人地发现,哇,原来我还有这么多不会!这就是不停学下去的动力!
关注我,一起成长吧!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容