Android Animation (Tween Animation) detailed (gradient, zoom, shift, rotate) _android

Source: Internet
Author: User

This article is an example of the gradual change of Android animation (Tween Animation). Share to everyone for your reference, specific as follows:

The Android platform offers two types of animations. One is the tween animation, that is, the objects in the scene constantly changing the image to produce animation effects (rotation, translation, scaling and gradient).

The second category is frame animation, which is the sequential playback of the image in advance, similar to the GIF image principle.

Let's talk about Tweene animations.

Main class:

Animation Animation
Alphaanimation Gradient Transparency
Rotateanimation Picture Rotation
Scaleanimation Gradient Dimension Scaling
Translateanimation position Move
Animationset of the anthology

With these classes, how do we achieve animation effects?

Take a custom view as an example, the view is simple and there is only one picture on the screen. Now we're going to implement a variety of tween animation effects for the entire view.

Alphaanimation

Implement alphaanimation through code, as follows:

Initialize
Animation alphaanimation = new Alphaanimation (0.1f, 1.0f);
Set animation time Alphaanimation.setduration (3000);
This.startanimation (alphaanimation);

The first parameter of the Alphaanimation class Fromalpha the transparency at the beginning of the animation, and the second argument toalpha the transparency at the end of the animation.

Setduration is used to set the duration of the animation.

Rotateanimation

Code:

Animation rotateanimation = new Rotateanimation (0f, 360f);
Rotateanimation.setduration (1000);
This.startanimation (rotateanimation);

The first parameter of the Rotateanimation class fromdegrees the angle at which the animation starts, and the second argument todegrees the angle at the end of the animation.

In addition, you can set the telescopic mode Pivotxtype, Pivotytype, telescopic animation relative to the x,y coordinates of the start position pivotxvalue, Pivotyvalue, and so on.

Scaleanimation

Code:

Initialize
Animation scaleanimation = new Scaleanimation (0.1f, 1.0f,0.1f,1.0f);
Set animation time
scaleanimation.setduration (m);
This.startanimation (scaleanimation);

In the Scaleanimation class

The first argument is FROMX, and the second parameter Tox: The expansion dimension at the beginning and end of the animation, respectively.
The third parameter is fromy, and the fourth parameter toy: The scaling dimension at the beginning and end of the animation, at the y-coordinate.

In addition, you can set the telescopic mode Pivotxtype, Pivotytype, telescopic animation relative to the x,y coordinates of the start position pivotxvalue, Pivotyvalue, and so on.

Translateanimation

Code:

Initialize
Animation translateanimation = new Translateanimation (0.1f, 100.0f,0.1f,100.0f);
Set animation time translateanimation.setduration (1000);
This.startanimation (translateanimation);

Translateanimation class

The first argument is Fromxdelta, and the second parameter Toxdelta: The start of the animation, and the X coordinate at the end.
The third parameter is Fromydelta, and the fourth parameter Toydelta: The start of the animation, and the y-coordinate at the end.

Parameters Detailed Description:

Table II

XML node Function description
Alpha Gradient Transparency Animation effect
<alpha
Android:fromalpha= "0.1″
Android:toalpha= "1.0″
Android:duration= "3000″/>
Fromalpha

property is the transparency at the start of the animation

0.0 means full transparency
1.0 means completely opaque.
The value above takes a number of float data types between 0.0-1.0
Toalpha property is transparency at end of animation

Table III

Scale Gradient Size Telescopic animation effect
<scale
Android:interpolator= "@android: Anim/accelerate_decelerate_interpolator"
Android:fromxscale= "0.0″
Android:toxscale= "1.4″
Android:fromyscale= "0.0″
Android:toyscale= "1.4″
android:pivotx= "50%"
Android:pivoty= "50%"
Android:fillafter= "false"
Android:startoffset= "700"
Android:duration= "700″
Android:repeatcount= "10″/>
Fromxscale[float] Fromyscale[float] The scaling dimensions on the X, y coordinates at the beginning of the animation 0.0 means contraction to no
1.0 means normal no telescopic
A value of less than 1.0 indicates a contraction
Value greater than 1.0 indicates magnification
Toxscale [float]
Toyscale[float]
Stretch dimensions on X, y coordinates at the end of the animation
Pivotx[float]
Pivoty[float]
is the starting position of the animation's x and Y coordinates relative to the object Attribute value Description: value from 0%-100%, 50% is the midpoint position on the x or y direction coordinate of the object

translate
<translate
Android:fromxdelta= "30″
Android:toxdelta=" -80″
Android:fromydelta= "30″
android:toydelta=" 300″
android:duration= "2000″/>
Toxdelta colspan= valign= "Top" width= "189" >&NBSP;

Table V

Rotate Picture Transfer rotation animation effect
<rotate
Android:interpolator= "@android: Anim/accelerate_decelerate_interpolator"
Android:fromdegrees= "0″
Android:todegrees= "+350″
android:pivotx= "50%"
Android:pivoty= "50%"
Android:duration= "3000″/>
Fromdegrees The angle of the object for the start of the animation Description
When the angle is negative--Indicates a counter-clockwise rotation
When the angle is positive--it means clockwise rotation
(Negative from--to positive number: clockwise rotation)
(Negative from--to negative: rotate counterclockwise)
(Positive from--to positive: clockwise rotation)
(Positive from--to negative: counterclockwise rotation)
Todegrees property is at the end of the animation the object rotates at an angle that can be greater than 360 degrees
Pivotx
Pivoty
The start bit for the X and Y coordinates of the animation relative to the object Description: The above two attribute values are taken from the 0%-100%
50% is the midpoint position on the x or y direction coordinate of the object
all of these are separate animations, so how do you make multiple animations work at the same time?

The answer is animationset.

First look at the entire class name, but also thought to be just used to store a set of animation, looked at only to find that the class is inherited from animation.

Here we implement an animation that will let the picture move while the image transparency gradient, see the code directly.

Initialize Translate animation
translateanimation = new Translateanimation (0.1f, 100.0f,0.1f,100.0f);
Initialize Alpha animation
alphaanimation = new Alphaanimation (0.1f, 1.0f);
The animation set
animationset set = new Animationset (true);
Set.addanimation (translateanimation);
Set.addanimation (alphaanimation);
Set animation time (action to each animation)
set.setduration (1000);
This.startanimation (set);

Do you think it's easy?

Enclose the entire view class code.

Package Com.yfz.view;
Import COM.YFZ.R;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import android.graphics.drawable.BitmapDrawable;
Import Android.util.Log;
Import android.view.KeyEvent;
Import Android.view.View;
Import android.view.animation.AlphaAnimation;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationSet;
Import android.view.animation.RotateAnimation;
Import android.view.animation.ScaleAnimation;
Import android.view.animation.TranslateAnimation;
  public class Tweenanim extends View {//alpha Animation-gradient transparency private Animation alphaanimation = null;
  Sacle Animation-Gradient dimension scaling private Animation scaleanimation = null;
  Translate animation-position mobile private Animation translateanimation = null;
  Rotate animation-screen rotation private Animation rotateanimation = null;
  Public Tweenanim {Super (context);
    } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas);
    LOG.E ("Tween", "OnDraw"); Load a picture CanvAs.drawbitmap ((bitmapdrawable) getresources (). getdrawable (R.drawable.gallery_photo_5)). GetBitmap (), 0, 0, NULL);
    @Override public boolean onKeyDown (int keycode, keyevent event) {LOG.E ("Tween", "OnKeyDown");
  return true;
    @Override public boolean onKeyUp (int keycode, keyevent event) {LOG.E ("Tween", "OnKeyDown");
        Switch (keycode) {case KEYEVENT.KEYCODE_DPAD_UP:LOG.E ("Tween", "onkeydown-keycode_dpad_up");
        Alphaanimation = new Alphaanimation (0.1f, 1.0f);
        Set animation time Alphaanimation.setduration (3000);
        This.startanimation (alphaanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_DOWN:LOG.E ("Tween", "Onkeydown-keycode_dpad_down");
        Rotateanimation = new Rotateanimation (0f, 360f);
        Rotateanimation.setduration (1000);
        This.startanimation (rotateanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_LEFT:LOG.E ("Tween", "Onkeydown-keycode_dpad_left");
Class        Scaleanimation = new Scaleanimation (0.1f, 1.0f,0.1f,1.0f);
        Set animation time scaleanimation.setduration (500);
        This.startanimation (scaleanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_RIGHT:LOG.E ("Tween", "onkeydown-keycode_dpad_right");
        Initialize translateanimation = new Translateanimation (0.1f, 100.0f,0.1f,100.0f);
        Set animation time translateanimation.setduration (1000);
        This.startanimation (translateanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_CENTER:LOG.E ("Tween", "Onkeydown-keycode_dpad_center");
        Initialize Translate animation translateanimation = new Translateanimation (0.1f, 100.0f,0.1f,100.0f);
        Initialize Alpha animation alphaanimation = new Alphaanimation (0.1f, 1.0f);
        The animation set Animationset set = new Animationset (true);
        Set.addanimation (translateanimation);
        Set.addanimation (alphaanimation);
  Set animation time (action to each animation) set.setduration (1000);      This.startanimation (set);
      Break
    Default:break;
  return true;

 }
}

When calling the class in an activity, you need to be aware of setfocusable (true), otherwise the OnKeyUp method will not take effect if the focus is on the activity.

Code to invoke this view:

Tweenanim anim = new Tweenanim (lesson_11.this);
Anim.setfocusable (true);
Setcontentview (ANIM);

The above through Java code, the implementation of the 4 of different tween animation, in fact, Android can be completely through the XML file to achieve animation. This approach may be more concise, clearer, and more beneficial to reuse.
Here are some of the animations that we can use to XML instead.

The first is alphaanimation.

Alpha_anim.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <alpha
    android:fromalpha=" 0.1 "
    android:toalpha=" 1.0 "
    android:duration=" "2000"
  />
</set>

You don't have to explain.

Rotateanimation

Rotate_anim.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <rotate
    android:interpolator=" @android: Anim/accelerate_decelerate_interpolator "
    android:fromdegrees= "0"
    android:todegrees= "360"
    android:pivotx= "
    50%" android:pivoty= "50%" Android:duration= "/>"
</set>

Scaleanimation

Scale_anim.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <scale
    android:interpolator=" @android: Anim/accelerate_decelerate_interpolator "
    android:fromxscale= "0.0"
    android:toxscale= "1.0" android:fromyscale= "0.0"
    android:toyscale= "1.0"
    android:pivotx= "50%"
    android:pivoty= "50%"
    android:fillafter= "false"
    android:duration= "500"
  />
</set>

Translateanimation

Translate_anim.xml:

<?xml version= "1.0" encoding= "Utf-8"?> <set xmlns:android=
"http://schemas.android.com/apk/res/" Android ">
  <translate
    android:fromxdelta=" "Android:toxdelta="
    android: Fromydelta= "Android:toydelta="
  />
</set>

Layout files are already written, so how do you use them?
In fact it is also very simple, at this time need to use the Animationutils class. These layout files are loaded by loadanimation methods in this class.
Such as:

Copy Code code as follows:
Rotateanimation = Animationutils.loadanimation (This.getcontext (), R.anim.rotate_anim);

The code for this view class is as follows:

Package Com.yfz.view;
Import COM.YFZ.R;
Import Android.content.Context;
Import Android.graphics.Canvas;
Import android.graphics.drawable.BitmapDrawable;
Import Android.util.Log;
Import android.view.KeyEvent;
Import Android.view.View;
Import android.view.animation.AlphaAnimation;
Import android.view.animation.Animation;
Import Android.view.animation.AnimationSet;
Import Android.view.animation.AnimationUtils;
Import android.view.animation.RotateAnimation;
Import android.view.animation.ScaleAnimation;
Import android.view.animation.TranslateAnimation;
  public class TweenAnim2 extends View {//alpha Animation-gradient transparency private Animation alphaanimation = null;
  Sacle Animation-Gradient dimension scaling private Animation scaleanimation = null;
  Translate animation-position mobile private Animation translateanimation = null;
  Rotate animation-screen rotation private Animation rotateanimation = null;
  Public TWEENANIM2 {Super (context);
   } @Override protected void OnDraw (Canvas Canvas) {Super.ondraw (Canvas); LOG.E ("Tween", "OnDraw"); Load a picture Canvas.drawbitmap ((bitmapdrawable) getresources (). getdrawable (R.drawable.gallery_photo_5)). GetBitmap ()
  , 0, 0, NULL);
    @Override public boolean onKeyDown (int keycode, keyevent event) {LOG.E ("Tween", "OnKeyDown");
  return true;
    @Override public boolean onKeyUp (int keycode, keyevent event) {LOG.E ("Tween", "OnKeyDown");
        Switch (keycode) {case KEYEVENT.KEYCODE_DPAD_UP:LOG.E ("Tween", "onkeydown-keycode_dpad_up");
        Alphaanimation = Animationutils.loadanimation (This.getcontext (), R.anim.alpha_anim);
        This.startanimation (alphaanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_DOWN:LOG.E ("Tween", "Onkeydown-keycode_dpad_down");
        Rotateanimation = Animationutils.loadanimation (This.getcontext (), R.anim.rotate_anim);
        This.startanimation (rotateanimation);
      Break Case KEYEVENT.KEYCODE_DPAD_LEFT:LOG.E ("Tween", "Onkeydown-keycode_dpad_leFT ");
        Scaleanimation = Animationutils.loadanimation (This.getcontext (), R.anim.scale_anim);
        This.startanimation (scaleanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_RIGHT:LOG.E ("Tween", "onkeydown-keycode_dpad_right");
        Translateanimation = Animationutils.loadanimation (This.getcontext (), R.anim.translate_anim);
        This.startanimation (translateanimation);
      Break
        Case KEYEVENT.KEYCODE_DPAD_CENTER:LOG.E ("Tween", "Onkeydown-keycode_dpad_center");
        Initialize Translate animation translateanimation = Animationutils.loadanimation (This.getcontext (), R.anim.translate_anim);
        Initialize Alpha Animation alphaanimation = Animationutils.loadanimation (This.getcontext (), R.anim.alpha_anim);
        The animation set Animationset set = new Animationset (true);
        Set.addanimation (translateanimation);
        Set.addanimation (alphaanimation);
        Set animation time (action to each animation) set.setduration (1000); This.startanimatiOn (set);
      Break
    Default:break;
  return true;

 }
}

I hope this article will help you with your Android programming.

Related Article

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.