android 快速查询程序员Android技术知识

Android基础夯实--重温动画（一）之Tween Anima

2017-03-21  本文已影响318人  08dc70a40fb1

心灵鸡汤：真正成功的人生，不在于成就的大小，而在于你是否努力地去实现自我，喊出自己的声音，走出属于自己的道路。

如果大家想看更多关于Android基础夯实系列博文，请移步到我的博客：
Ryane's Blog

摘要

不积跬步，无以至千里；不积小流，无以成江海。学习任何东西我们都离不开扎实的基础知识，这次我们重温Android中让我们又爱又恨的动画。即便没有很好的算法思想，但是掌握了Animation的基础，我们同样可以通过动画给我们的App增色不少。

概述

在我们日常开发中，我们都希望我们的App拥有及其炫酷的动画效果，除了一些SDK提供给我们拥有炫酷动画效果的控件外，都需要我们自己来实现。在Android系统中，官方给我们提供了两种类型的动画：属性动画(Property Animation) 和 视图动画(View Animation)，而视图动画又包含了两种类型：补间动画(Tween animation) 和 帧动画(Frame animation)。

  1. Property Animation(属性动画)：通过改变对象的属性来实现动画效果。

  2. View Animation(视图动画)：包括了以下两种动画类型。

    • Tween Animation(补间动画)：通过对视图进行一系列的动作变化实现动画效果。

    • Frame Animation(帧动画)：通过一组图片有序播放实现动画视觉效果。

Android官方文档 Animation的分类

为此，由于篇幅过长，笔主通过三篇博文来重温Animation的相关基础知识，内容主要作为抛砖引玉，围绕这三种动画作简单的介绍，因为所有的动画都是以这几种动画为基础，配合其他的技术，例如自定义View、还有一些曲线函数等，做出很多炫酷的效果。但是，炫酷动画万万千，我们做的每一个动画需求都是源自设计师的灵感，所以这篇文章就不对动画的高阶讲解，相反，是作为抛砖引玉，所以如果你已经非常熟悉动画相关，可以跳过，但是如果你对动画还是不了解，不妨继续看下去。

当然，更权威的解释请查看官方文档：Animation Resources

本文首先对View Animation的Tween Animation做介绍，如果大家有兴趣，可以继续阅读本动画系列其他相关文章，作者也在不断更新完善相关内容，希望大家可以指出有误之处。

Android基础夯实--重温动画（二）之Frame Animation

Android基础夯实--重温动画（三）之初识Property Animation

Android基础夯实--重温动画（四）之属性动画 ValueAnimator详解

Tween Animation，翻译为补间动画，是View Animation两种中的一种，是Android开发中使用最普遍的动画，当然也是使用率最高的一种动画，因为它能够基本满足我们的动画需要，主要是通过对控件实现透明度(alpha)、尺寸(scale)、位置(translate)、旋转rotate)进行改变，通过集合(set)的方式，实现连续的动画效果。

一、动画资源文件的位置

动画资源文件的位置

二、类型

Tween Animation是View Animation其中之一，Tween Animation可以实现对控件实现以下四种变换:

  1. alpha：透明度渐变动画效果
  2. scale：尺寸变化动画效果
  3. translate：位置移动动画效果
  4. rotate：转移旋转动画效果

三、使用方式

  1. 在XML文件中定义一系列的动画标签，所有便签在set便签里面构成集合
  2. Java文件中代码实现

之所以可以这样，是因为四个便签都有对应的Java类：AlphaAnimation, RotateAnimation, ScaleAnimation, TranslateAnimation。

所在包：android.view.animation.*

都继承于父类：android.view.animation.Animation

四、Animation类

Tween Animation的所有效果都是继承于Animation类，Animation类作为一个抽象类，提供了动画基本属性的实现，需要由具体的子类来具体实现。

直接子类

监听器

mAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
            // 动画执行时
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            // 动画结束时
        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            // 动画循环时
        }
    });

属性及其对应方法(所有子类都拥有)

Java方法：setDetachWallpaper(boolean detachWallpaper)

Java方法：setDuration(long)

Java方法：setFillAfter(boolean)

Java方法：setFillBefore(boolean)

Java方法：setFillEnabled(boolean)

Java方法：setInterpolator(Interpolator)

Java方法：setRepeatCount(int)

Java方法：setRepeatMode(int)

Java方法：setStartOffset(long)

Java方法：setZAdjustment(int)

五、Interpolator

Interpolator，又名插值器，主要是实现动画的速率变化。Interpolator作为一个接口，然后抽象类BaseInterpolator实现Interpolator接口，在BaseInterpolator的子类就是一系列Android提供的插值器。

用法：

  1. 在XML的标签下设置:android:interpolator="@android:anim/accelerate_decelerate_interpolator"
  2. 在JAVA代码中使用：animation.setInterpolator(new AccelerateDecelerateInterpolator());
Interpolator

以下为Andorid所提供的所有插值器：

关于以上所有插值器的Demo：

1-3 4-7 8-10

六、AnimationSet

AnimationSet是动画中非常重要的概念，继承于Animation类，它将很多独立的动画包裹到一个集合内，形成一个共同作用的动画效果。例如，我们会在res/anim/目录下的xml文件里面这样实现一个包含多种效果的动画(透明度、尺寸、位置、旋转)：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:shareInterpolator="false">
    <scale
        android:duration="1500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.4"
        android:toYScale="0.6" />
    <set
        android:duration="1000"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:startOffset="1500">
        <scale
            android:fromXScale="1.4"
            android:fromYScale="0.6"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toXScale="0.0"
            android:toYScale="0.0" />
        <rotate
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="-45" />
    </set>
</set>

效果如下：

AnimationSet

当然，你可以使用Java代码来实现，逻辑和在XML中实现的是一样的，如下：

public class MainActivity extends AppCompatActivity {
    private ActivityMainBinding mainBinding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mainBinding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        //参数为false，不共享Interpolator
        AnimationSet set = new AnimationSet(false);
        set.setFillAfter(true);

        // Scale动画
        ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 1.4f, 1.0f, 0.6f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        scaleAnimation.setInterpolator(new AccelerateDecelerateInterpolator());
        scaleAnimation.setDuration(1500);
        set.addAnimation(scaleAnimation);

        // mSet集合
        AnimationSet mSet = new AnimationSet(true);
        mSet.setInterpolator(new AccelerateInterpolator());
        mSet.setDuration(1000);
        mSet.setStartOffset(1500);

        // Scale动画
        ScaleAnimation mScaleAnimation = new ScaleAnimation(1.4f, 0.0f, 0.6f, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        mSet.addAnimation(mScaleAnimation);
        // Rotate动画
        RotateAnimation mRotateAnimation = new RotateAnimation(0.0f, -45.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        mSet.addAnimation(mRotateAnimation);

        set.addAnimation(mSet);

        mainBinding.image.startAnimation(set);
    }
}

构造函数

主要属性及其方法(父类以外的)

Java方法

七、AlphaAnimation

AlphaAnimation是继承于Animation的一个动画类型，它通过控制控件的透明度变化来实现动画效果，如我们常见的淡入淡出效果就是通过AlphaAnimaiton实现。

不多说，我们来通过例子看一下AlphaAnimation的实现消失动画效果：

AlphaAnimation

还是有两种写法，一种在XML里定义动画的样式，一种在Java代码里实现动画的样式。

在res/anim目录下定义alpha.xml文件，在文件内写：

<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2500"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

在Activity中加载xml文件，并绑定控件播放动画：

AlphaAnimation animation = (AlphaAnimation) AnimationUtils.loadAnimation(getApplicationContext(), R.anim.alpha);
image.startAnimation(animation);

直接在Java代码中实现：

AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(2500);
mBinding.image.startAnimation(animation);

构造函数

主要属性及其对应方法(父类以外的)

XML属性

Java方法

八、ScaleAnimation

ScaleAnimation是继承于Animation的一个动画类型，它通过控制控件的尺寸大小来实现动画效果，如我们常见的放大，缩小效果就是通过ScaleAnimation实现。

同样，先示范：

ScaleAnimation

还是有两种写法，一种在XML里定义动画的样式，一种在Java代码里实现动画的样式。

在res/anim目录下定义scale.xml文件，在文件内写：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale
        android:duration="1500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0" />

    <scale
        android:duration="1500"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1500"
        android:toXScale="0.0"
        android:toYScale="0.0" />
</set>

在Activity中加载xml文件，并绑定控件播放动画：

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.scale);
image.startAnimation(animation);

在Java代码中实现：

AnimationSet set = new AnimationSet(false);
set.setFillAfter(true);

// 构造函数 fromX, toX, fromY, toY, pivotXType, pivotXValue, pivotYType, pivotYValue
// pivotXType和pivotYType都有三种取值：Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, Animation.RELATIVE_TO_PARENT
ScaleAnimation sa1 = new ScaleAnimation(1.0f, 2.0f, 1.0f, 2.0f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
sa1.setDuration(1500);

ScaleAnimation sa2 = new ScaleAnimation(1.0f, 0.0f, 1.0f, 0.0f, Animation.RELATIVE_TO_SELF,0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
sa2.setDuration(1500);
sa2.setStartOffset(1500);

set.addAnimation(sa1);
set.addAnimation(sa2);

mBinding.image.startAnimation(set);

构造函数

主要属性及其方法(父类以外的)

XML属性

Java方法

九、RotateAnimation

RotateAnimation是继承于Animation的一个动画类型，它通过控制控件旋转来实现动画效果，如我们常见的转动效果就是通过RotateAnimation实现。

先看一个小demo：

RotateAnimation

还是有两种写法，一种在XML里定义动画的样式，一种在Java代码里实现动画的样式。

在res/anim目录下定义rotate.xml文件，在文件内写：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <rotate
        android:duration="1500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="2000"
        android:toDegrees="-1800" />
</set>

在Activity中加载xml文件，并绑定控件播放动画：

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.rotate);
image.startAnimation(animation);

在Java代码中实现：

AnimationSet set = new AnimationSet(false);
set.setFillAfter(true);

RotateAnimation ra1 = new RotateAnimation(0f, 360f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
ra1.setDuration(1000);

RotateAnimation ra2 = new RotateAnimation(0f, -1800f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
ra2.setDuration(1500);
ra2.setStartOffset(1000);

set.addAnimation(ra1);
set.addAnimation(ra2);

mBinding.image.startAnimation(set);

构造函数

主要属性及其方法(父类以外的)

XML属性

Java方法

十、TranslateAnimation

TranslateAnimation是继承于Animation的一个动画类型，它通过控制控件位置变化来实现动画效果，如我们常见的位移效果就是通过TranslateAnimation实现。

TranslationAnimation相关的小Demo，围绕四周转动：

TranslateAnimation

只展示一种写法，Java代码实现方式同上：

在res/anim目录下定义translate.xml文件，在文件内写：

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="92%p"
        android:toYDelta="0" />

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="1000"
        android:toXDelta="0"
        android:toYDelta="94%p" />
    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="2000"
        android:toXDelta="-92%p"
        android:toYDelta="0" />

    <translate
        android:duration="1000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:startOffset="3000"
        android:toXDelta="0"
        android:toYDelta="-94%p" />
</set>

在Activity中加载xml文件，并绑定控件播放动画：

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.translate);
mBinding.image.startAnimation(animation);

构造函数

主要属性及其方法(父类以外的)

Java方法

总结

对于很多比较少接触动画的同学，可能都会比较反感，因为觉得动画篇的东西又多又难学，其实不然，就像我们这篇所介绍的Tween Animation，虽然有很多种动画类型，但是几种都是基于父类Animation类，然后在它的基础上进行了稍微扩展，所以当我们认真静下来去看的时候，我们会发现，其实也不过如此。Animation在实际开发中非常常见，尤其本篇所说的最基本的Tween Animation。在Android已经达到了如此成熟的今天，市场上的应用很大一部分依靠炫酷的动画效果来吸引用户，所以掌握动画会帮助你在日后开发中有很大的帮助，不说其他，早点下班是必须的。

上一篇 下一篇

猜你喜欢

热点阅读