Android动画学习——Tween Animation

浏览数：20 / 时间：2015年06月11日

目录

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;

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢