High imitation 3D flip switch effect

Effect:

High imitation 3D rotation effect. GIF

preface

As Android programmers, we inevitably need to do animations if we want to mimic cool effects, or if we want to achieve a weird visual need, or if we want to show off our creative instincts.

Implementation logic

  • Custom Animation implements its own logic
  • Controls the rotation animation of Matrix

Control animation introduction

In fact, control animation is also a layout animation, can be seen as a custom animation implementation, Layout animation defines in XML the animation effects already implemented by OPhone (AlphaAnimation, TranslateAnimation, ScaleAnimation, RotateAnimation) while control animation inherits Android.View in code. Animation.Animation class to implement custom effects.

Control animation implementation

Custom Animation effects are implemented by overriding the Animation’s applyTransformation (float interpolatedTime, Transformation T) function. Initialize (int width, int height, int parentWidth, int parentHeight) is a callback function that tells the Animation the size of the target View. Here you can initialize some related parameters, such as setting the duration of the animation, Interpolator, the reference point of the animation, etc.

@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 * (0.0f-interpolatedTime)); } camera.rotateY(degrees); camera.getMatrix(matrix); camera.restore(); matrix.preTranslate(-centerX, -centerY); matrix.postTranslate(centerX, centerY); }Copy the code

How to set up a new 3D rotating container view

/** * Sets a new 3d rotated container view. Just turn the general, then set the new reality content * * @param Zheng * a judgment mechanism iftrueIf I flip it to the right, if IfalsePublic void applyRotation(final Boolean) public void applyRotation(final Boolean zheng, final Fragment fragment, finalfloat start, final float end) {
        // Find the center of the container
        final floatCenterX = framelayout.getwidth () / 2.0f; finalfloatCenterY = framelayout.getheight () / 2.0f; centerY = framelayout.getheight () / 2.0f; // Create a new 3D rotation with the supplied parameter // The animation listener is used to trigger the next animation Final Util_Rotate3DAnimation Rotation = new Util_Rotate3DAnimation(start, end, centerX, centerY, 310.0f,true);
        rotation.setDuration(500);
        rotation.setFillAfter(true); rotation.setInterpolator(new AccelerateInterpolator()); rotation.setAnimationListener(new DisplayNextView(zheng, fragment)); / / add to monitor the performance of the reality of switching framelayout startAnimation (rotation); // execute the first half flip animation}Copy the code

How to call using fragment interface switch

button.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                ((MainActivity) getActivity()).applyRotation(false, new Fragment_First(), 0, -90); }});Copy the code

Project Address:

Github.com/androidstar…

More articles

Advanced UI special like live like effect – a beautiful cool like animation

A small case of recording and playback

Believe in yourself, there is nothing impossible, only unexpected

If you think this article is helpful to you, welcome to join the wechat public number: Terminal R&D Department

Technology + Workplace