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 | 动画先退后再加速进行,超过结束位置一些后再回结束位置 |