Android UI之动画

Animation,动画。是androidUI上的一个重要组成部分。在android上有4种动画效果,分别是scale,alpha,rotate,translate。对应中文名称:

scale 放缩动画
alpha 透明度动画
rotate 旋转动画
translate 位移动画

说到动画,最开始接触的也是最简单的相信很多人都是从xml开始的(本人在开始学习android动画就是这样的~)。嗯本文也是从这样的一个方向介绍。

首先是xml的存放位置:项目目录下的 res/anim/。看一个例子:

首先动画类型就是前面说过的4种类型了,属性就是本身动画携带的属性。如上面的这个位移动画,这5个属性:

  • android:fromXDelta :动画开始的X坐标
  • android:fromYDelta :动画开始的Y坐标
  • android:toXDelta :动画结束的X坐标
  • android:toYDelta :动画结束的Y坐标
  • android:duration : 动画从开始到结束执行的时间

此外还有一些所有动画都具有的共有属性

  • android:repeatCount :动画重复次数
  • android:fillAfter : 动画结束后是否保持最后状态
  • android:fillBefore : 动画结束后是否恢复到初始状态
  • android:repeatMode : 动画重复模式,共有两个值:restart(重新开始),reverse(倒序回放)
  • android:duration : 动画从开始到结束执行的时间

scale放缩动画的属性:

  • android:fromXScale: 动画开始X轴方向的放缩比例
  • android:fromYScale:动画开始Y轴方向的放缩比例
  • android:toXScale : 动画结束X轴方向的放缩比例
  • android:toYScale : 动画结束Y轴方向的放缩比例
  • android:pivotX : 动画开始的X坐标
  • android:pivotY: 动画开始的Y坐标

关于缩放比例是以1.0为标准的,0.5为缩小原来的0.5倍;2.0则为放大原来的1倍;pivotX,pivotY 是开始缩放的X,Y坐标,也是整个动画过程的中心点。共有3种数值类型:具体数值,百分比值以及百分比值加p,如50%p,p就是父布局的意思。X,Y坐标原点是在自身控件的左上角。

  • 具体数值:原点坐标加上X,Y方向的具体数值得出的坐标点
  • 百分比值:原点坐标加上自身控件X,Y方向的百分比数值得出的坐标点
  • 百分比值+p:原点坐标加上父布局X,Y方向的的百分比数值得出的坐标点

alpha透明度动画的属性:

  • android:fromAlpha:动画开始的透明度
  • android:toAlpha: 动画结束的透明度

关于透明度,取值为0.0~1.0,0.0为全部透明,1.0为完全不透明。

rotate旋转动画的属性

  • android:fromDegrees: 动画开始的角度
  • android:toDegrees: 动画结束的角度
  • android:pivotX:动画开始的X坐标
  • android:pivotY :动画开始的Y坐标

关于旋转角度,正值表示是顺时针方向,负值表示逆时针方向。pivotX,pivotY跟scale动画里的是一样的,不再重复。

此外,实现一个复杂的动画往往是由多种动画组合的效果。这里需要用到set,来将多种动画效果组合起来:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000">
  
    <alpha
        android:fromAlpha="0.5"
        android:toAlpha="1.0" />
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="0"
        android:toYDelta="180" />
    <rotate
        android:fromDegrees="360"
        android:toDegrees="540" />

</set>

使用自己写的xml动画:

Animation animation = AnimationUtils.loadAnimation(this, R.anim.my_scale);
tvAnimator.startAnimation(animation); //tvAnimator是控件

 以上就是使用xml来定义动画了,此外还可以使用代码来实现跟xml一样效果的动画,这两者是一样的。可以说xml的动画类型都可以用一个类来表示:

xml class
scale ScaleAnimation
alpha AlphaAnimation 
rotate RotateAnimation 
translate TranslateAnimation 
set AnimationSet

ScaleAnimation有多个重载方法,直接看最完整参数的那个构造方法:

public ScaleAnimation(float fromX, float toX, float fromY, float toY,
            int pivotXType, float pivotXValue, int pivotYType, float pivotYValue) {
        mResources = null;
        mFromX = fromX;
        mToX = toX;
        mFromY = fromY;
        mToY = toY;

        mPivotXValue = pivotXValue;
        mPivotXType = pivotXType;
        mPivotYValue = pivotYValue;
        mPivotYType = pivotYType;
        initializePivotPoint();
    }

可以看到这个方法参数共有8个参数,分别对应了前文里xml时提到的属性。参数pivotXType,pivotYType则是pivotX,pivotY类型的描述。前面不是说过了类型共有三种,分别是具体数值,百分比,百分比+p,不是很清楚意思的可以回到前面看下,它们对应的类型是 

具体数值 Animation.ABSOLUTE
纯百分比 Animation.RELATIVE_TO_SELF
百分比+p

Animation.RELATIVE_TO_PARENT

 举个例子,xml的动画是这样的:

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="3.0"
    android:toYScale="3.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="2000"
    android:fillAfter="true"
    android:repeatCount="5"
    android:repeatMode="reverse"
    android:interpolator="@android:anim/bounce_interpolator">
</scale>

那么代码生成为:

ScaleAnimation s = new ScaleAnimation(1.0f, 3.0f, 3.0f, 3.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
s.setDuration(2000);
s.setRepeatCount(5);
s.setRepeatMode(Animation.REVERSE);
s.setFillAfter(true);
s.setInterpolator(new BounceInterpolator());//插值器
//调用,开始动画
tvAnimator.startAnimation(s);

除了scale动画外,其他的动画都是一样的,动画本身的属性直接在构造方法中设置,其他属性通过对象调用来设置。AnimationSet它的构造方法跟其他动画的构造方法不一样,只要一个为boolean类型的参数:

public AnimationSet(boolean shareInterpolator) {
        setFlag(PROPERTY_SHARE_INTERPOLATOR_MASK, shareInterpolator);
        init();
    }

这个参数的意思是如果这个动画集内的所有动画都使用这个动画集的插值器,就传递 true;如果每个动画都有自己的插值器就传递false。最后是关于插值器的:

xml class 动画描述
@android:anim/linear_interpolator LinearInterpolator 动画匀速进行
@android:anim/accelerate_interpolator AccelerateInterpolator 动画加速进行
@android:anim/decelerate_interpolator DecelerateInterpolator 动画减速进行
@android:anim/accelerate_decelerate_interpolator AccelerateDecelerateInterpolator 动画先加速再减速进行
@android:anim/cycle_interpolator CycleInterpolator 动画呈周期性进行
@android:anim/bounce_interpolator BounceInterpolator 动画结束时有个类似弹球的动画
@android:anim/anticipate_interpolator AnticipateInterpolator 动画先退后一点,再加速进行
@android:anim/overshoot_interpolator OvershootInterpolator 动画加速进行,超出结束位置一些后,再回到结束位置
@android:anim/anticipate_overshoot_interpolator AnticipateOvershootInterpolator 动画先退后再加速进行,超过结束位置一些后再回结束位置
发布了46 篇原创文章 · 获赞 15 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/FooTyzZ/article/details/92066476