1、视图动画Animation (Tween Animation)
通过不断的对view对象做图像变换(渐变、平移、缩放、旋转)而产生动画效果,这种动画只适用于View对象。
1、AlphaAnimation
AlphaAnimation(float fromAlpha, float toAlpha)
其中,1:不透明;0:透明
2、RotateAnimation
RotateAnimation(float fromDegrees, float toDegrees)
---
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
---
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
注意:
- 旋转的中心点,默认是view的左上角;
- pivotX、pivotY,是旋转的中心点的偏移量;
- pivotXType的取值可以是RELATIVE_TO_PARENT、RELATIVE_TO_SELF,代表的是中心点(默认是view的左上角)偏移量大小的取值是相对于自身还是相对于parent,最终都是相对于view的左上角进行偏移。
RotateAnimation(0,360,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f)即旋转中心点从view的左上角,偏移到了右下角(相对于parent50%的地方)
3、TranslateAnimation
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
---
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
4、ScaleAnimation
ScaleAnimation(float fromX, float toX, float fromY, float toY)
---
ScaleAnimation(float fromX, float toX, float fromY, float toY,
float pivotX, float pivotY)
---
ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
相对于某个中心点缩放,和RotateAnimation类似
ScaleAnimation(1,0,1,0,ScaleAnimation.RELATIVE_TO_PARENT,0.2f,ScaleAnimation.RELATIVE_TO_PARENT,0.2f)代码如下:
//透明动画效果
AlphaAnimation alphaAnimation=new AlphaAnimation(0,1);
alphaAnimation.setDuration(1000);
view.startAnimation(alphaAnimation);
---
//旋转动画效果
RotateAnimation rotateAnimation=new RotateAnimation(0,360,RotateAnimation.RELATIVE_TO_PARENT,0.1f,
RotateAnimation.RELATIVE_TO_PARENT,0.1f);
rotateAnimation.setDuration(1000);
v.startAnimation(rotateAnimation);
---
//平移动画效果
TranslateAnimation translateAnimation=new TranslateAnimation(TranslateAnimation.RELATIVE_TO_PARENT,0,
TranslateAnimation.RELATIVE_TO_PARENT,0.2f,
TranslateAnimation.RELATIVE_TO_PARENT,0,
TranslateAnimation.RELATIVE_TO_PARENT,0.2f);
translateAnimation.setDuration(1000);
v.startAnimation(translateAnimation);
---
//缩放动画效果
ScaleAnimation scaleAnimation=new ScaleAnimation(1,0,1,0,ScaleAnimation.RELATIVE_TO_PARENT,0.2f,
ScaleAnimation.RELATIVE_TO_PARENT,0.2f);
scaleAnimation.setDuration(2000);
v.startAnimation(scaleAnimation);
---
v.startAnimation(AnimationUtils.loadAnimation(this,R.anim.rotate));
//透明动画效果
<alpha android:duration="1000"
android:fromAlpha="1"
android:toAlpha="0"/>
---
//旋转动画效果
<rotate android:duration="1000"
android:fromDegrees="0"
android:toDegrees="360"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:pivotX="50%"
android:pivotY="50%"/>
---
//平移动画效果
<translate android:duration="1000"
android:fromXDelta="0"
android:toXDelta="20%p"
android:fromYDelta="0"
android:toYDelta="30%p"/>
注意:
- num%、num%p表示相对于自身或者父控件,跟RELATIVE_TO_PARENT、RELATIVE_TO_SELF效果类似;如果以浮点数字表示,是一个绝对值,代表相对自身原始位置的像素值;
- RepeatMode:
Animation.RESTART,表示动画重新从头开始执行,当一次动画执行结束之后,图片将重新从头开始执行。
Animation.REVERSE,表示动画反方向执行,当一次动画执行结束之后,图片将向反方向运动。 - RepeatCount:动画的重复次数,Animation.INFINITE 无限循环
- fillBefore:动画结束时画面停留在此动画的第一帧
fillAfter:动画结束是画面停留在此动画的最后一帧 - 加载xml文件中的动画
AnimationUtils类调用loadAnimation(context, id)方法来加载xml文件
5、可以通过AnimationSet,将动画以组合的形式展示
AnimationSet animationSet=new AnimationSet(true);
animationSet.setDuration(2000);
ScaleAnimation scaleAnimation=new ScaleAnimation(1,0,1,0,ScaleAnimation.RELATIVE_TO_PARENT,0.2f,
ScaleAnimation.RELATIVE_TO_PARENT,0.2f);
scaleAnimation.setDuration(2000);
animationSet.addAnimation(scaleAnimation);
...
v.startAnimation(animationSet);
AnimationSet
6、自定义动画
实现Animation 接口的applyTransformation()方法,还可以覆盖initialize()方法,做一些初始化的操作
public class ReversalAnimation extends Animation {
private int height;
private int width;
@Override
public void initialize(int width, int height, int parentWidth, int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
setDuration(1000);
setInterpolator(new CycleInterpolator(0.25f));
this.height = height * 2;
this.width = width;
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
Matrix matrix = t.getMatrix();
matrix.preScale(1 - (float) Math.sin((interpolatedTime) * Math.PI), 1, width / 2, 0);
matrix.preTranslate(0, -(float) Math.sin(interpolatedTime * Math.PI) * height);
}
}
其中interpolatedTime的取值为0~1,0标识动画开始执行,1标识动画执行完了
Transformation,可以通过它获得当前矩阵对象matrix,通过matrix将动画效果执行出来
7、插值器
如下
8、监听器
可以设置AnimationListener,获取动画开始、结束、重复事件
translateAnimation.setAnimationListener(new Animation.AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
Toast.makeText(Main2Activity.this,"onAnimationStart",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationEnd(Animation animation) {
Toast.makeText(Main2Activity.this,"onAnimationEnd",Toast.LENGTH_SHORT).show();
}
@Override
public void onAnimationRepeat(Animation animation) {
}
});
9、执行动画
通过view的startAnimation
但是视图动画不具备交互性,在缩放和平移一个View的时候,并没有改变控件内部的属性值,它的有效点击区域,依然保持原来的大小和位置,如图在动画的结束位置点击,是没有效果的,只有在原始位置(矩形区域),点击才有效果
视图动画参考:Android 动画学习 View Animation
2、属性动画Animator
在Android3.0(level 11)引入的,通过动态地改变对象的属性值而达到动画效果,可以为任何的对象添加动画(当然也包括View在内)。
属性动画改变了View的属性,比如对于View的最终位置x=left+translationX,所以在最终位置就可以响应点击事件;
1、ValueAnimator
ValueAnimator本身不提供任何的动画效果,它可以产生有一定规律的数字,可以在AnimatorUpdateListener中监听这些数字的变化,从而完成动画效果
ValueAnimator动画的整个过程ValueAnimator动画的整个过程如下:
(0)、 ofInt(0,400)表示指定动画的数字区间,是从0运动到400;
(1)、 在动画过程中, Animator会根据动画总时间和已进行的时间自动计算出一个时间比例因子,大小介于0和1之间,0表示开始。
时间比例因子 = 当前已进行的时间/动画执行的总时间
(2)、Interpolator(差值器/加速器):Animator会根据时间比例因子,返回当前动画进度所对应的数字进度:这个数字进度是百分制的,以小数表示。
publicinterfaceTimeInterpolator{
floatgetInterpolation(floatinput);
}
但是我们通过监听器拿到的是当前动画所对应的具体数值,而不是百分制的进度。那么就必须有一个地方会根据当前的数字进度,将其转化为对应的数值,这个地方就是Evaluator;
(3)、 Evaluator:Evaluator将从加速器返回的数字进度转成对应的数字值。
publicinterfaceTypeEvaluator<T>{
T evaluate(floatfraction,T startValue,T endValue)
}
(4)、 监听器:通过在AnimatorUpdateListener监听器使用animation.getAnimatedValue()函数拿到Evaluator中返回的数字值,为需要执行动画的对象设置对应属性的属性值。onAnimationUpdate()在动画每播放一帧时都会调用。
动画在的整个过程中,会根据我们当初设置的TimeInterpolator 和TypeEvaluator的计算方式计算出的不同的属性值,从而不断地改变对象属性值的大小,进而产生各式各样的动画效果。
创建ValueAnimator的常用方法如下:
- ValueAnimator ofInt(int... values)
- ValueAnimator ofArgb(int... values)
- ValueAnimator ofFloat(float... values)
- ValueAnimator ofPropertyValuesHolder(PropertyValuesHolder... values)
这些方法都有默认的加速器和Evaluator,不指定则使用默认的;
其中ofInt()的默认Evaluator是IntEvaluator,ofFloat是FloatEvalutor,ofArgb是ArgbEvaluator;
参数的类型是定值
代码如下:
ValueAnimator valueAnimator=ValueAnimator.ofFloat(0,1);
valueAnimator.setTarget(v);
valueAnimator.setDuration(1000);
valueAnimator.start();
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float timeAnim= (float) animation.getAnimatedValue();
if(timeAnim<0.4f){
imageView.setTranslationY(-1000*timeAnim);
}else if(timeAnim>=0.4f && timeAnim<=0.8f){
imageView.setScaleX((float) Math.abs((timeAnim-0.6)/0.2));
}else {
imageView.setTranslationY(-1000*(1-timeAnim));
}
}
});
属性动画4.gif
- ValueAnimator ofObject(TypeEvaluator evaluator, Object... values)
ofInt()只能传入Integer类型的值,而ofFloat()只能传入Float类型的值。如果我们需要操作其它类型的变量,可以使用以上方法
TypeEvaluator
public class PointXYEvaluator implements TypeEvaluator<PointXY> {
@Override
public PointXY evaluate(float fraction, PointXY startValue, PointXY endValue) {
int pointX= (int) (startValue.getPointX()+(endValue.getPointX()-startValue.getPointX())*fraction);
int pointy= (int) (startValue.getPointY()+(endValue.getPointY()-startValue.getPointY())*fraction);
return new PointXY(pointX,pointy);
}
}
自定义参数类型
public class PointXY {
private int pointX;
private int pointY;
public PointXY(int pointX, int pointY) {
this.pointX = pointX;
this.pointY = pointY;
}
public int getPointX() {
return pointX;
}
public void setPointX(int pointX) {
this.pointX = pointX;
}
public int getPointY() {
return pointY;
}
public void setPointY(int pointY) {
this.pointY = pointY;
}
}
使用
ValueAnimator valueAnimator=ValueAnimator.ofObject(new PointXYEvaluator(),
new PointXY(pointXY.getLeft(),pointXY.getTop()),new PointXY(pointXY.getLeft()+200,pointXY.getTop()+200));
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
PointXY pointValue= (PointXY) animation.getAnimatedValue();
pointXY.setTranslationX(pointValue.getPointX());
pointXY.setTranslationY(pointValue.getPointY());
}
});
valueAnimator.start();
ValueAnimator ofObject 定义TypeEvaluator
参考:
自定义控件三部曲之动画篇(六)——ValueAnimator高级进阶(二)
Android动画学习(三)之使用ValueAnimator和ObjectAnimator实现动画实例
2、 ObjectAnimator
ObjectAnimator动画原理在ObjectAnimator中,则是先根据属性值拼装成对应的set函数的名字,比如这里的scaleY的拼装方法就是将属性的第一个字母强制大写后,与set拼接,所以就是setScaleY。然后通过反射找到对应控件的setScaleY(float scaleY)函数,将当前数字值做为setScaleY(float scale)的参数将其传入。
常用的构造函数有:
- ObjectAnimator ofFloat(Object target, String propertyName, float... values)
其中,target指定这个动画要操作的是哪个控件
propertyName指定这个动画要操作这个控件的哪个属性
values是可变长参数,就是指这个属性值是从哪变到哪 - ObjectAnimator ofFloat(Object target, String xPropertyName, String yPropertyName,Path path)
- ObjectAnimator ofObject(Object target, String propertyName, TypeEvaluator evaluator, Object... values)
代码如下:
ObjectAnimator translationAnimator=ObjectAnimator.ofFloat(view,"translationY",0,-400).setDuration(400);
translationAnimator.start();
---
Path translationPath=new Path();
translationPath.moveTo(0,0);
translationPath.lineTo(200, 300);
ObjectAnimator translationAnimator=ObjectAnimator.ofFloat(v,"translationX","translationY",translationPath);
translationAnimator.start();
也可以在xml中进行配置
<objectAnimator android:duration="400"
android:propertyName="translationY"
android:valueFrom="0dp"
android:valueTo="-200dp"
android:valueType="floatType"/>
---
Animator animator= AnimatorInflater.loadAnimator(Main2Activity.this,R.animator.object_animator);
animator.setTarget(v);
animator.start();
1、View属性动画默认的属性值:translationX、translationY、x 、 y(view对象在它容器中的最终位置)、rotation、rotationX、rotationY、scaleX、scaleY、pivotX、pivotY(旋转和缩放都是以此为中心展开的,缺省值是 View 对象的中心点)、alpha...
2、如果在调用 ObjectAnimator 的某个工厂方法时,我们只为 values... 参数指定了一个值,那此值将被认定为动画属性的结束值。 这样的话,动画显示的属性必须带有一个 getter 方法,用于获取动画的起始值。
3、还可以自定义属性值,但要在操作的控件中,实现对应的属性的set方法
- ObjectAnimator ofObject(T target, @NonNull Property<T, V> property, @Nullable TypeConverter<PointF, V> converter, Path path)
- <T> ObjectAnimator ofFloat(T target, Property<T, Float> xProperty, Property<T, Float> yProperty, Path path)
-
<T, V> ObjectAnimator ofObject(T target, @NonNull Property<T, V> property, @Nullable TypeConverter<PointF, V> converter, Path path)
其中Property<T, V>是一个属性包装器,如下
Property<View, Float> TRANSLATION_X
自定义Property,代码如下:
public class ImgMoveView extends View {
private static final String PROPERTY_NAME="position";
public ImgMoveView(Context context) {
super(context);
}
public ImgMoveView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setPosition(PointF position){
int x = Math.round(position.x);
int y = Math.round(position.y);
setTranslationX(x);
setTranslationY(y);
}
public PointF getPosition(){
return new PointF(getX(),getY());
}
/**
* A Property wrapper around the position functionality handled by the
* ImgMoveView#setPosition(PointF) and ImgMoveView#getPosition() methods.
*/
public static final Property<ImgMoveView, PointF> POSITION = new Property<ImgMoveView, PointF>(PointF.class,PROPERTY_NAME) {
@Override
public PointF get(ImgMoveView object) {
return object.getPosition();
}
@Override
public void set(ImgMoveView object, PointF value) {
object.setPosition(value);
}
};
}
调用:
/*ObjectAnimator pathMoveAnim=ObjectAnimator.ofFloat(imgMove, "translationX", "translationY", path);*/
//ObjectAnimator pathMoveAnim=ObjectAnimator.ofFloat(imgMove, View.TRANSLATION_X, View.TRANSLATION_Y, path);
ObjectAnimator pathMoveAnim=ObjectAnimator.ofObject(imgMove, ImgMoveView.POSITION,
null, path);
使用Property
参考:自定义控件三部曲之动画篇(七)——ObjectAnimator基本使用、自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe
3、监听器
属性动画提供了AnimatorListener(监听Start、End、Cancel、Repeat事件)、AnimatorUpdateListener (onAnimationUpdate())两个监听器用于动画在播放过程中的重要动画事件
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
}
});
4、AnimatorSet
如果一个动画用到了一个对象的多个属性,可以使用AnimatorSet;
可以通过playTogether()、playSequentially()、play().with()、after()、before()来控制执行的顺序
- AnimatorSet
- playTogether:同时开始执行
- playSequentially:依次按先后顺序执行,前一个动画执行完,再执行后一个动画
- AnimatorSet.Builder
- play():调用AnimatorSet中的play方法,获取AnimatorSet.Builder对象,
- with():和前面动画同时开始执行
- after(A):A先执行,然后执行前面的动画
- before(A):前面的动画先执行,A后执行
代码如下:
AnimatorSet animatorSet=new AnimatorSet();
animatorSet.setDuration(1000);
Path translationPath=new Path();
translationPath.moveTo(0,0);
translationPath.lineTo(200, 300);
Path scalePath=new Path();
scalePath.moveTo(1,1);
scalePath.lineTo(0.5f,0.5f);
scalePath.lineTo(1f,1f);
ObjectAnimator translationAnimator=ObjectAnimator.ofFloat(v,"translationX","translationY",translationPath);
ObjectAnimator rotationAnimator=ObjectAnimator.ofFloat(v,"rotation",0,360);
ObjectAnimator scaleAnimator=ObjectAnimator.ofFloat(v,"scaleX","scaleY",scalePath);
//animatorSet.playTogether(translationAnimator,rotationAnimator);//同时
//animatorSet.playSequentially(translationAnimator,rotationAnimator);//相继的
animatorSet.play(rotationAnimator).after(translationAnimator).before(scaleAnimator);
animatorSet.start();
---
AnimatorSet animatorSet=new AnimatorSet();
animatorSet.setDuration(1000);
ObjectAnimator translationAnimator=ObjectAnimator.ofFloat(v,"translationY",0,-400).setDuration(400);
ObjectAnimator translationAnimator2=ObjectAnimator.ofFloat(v,"translationY",-400,0).setDuration(400);
ObjectAnimator scaleAnimator=ObjectAnimator.ofFloat(v,"scaleX",1,0.1f,1).setDuration(200);
animatorSet.playSequentially(translationAnimator,scaleAnimator,translationAnimator2);//相继的
animatorSet.start();
属性动画2.gif
属性动画3.gif
或者使用XML定义
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:ordering="sequentially">
<objectAnimator android:duration="400"
android:propertyName="translationY"
android:valueFrom="0dp"
android:valueTo="-200dp"
android:valueType="floatType"/>
<objectAnimator android:duration="100"
android:propertyName="scaleX"
android:valueFrom="1.0"
android:valueTo="0.1"
android:valueType="floatType"/>
...
</set>
当然,对于同一个对象的多个属性,同时作用动画效果,也可以使用PropertyValuesHolder,代码如下:
PropertyValuesHolder translationHolder=PropertyValuesHolder.ofFloat("translationY",-200);
PropertyValuesHolder rotationHolder=PropertyValuesHolder.ofFloat("rotation",360);
ObjectAnimator objectAnimator=ObjectAnimator.ofPropertyValuesHolder(v, translationHolder, rotationHolder);
objectAnimator.setDuration(1000).start();
objectAnimator.setInterpolator(new BounceInterpolator());
但是,它不能像AnimatorSet 一样,控制动画执行的顺序
PropertyValueHolder5、插值器
插值器定义了动画变化过程中的变化规则,需要实现Interpolator接口
publicinterfaceTimeInterpolator{
floatgetInterpolation(floatinput);
}
其中
- input参数:只与时间有关,取值范围是0到1,表示当前动画的进度,取0时表示动画刚开始,取1时表示动画结束
- 返回值:动画的当前 数值进度。取值可以超过1也可以小于0,超过1表示已经超过目标值,小于0表示小于开始位置。但这个数值是百分比的,不是具体数值,在监听器返回之前,还需要Evaluator进行转换
Android系统本身内置了一些通用的Interpolator(插值器),如下:
@android:anim/accelerate_interpolator: 越来越快
@android:anim/decelerate_interpolator:越来越慢
@android:anim/accelerate_decelerate_interpolator:先快后慢
@android:anim/anticipate_interpolator: 先后退一小步然后向前加速
@android:anim/overshoot_interpolator:快速到达终点超出一小步然后回到终点
@android:anim/anticipate_overshoot_interpolator:到达终点超出一小步然后回到终点
@android:anim/bounce_interpolator:到达终点产生弹球效果,弹几下回到终点
@android:anim/linear_interpolator:均匀速度。
<!--@anim/cycle_2 -->
<!--定义cycleInterpolator -->
<?xml version="1.0" encoding="utf-8"?>
<cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="2"/>
<!--@anim/shake_error -->
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0%"
android:toXDelta="2%"
android:duration="300"
android:interpolator="@anim/cycle_2"/>
//加载动画
Login.startAnimation(AnimationUtils.loadAnimation(LoginActivity.this,R.anim.shake_error));
默认的插值器
参考:
android动画 Interpolator、自定义控件三部曲之动画篇——插值器
6、Evaluator
根据插值器返回的数字进度转成具体数值;在AnimatorUpdateListener的animation.getAnimatedValue()函数拿到的就是Evaluator中返回的数值;系统本身内置了一些Evalutor,如IntEvaluator、FloatEvaluator、ArgbEvalutor
自定义Evaluator,需要实现TypeEvaluator<T>,要注意动画数值类型
publicinterfaceTypeEvaluator<T>{
T evaluate(floatfraction,T startValue,T endValue)
}
- fraction:加速器中的返回值,表示当前动画的数值进度
- startValue和endValue分别对应ofInt(int start,int end)中的start和end的数值;
参考:自定义控件三部曲之动画篇——Evaluator、Android 动画学习(二)之Property Animation初步介绍
7、Keyframe关键帧
KeyframeSet是关键帧的集合,Keyframe是一个动画保存time/value(时间与值)对
ofInt就是记录了target,propName,values(是将我们传入的int型values,辗转转化成了PropertyValuesHolder),以及一个mValueMap,这个map的key是propName,value是PropertyValuesHolder,在PropertyValuesHolder内部又存储了proprName, valueType , keyframeSet等等
自定义控件三部曲之动画篇(八)——PropertyValuesHolder与Keyframe、Android 属性动画 源码解析 深入了解其内部实现、Android Property Animation(属性动画)原理分析
8、View的animate()方法
可以使用View的animate()方法直接驱动属性动画
view.animate().y(100).scaleX(0.1f).setDuration(1000).withStartAction(new Runnable() {
@Override
public void run() {
}
}).withEndAction(new Runnable() {
@Override
public void run() {
}
}).start();
</br>
网友评论