Android uses camera to realize the rollover effect of the central axis 3D card _android

Source: Internet
Author: User
Tags in degrees

In the Android system API, there are two camera classes:

    • Android.graphics.Camera
    • Android.hardware.Camera

The second application in the mobile phone hardware related to the operation of the camera, this article is about using the first camera class to achieve the central axis 3D conversion card rollover effect, before you start, look at the Android system in the coordinates:

Corresponds to three directions in a three-dimensional coordinate system, camera provides three methods of rotation:

    • Rotatex ()
    • Rotatey ()
    • Rotatex ()

Call these three methods and pass in the rotation angle parameter to enable the view to rotate along the axis. The central axis 3D rotation effect of this article is to have the view rotate along the y-axis.

The system API demos has provided us with a very useful 3D rotary animation tool class:
Rotate3danimation.java:

Package com.feng.androidtest;
Import Android.graphics.Camera;
Import Android.graphics.Matrix;
Import Android.util.Log;
Import android.view.animation.Animation;

Import android.view.animation.Transformation;
 /** * A animation that rotates's view on the Y axis between two specified.
 * This animation also adds a translation on the Z axis (depth) to improve the effect.
 * * public class Rotate3danimation extends Animation {private final float mfromdegrees;
 Private final float mtodegrees;
 Private final float Mcenterx;
 Private final float mcentery;
 Private final float Mdepthz;
 Private Final Boolean mreverse;

 Private Camera Mcamera; /** * Creates a new 3D rotation on the Y axis. The rotation is defined through its * start angle and its-end angle. Both angles are in degrees.  The rotation * is performed around "a center point" on the 2D spaces, definied by a pair * of X and Y coordinates, called CenterX and CenterY. When the animation * starts, a translation on the Z axIs (depth) is performed.
  The length * of the translation can be specified, as the as-as-whether the translation * should is reversed in time. * @param fromdegrees The start angle of the 3D rotation * @param todegrees the end angle of the 3D rotation * @par Am CenterX The X center of the 3D rotation * @param centery the Y center of the 3D rotation * @param reverse true if t He translation should to be reversed, false otherwise * * Public rotate3danimation (float fromdegrees, float todegrees, F
  Loat 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 ();
  LOG.I ("Interpolatedtime", interpolatedtime+ "");
  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);

 }
}

As you can see, rotate3danimation has done two things: the parameters needed to rotate the animation in the constructor, and the Applytransformation () method in the overridden (override) parent animation, which is described in the following categories:

    • Fromdegrees and Todegrees
    • The start and end angles of the view rotation, and the view becomes invisible when the todegree is 90 times times the number.
    • CenterX and CenterY
    • The center point of the view rotation.
    • Depthz
    • The z-axis moving cardinality, which is used to calculate the distance the camera moves in the z axis
    • Reverse
    • A Boolean type that controls the direction of the z-axis movement to achieve a view magnification reduction resulting from visual proximity movement.
    • Applytransformation ()
    • According to the animation time Interpolatedtime (animation start to end of the process, interpolatedtime from 0.0 to 1.0), so that camera in the direction of the z-axis of the corresponding distance movement, to achieve the visual effect of moving near and far. The Rotatex () method is then invoked to rotate the view around the y-axis to produce a 3D stereo rotation effect. Finally, the matrix is used to determine the position of the center point of the rotation.

Activity_main.xml Layout file:

<?xml version= "1.0" encoding= "Utf-8"?> <relativelayout xmlns:android= "http://schemas.android.com/apk/res/" Android "xmlns:tools=" Http://schemas.android.com/tools "android:layout_width=" Fill_parent "android:layout_height= "Fill_parent" android:background= "@android: Color/white" > <button android:id= "@+id/btn_open" Android:layout_w Idth= "Match_parent" android:layout_height= "wrap_content" android:layout_margin= "16DP" android:onclick= " Onclickview "android:text=" open "android:textcolor=" @android: Color/black "android:textsize=" 16sp "/> <Relative Layout android:id= "@+id/rl_content" android:layout_width= "match_parent" android:layout_height= "Match_parent" Andro id:layout_below= "@id/btn_open" android:layout_margintop= "16DP" android:background= "@android: Color/black" > < ImageView android:id= "@+id/iv_logo" android:layout_width= "match_parent" android:layout_height= "Match_parent" a ndroid:contentdescription= "@null" android:src= "@Drawable/ic_qrcode "android:scaletype=" Centerinside "/> <textview android:id=" @+id/tv_desc "Android:layo Ut_width= "Wrap_content" android:layout_height= "wrap_content" android:padding= "16DP" android:text= "cloud-Habitat community. "Android:textcolor=" @android: Color/white "android:textsize=" 18sp "android:visibility=" Gone "/> </relative

 Layout> </RelativeLayout>

A picture control with the front of the card is configured in the layout, the text controls on the back of the card, and their parent container, which is the execution object of the rotation animation in this article.

Mainactivity.java file:

Package com.feng.androidtest;
Import android.app.Activity;
Import Android.os.Bundle;
Import Android.view.View;
Import Android.view.animation.AccelerateInterpolator;
Import android.view.animation.Animation;
Import Android.view.animation.Animation.AnimationListener;
Import Android.view.animation.DecelerateInterpolator;
Import Android.widget.Button;
Import Android.widget.ImageView;
Import Android.widget.RelativeLayout;

Import Android.widget.TextView;

Import COM.EXAMPLE.ANDROIDTEST.R;
 public class Mainactivity extends activity {private relativelayout Mcontentrl;
 Private ImageView Mlogoiv;
 Private TextView MDESCTV;

 Private Button mopenbtn;
 private int CenterX;
 private int centery;
 private int depthz = 400;
 private int duration = 600;
 Private Rotate3danimation openanimation;

 Private Rotate3danimation closeanimation;

 Private Boolean isOpen = false;
  @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); Setcontentview (R.layoUt.activity_main);
  Mcontentrl = (relativelayout) Findviewbyid (r.id.rl_content);
  MLOGOIV = (ImageView) Findviewbyid (R.id.iv_logo);
  MDESCTV = (TextView) Findviewbyid (R.ID.TV_DESC);

 MOPENBTN = (Button) Findviewbyid (R.id.btn_open);
  /** * Card Text Introduction Open effect: note the rotation angle */private void Initopenanim () {//From 0-90 degrees, rotate the view clockwise, at this point the reverse parameter is true, to 90 degrees when the animation at the end of the view becomes invisible,
  Openanimation = new Rotate3danimation (0, CenterX, CenterY, Depthz, true);
  Openanimation.setduration (duration);
  Openanimation.setfillafter (TRUE);
  Openanimation.setinterpolator (New Accelerateinterpolator ()); Openanimation.setanimationlistener (New Animationlistener () {@Override public void Onanimationstart (Animation anima tion) {} @Override public void Onanimationrepeat (Animation Animation) {} @Override public void OnA
    Nimationend (Animation Animation) {mlogoiv.setvisibility (view.gone);

    Mdesctv.setvisibility (view.visible);
From 270-360 degrees, rotate the view clockwise, at which point the reverse argument is false and the view becomes visible at the end of the 360-degree animation    Rotate3danimation rotateanimation = new Rotate3danimation (270, 360, CenterX, CenterY, Depthz, false);
    Rotateanimation.setduration (duration);
    Rotateanimation.setfillafter (TRUE);
    Rotateanimation.setinterpolator (New Decelerateinterpolator ());
   Mcontentrl.startanimation (rotateanimation);
 }
  }); /** * Card Text Introduction Close effect: rotation angle and open when retrograde can/private void Initcloseanim () {closeanimation = new rotate3danimation (360, 270
  , CenterX, CenterY, Depthz, true);
  Closeanimation.setduration (duration);
  Closeanimation.setfillafter (TRUE);
  Closeanimation.setinterpolator (New Accelerateinterpolator ()); Closeanimation.setanimationlistener (New Animationlistener () {@Override public void Onanimationstart (Animation anim ation) {} @Override public void Onanimationrepeat (Animation Animation) {} @Override public void on
    Animationend (Animation Animation) {mlogoiv.setvisibility (view.visible);

    Mdesctv.setvisibility (View.gone); Rotate3danimation roTateanimation = new Rotate3danimation (0, CenterX, CenterY, Depthz, false);
    Rotateanimation.setduration (duration);
    Rotateanimation.setfillafter (TRUE);
    Rotateanimation.setinterpolator (New Decelerateinterpolator ());
   Mcontentrl.startanimation (rotateanimation);
 }
  }); The public void Onclickview (view v) {//is the center point of the rotated object as the central point of rotation, where it is primarily not oncreate method, because the width of the view when it was initially drawn is 0 CenterX = mcontentrl.ge
   Twidth ()/2;
   CenterY = Mcontentrl.getheight ()/2;
   if (openanimation = = null) {Initopenanim ();
  Initcloseanim ();
  ///used to determine if the animation is executing if (openanimation.hasstarted () &&!openanimation.hasended ()) {return) when the current click event occurs;
  } if (closeanimation.hasstarted () &&!closeanimation.hasended ()) {return;

  //Judge Animation execution if (IsOpen) {mcontentrl.startanimation (closeanimation);
  }else {mcontentrl.startanimation (openanimation);
  } IsOpen =!isopen; Mopenbtn.settext (IsOpen?)
 "Off": "Open");

 }
}

The code has commented on the location of the core, which mainly makes clear the parameters of Fromdegrees and todegrees, Depthz and reverse in the rotate3danimation construction parameters, and also sets the speed insertion device in the animation. such as the first half of the animation using accelerator Accelerateinterpolator, the latter half of the use of reducer decelerateinterpolator, so that the animation experience more humane.

The above is the entire content of this article, I hope to learn more about Android software programming help.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.