当前位置: 代码迷 >> Android >> Android动画片学习——Tween Animation
  详细解决方案

Android动画片学习——Tween Animation

热度:164   发布时间:2016-04-28 00:45:53.0
Android动画学习——Tween Animation

目录

  • 目录
  • Android动画学习
  • Tween Animation
    • scale动画调节尺寸
    • alpha动画调节透明度
    • rotate动画旋转
    • translate动画平移


Android动画学习

android中动画分为3种:

  1. Tween Animation:通过对场景里的对象不断做图像变换(平移、缩放、旋转)产生的动画效果,即是一种渐变动画。
  2. Frame Animation:顺序播放事先做好的图像,是一种画面转换动画。
  3. Property Animation:属性动画,通过动态地改变对象的属性从而达到动画效果,属性动画为API 11新特性。

这篇博客主要来分析Tween Animation的基本使用。


Tween Animation

Tween Animation有四种形式:

  1. alpha : 渐变透明动画效果。
  2. scale : 渐变尺寸伸缩动画效果。
  3. translate : 画面位置移动动画效果。
  4. rotate : 画面旋转动画效果。

这四种动画实现方式都是通过Animation类和AnimationUtils配合实现的。动画效果可以预先配置在res/anim目录下的xml文件中。


scale动画–调节尺寸

scale的参数如下:

  • android:fromXScale:起始的X方向上相对自身的缩放比例,浮点值。例如1.0代表无变化,0.5代表起始时虽小一倍,2.0代表放大一倍。
  • android:toXScale:结束时X方向上相对自身的缩放比例。
  • android:fromYScale:起始时Y方向上相对自身的缩放比例。
  • android:toYScale:结束时Y方向上相对自身的缩放比例。
  • android:pivotX:缩放起点X轴坐标,可以是数值、百分比、百分数三种形式。(注意:起点指的是当前View左上角的坐标)
  • android:pivotY:缩放起点Y轴坐标。

此外,Animation类是所有动画(scale、alpha、translate、rotate)的基类,从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。

光说不练习是不行的,这里给出一个anim的xml文件、一个layout布局文件和一个Activity类,来练习一下scale animation的使用。

res/anim/anim_scale.xml文件如下:

<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="700"    android:fromXScale="0.0"    android:fromYScale="0.0"    android:pivotX="150"    android:pivotY="300"    android:toXScale="1.4"    android:toYScale="1.4"     android:fillAfter="true"    android:repeatCount="10"    android:repeatMode="reverse"></scale>

res/layout/tween_animation_layout.xml文件如下:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <Button            android:id="@+id/alpha_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/alpha" />        <Button            android:id="@+id/scale_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/scale" />        <Button            android:id="@+id/rotate_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/rotate" />        <Button            android:id="@+id/trans_button"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_weight="1"            android:text="@string/trans" />    </LinearLayout>    <ImageView        android:id="@+id/anim_image"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:contentDescription="@null"        android:src="@drawable/splash_logo" /></LinearLayout>

动画演示实现类实现如下:

import com.example.photocrop.R;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.Button;import android.widget.ImageView;public class TweenAnimationTest extends Activity implements OnClickListener {    private Button alphaButton;    private Button scaleButton;    private Button rotateButton;    private Button transButton;    private ImageView animImageView;    @Override    protected void onCreate(Bundle savedInstanceState) {    // TODO Auto-generated method stub    super.onCreate(savedInstanceState);    setContentView(R.layout.tween_animation_layout);    initView();    }    private void initView() {    animImageView = (ImageView) findViewById(R.id.anim_image);    alphaButton = (Button) findViewById(R.id.alpha_button);    scaleButton = (Button) findViewById(R.id.scale_button);    rotateButton = (Button) findViewById(R.id.rotate_button);    transButton = (Button) findViewById(R.id.trans_button);    alphaButton.setOnClickListener(this);    scaleButton.setOnClickListener(this);    rotateButton.setOnClickListener(this);    transButton.setOnClickListener(this);    }    @Override    public void onClick(View v) {        switch (v.getId()) {    case R.id.alpha_button:        break;    case R.id.scale_button:        Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_scale);        animImageView.startAnimation(animation);        break;    case R.id.rotate_button:        break;    case R.id.trans_button:        break;        }    }}

alpha动画–调节透明度

alpha的参数如下:

  • android:fromAlpha:动画开始的透明度,从0.0~1.0,0.0表示完全透明,1.0表示完全不透明。
  • android:toAlpha:动画结束的透明度,也是从0.0~1.0。

从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。

我们以上一个TweenAnimationTest类为模板,当点击alpha button的时候,我们触发透明度动画效果。

res/anim/anim_alpha.xml文件如下:

<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="500"    android:fillBefore="true"    android:fromAlpha="0.0"    android:toAlpha="1.0" ></alpha>

响应点击alpha button的listener事件为:

case R.id.alpha_button:    Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);    animImageView.startAnimation(alphaAnimation);    break;

rotate动画–旋转

rotate参数如下:

  • android:fromDegrees:开始旋转的角度位置,正数值代表顺时针的角度,负数值代表逆时针旋转的角度。
  • android:toDegrees:结束时旋转到的角度位置,正数值代表顺时针的角度,负数值代表逆时针旋转的角度。
  • android:pivotX:旋转起点的X轴坐标。
  • android:pivotY:旋转起点的Y轴坐标。

从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。

res/anim/anim_rotate.xml文件如下:

<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="1000"    android:fillAfter="true"    android:fromDegrees="0"    android:pivotX="0"    android:pivotY="0"    android:repeatCount="3"    android:toDegrees="810" ></rotate>

响应点击alpha button的listener事件为:

case R.id.rotate_button:    Animation rotateAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_rotate);    animImageView.startAnimation(rotateAnimation);    break;

translate动画–平移

translate参数:

  • android:fromXDelta:起始X轴坐标。
  • android:fromYDelta:起始Y轴坐标。
  • android:toXDelta:结束X轴坐标。
  • android:toYDelta:结束Y轴坐标。

从Animation类继承的属性:

  • android:duration:动画持续时间,以毫秒为单位。
  • android:fillAfter:如果设置为true,控件动画结束时,将保持动画最后时的状态。
  • android:fillBefore:如果设置为true,控件动画结束后,还原到开机动画前的状态。
  • android:fillEnabled:与android:fillBefore的效果相同,都是在动画结束时将控件还原到初始状态。
  • android:repeatCount:重复次数
  • android:repeatMode:重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍。

注意:京东splash页面的进度条用的就是translate动画。

res/anim/anim_rotate.xml文件如下:

<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android"    android:duration="2000"    android:fillAfter="true"    android:fromXDelta="0.0"    android:toXDelta="60%p" ></translate>

响应点击alpha button的listener事件为:

case R.id.trans_button:    Animation transAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);    animImageView.startAnimation(transAnimation);    break;
  相关解决方案