of Tween Animation Details of gradients scaling displacement and rotation

An example of Android animation gradient animation (Tween Animation) is presented. To share for your reference, the details are as follows:

The Android platform offers two types of animation. The first type is Tween animation, which is to create animation effects (rotation, translation, zoom and gradient) by constantly changing images of objects in the scene.

The second type is Frame animation, which plays the pre-made images in order, similar to the principle of gif images.

Let's move on to Tweene Animations.

Main categories:

Animation animation
AlphaAnimation gradient transparency
The RotateAnimation screen rotates
ScaleAnimation gradient size scaling
TranslateAnimation position moved
AnimationSet animation set

So how do we animate with these classes?

Take the custom View as an example. The View is simple, with only 1 image on the screen. Now we are going to implement various Tween animations for the entire View.

AlphaAnimation

AlphaAnimation is implemented through code as follows:

// Initialize the 
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, indicates the transparency at the beginning of the animation, and the second parameter, toAlpha, indicates 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 RotateAnimation class, fromDegrees, represents the Angle at the beginning of the animation, and the second parameter, toDegrees, represents the Angle at the end of the animation.

In addition, you can set the expansion mode pivotXType and pivotYType, and the starting position of the expansion animation is pivotXValue and pivotYValue, relative to x and y coordinates.

ScaleAnimation

Code:

// Initialize the 
Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
// Set animation time 
scaleAnimation.setDuration(500);
this.startAnimation(scaleAnimation);

ScaleAnimation class

The first parameter, fromX, and the second parameter, toX, are the scaling dimensions on the X coordinates at the beginning and end of the animation respectively.
The third parameter fromY, the fourth parameter toY: is the expansion size on the Y coordinates at the beginning and end of the animation, respectively.

In addition, you can also set the expansion mode pivotXType, pivotYType, and the starting position of the expansion animation relative to x and y coordinates.

TranslateAnimation

Code:

// Initialize the 
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 parameter, fromXDelta, and the second parameter, toXDelta: are the X coordinates at the beginning and end of the animation, respectively.
The third parameter, fromYDelta, and the fourth parameter, toYDelta: the Y coordinates at the beginning and end of the animation, respectively.

Parameter details:

表2
XML节点		功能说明
alpha		渐变透明度动画效果
<alpha android:fromAlpha=”0.1″ android:toAlpha=”1.0″ android:duration=”3000″ />
fromAlpha	属性为动画起始时透明度	0.0表示完全透明 1.0表示完全不透明 以上值取0.0-1.0之间的float数据类型的数字
toAlpha	属性为动画结束时透明度

表3
scale		渐变尺寸伸缩动画效果
<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]	为动画起始时，X、Y坐标上的伸缩尺寸		0.0表示收缩到没有 1.0表示正常无伸缩 值小于1.0表示收缩 值大于1.0表示放大
toXScale [float] toYScale[float]	为动画结束时，X、Y坐标上的伸缩尺寸
pivotX[float] pivotY[float]	为动画相对于物件的X、Y坐标的开始位置		属性值说明：从0%-100%中取值，50%为物件的X或Y方向坐标上的中点位置

表4
translate		画面转换位置移动动画效果
<translate android:fromXDelta=”30″ android:toXDelta=”-80″ android:fromYDelta=”30″ android:toYDelta=”300″ android:duration=”2000″ />
fromXDelta toXDelta	为动画、结束起始时 X坐标上的位置
fromYDelta toYDelta	为动画、结束起始时 Y坐标上的位置

表5
rotate			画面转移旋转动画效果
<rotate android:interpolator=”@android:anim/accelerate_decelerate_interpolator” android:fromDegrees=”0″ android:toDegrees=”+350″ android:pivotX=”50%” android:pivotY=”50%” android:duration=”3000″ />
fromDegrees	为动画起始时物件的角度	说明 当角度为负数――表示逆时针旋转 当角度为正数――表示顺时针旋转 (负数from――to正数:顺时针旋转) (负数from――to负数:逆时针旋转) (正数from――to正数:顺时针旋转) (正数from――to负数:逆时针旋转)
toDegrees	属性为动画结束时物件旋转的角度 可以大于360度
pivotX pivotY	为动画相对于物件的X、Y坐标的开始位	说明：以上两个属性值 从0%-100%中取值 50%为物件的X或Y方向坐标上的中点位置

These are all single animations, so how do you make multiple animations work at the same time?

The answer is AnimationSet.

At first glance, the whole class name, thought it was only used to store Animation 1 Set, a closer look found that the class is also inherited from Animation.

Below we realize 1 animation, the animation will let the image move while the image transparency gradient, see the code directly.

// Initialize the  Translate animation 
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
// Initialize the  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  ( Apply to each animation )
set.setDuration(1000);
this.startAnimation(set);

Isn't that easy?

Attach the code for the entire View class.

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 scale 
  private Animation scaleAnimation = null;
  //Translate animation  -  position 
  private Animation translateAnimation = null;
  //Rotate animation  -  Screen rotation 
  private Animation rotateAnimation = null;
  public TweenAnim(Context context) {
    super(context);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.e("Tween", "onDraw");
    // loading 1 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");
        // Initialize the 
        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 the 
        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 the  Translate animation 
        translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
        // Initialize the  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  ( Apply to each animation )
        set.setDuration(1000);
        this.startAnimation(set);
        break;
      default:
        break;
    }
    return true;
  }
}

When calling this class in Activity, you need to pay attention to 1-specified setFocusable(true), otherwise the onKeyUp method will not take effect if the focus is on Activity.

The code to call this View:

TweenAnim anim = new TweenAnim(Lesson_11.this);
anim.setFocusable(true);
setContentView(anim);

Above through Java code, four different Tween animation, in fact in Android can be completely through the XML file to achieve animation. This approach may be cleaner, clearer, and more reusable.
Let's use xml for each of these animations.

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="500"
  />
</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:

Animation rotateAnimation = new RotateAnimation(0f, 360f);
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);

0

The layout files are all written, so how do you use them?
It's actually quite simple, and you need to use the AnimationUtils class. These layout files are loaded by the loadAnimation method in this class.
Such as:

rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);

The code for the View class this time is as follows:

Animation rotateAnimation = new RotateAnimation(0f, 360f);
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);

1

I hope this article has been helpful for Android programming.