android之animator 和animation 的区别
发布网友
发布时间：2022-04-21 08:18
共2个回答
懂视网
时间：2022-04-21 12:40
代码结构目录：
- ShapeLoadingView.java
- LoadingView.java
LoadingView是绘制三个基本图形的类。
ShapeLoadingView初始化图形并操作图形进行动画。
下面上加了注释的代码：
package com.mingle.widget;import android.annotation.TargetApi;import android.content.Context;import android.content.res.TypedArray;import android.os.Build;import android.text.TextUtils;import android.util.AttributeSet;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.view.animation.AccelerateInterpolator;import android.view.animation.DecelerateInterpolator;import android.widget.FrameLayout;import android.widget.ImageView;import android.widget.TextView;import com.mingle.shapeloading.R;import com.nineoldandroids.animation.Animator;import com.nineoldandroids.animation.AnimatorSet;import com.nineoldandroids.animation.ObjectAnimator;/** * Created by zzz40500 on 15/4/6. */public class LoadingView extends FrameLayout { private static final int ANIMATION_DURATION = 500; private static float mDistance = 200; private ShapeLoadingView mShapeLoadingView; private ImageView mIndicationIm; private TextView mLoadTextView; private int mTextAppearance; private String mLoadText; public LoadingView(Context context) { super(context); } public LoadingView(Context context, AttributeSet attrs) { //构造函数 super(context, attrs, 0); init(context, attrs); } private void init(Context context, AttributeSet attrs) { //这里是通过自定义属性来显示字符串 TypedArray typedArray = context .obtainStyledAttributes(attrs, R.styleable.LoadingView); mLoadText = typedArray.getString(R.styleable.LoadingView_loadingText); mTextAppearance = typedArray.getResourceId(R.styleable.LoadingView_loadingTextAppearance, -1); typedArray.recycle(); } public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) { //构造函数 super(context, attrs, defStyleAttr); init(context, attrs); } //这里定义了一个针对LL版本的构造函数，我这可能因为sdk版本这里会报错，如果报错注释掉就行了 @TargetApi(Build.VERSION_CODES.LOLLIPOP) public LoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(context, attrs); } //dp和像素的转换 public int dip2px(float dipValue) { final float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dipValue * scale + 0.5f); } //引入布局 @Override protected void onFinishInflate() { super.onFinishInflate(); View view = LayoutInflater.from(getContext()).inflate(R.layout.load_view, null); mDistance = dip2px(54f); LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.gravity = Gravity.CENTER; mShapeLoadingView = (ShapeLoadingView) view.findViewById(R.id.shapeLoadingView); mIndicationIm = (ImageView) view.findViewById(R.id.indication); mLoadTextView = (TextView) view.findViewById(R.id.promptTV); if (mTextAppearance != -1) { mLoadTextView.setTextAppearance(getContext(), mTextAppearance); } setLoadingText(mLoadText); //显示绘画布局 addView(view, layoutParams); //这里是设计一个延时 每隔900调用一次跌落，相当于900ms是一次动画的周期 this.postDelayed(new Runnable() { @Override public void run() { freeFall(); } }, 900); } public void setLoadingText(CharSequence loadingText) { if (TextUtils.isEmpty(loadingText)) { mLoadTextView.setVisibility(GONE); } else { mLoadTextView.setVisibility(VISIBLE); } mLoadTextView.setText(loadingText); } /** * 上抛，上抛是动画的核心，上抛是两个组合动作：1，图形进行旋转；2，图形向上平移，同时还有下面阴影部分随着图形位置变化 * 进行的跟随变化。这里使用了ObjectAnimator来控制每个动画的动作，最后使用AnimatorSet将三个部分组合在一起。 * 看一下具体的动作 */ public void upThrow() { //mShapeLoadingView就是LoadingView里面绘制的图形买第一个objectAnimator控制它进行平移 //使用objectAnimator.ofFloat及参数translationY来进行纵向的平移 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", mDistance, 0); //动画下部的阴影这里使用ofFloat及参数scaleX来进行X轴的缩放，02f-1是缩放比例 阴影在20%到100%之间变化 ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 0.2f, 1); //这段是对图形做一个旋转的动作 ObjectAnimator objectAnimator1 = null; switch (mShapeLoadingView.getShape()) { case SHAPE_RECT: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, -120); break; case SHAPE_CIRCLE: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180); break; case SHAPE_TRIANGLE: objectAnimator1 = ObjectAnimator.ofFloat(mShapeLoadingView, "rotation", 0, 180); break; } //设置animation的持续时间，通过setDuration. objectAnimator.setDuration(ANIMATION_DURATION); objectAnimator1.setDuration(ANIMATION_DURATION); //设置一个减速插值器 objectAnimator.setInterpolator(new DecelerateInterpolator(factor)); objectAnimator1.setInterpolator(new DecelerateInterpolator(factor)); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(ANIMATION_DURATION); //animatorSet的方法playtogther让三个动画同时运行 animatorSet.playTogether(objectAnimator, objectAnimator1, scaleIndication); animatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { freeFall(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animatorSet.start(); } public float factor = 1.2f; /** * 下落 */ public void freeFall() { //主要的点和上抛一致不讲了 ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(mShapeLoadingView, "translationY", 0, mDistance); ObjectAnimator scaleIndication = ObjectAnimator.ofFloat(mIndicationIm, "scaleX", 1, 0.2f); objectAnimator.setDuration(ANIMATION_DURATION); objectAnimator.setInterpolator(new AccelerateInterpolator(factor)); AnimatorSet animatorSet = new AnimatorSet(); animatorSet.setDuration(ANIMATION_DURATION); animatorSet.playTogether(objectAnimator, scaleIndication); animatorSet.addListener(new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { //下落到底端改变图形 mShapeLoadingView.changeShape(); upThrow(); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }); animatorSet.start(); }} package com.mingle.widget;import android.annotation.TargetApi;import android.content.Context;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Path;import android.os.Build;import android.util.AttributeSet;import android.view.View;import com.mingle.shapeloading.R;/** * Created by zzz40500 on 15/4/4. */public class ShapeLoadingView extends View { private static final float genhao3 = 1.7320508075689f; private static final float mTriangle2Circle =0.25555555f; private Shape mShape = Shape.SHAPE_CIRCLE; /** * 用贝赛尔曲线画圆 */ private float mMagicNumber = 0.55228475f; public ShapeLoadingView(Context context) { super(context); init(); } public ShapeLoadingView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public ShapeLoadingView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); init(); } private void init() { mPaint = new Paint(); mPaint.setColor(getResources().getColor(R.color.triangle)); mPaint.setAntiAlias(true); //看到网上说这个FILL_AND_STROKE有去锯齿的作用 mPaint.setStyle(Paint.Style.FILL_AND_STROKE); setBackgroundColor(getResources().getColor(R.color.view_bg)); } public boolean mIsLoading = false; private Paint mPaint; private float mControlX = 0; private float mControlY = 0; private float mAnimPercent; @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //绘制三个图形的三角形方框圆形的位置，作者在这里标记动画可以优化，估计会有后续修改 if(getVisibility()==GONE){ return; } // FIXME: 15/6/15 动画待优化 switch (mShape) { case SHAPE_TRIANGLE: if (mIsLoading) { mAnimPercent += 0.1611113; // triangle to circle Path path = new Path(); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); if (mAnimPercent >= 1) { mShape = Shape.SHAPE_CIRCLE; mIsLoading = false; mAnimPercent=1; } float controlX = mControlX - relativeXFromView(mAnimPercent* mTriangle2Circle) * genhao3; float controlY = mControlY - relativeYFromView(mAnimPercent* mTriangle2Circle); path.quadTo(relativeXFromView(1) - controlX, controlY, relativeXFromView(0.5f + genhao3 / 4), relativeYFromView(0.75f)); path.quadTo(relativeXFromView(0.5f), relativeYFromView(0.75f + 2 * mAnimPercent* mTriangle2Circle), relativeXFromView(0.5f - genhao3 / 4), relativeYFromView(0.75f)); path.quadTo(controlX, controlY, relativeXFromView(0.5f), relativeYFromView(0f)); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { Path path = new Path(); mPaint.setColor(getResources().getColor(R.color.triangle)); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1), relativeYFromView(genhao3 / 2f)); path.lineTo(relativeXFromView(0), relativeYFromView(genhao3/2f)); mControlX = relativeXFromView(0.5f - genhao3 / 8.0f); mControlY = relativeYFromView(3 / 8.0f); mAnimPercent = 0; path.close(); canvas.drawPath(path, mPaint); } break; case SHAPE_CIRCLE: if (mIsLoading) { float magicNumber = mMagicNumber + mAnimPercent; mAnimPercent += 0.12; if (magicNumber + mAnimPercent >= 1.9f) { mShape = Shape.SHAPE_RECT; mIsLoading = false; } Path path = new Path(); path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(0f), relativeXFromView(1), relativeYFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeYFromView(0.5f)); path.cubicTo( relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2), relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f), relativeXFromView(0.5f), relativeYFromView(1f)); path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2), relativeXFromView(0f), relativeYFromView(0.5f)); path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0), relativeXFromView(0.5f), relativeYFromView(0f)); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { mPaint.setColor(getResources().getColor(R.color.circle)); Path path = new Path(); float magicNumber = mMagicNumber; path.moveTo(relativeXFromView(0.5f), relativeYFromView(0f)); path.cubicTo(relativeXFromView(0.5f + magicNumber / 2), 0, relativeXFromView(1), relativeYFromView(magicNumber / 2), relativeXFromView(1f), relativeYFromView(0.5f)); path.cubicTo( relativeXFromView(1), relativeXFromView(0.5f + magicNumber / 2), relativeXFromView(0.5f + magicNumber / 2), relativeYFromView(1f), relativeXFromView(0.5f), relativeYFromView(1f)); path.cubicTo(relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(1f), relativeXFromView(0), relativeYFromView(0.5f + magicNumber / 2), relativeXFromView(0f), relativeYFromView(0.5f)); path.cubicTo(relativeXFromView(0f), relativeXFromView(0.5f - magicNumber / 2), relativeXFromView(0.5f - magicNumber / 2), relativeYFromView(0), relativeXFromView(0.5f), relativeYFromView(0f)); mAnimPercent = 0; path.close(); canvas.drawPath(path, mPaint); } break; case SHAPE_RECT: if (mIsLoading) { mAnimPercent += 0.15; if (mAnimPercent >= 1) { mShape = Shape.SHAPE_TRIANGLE; mIsLoading = false; mAnimPercent = 1; } Path path = new Path(); path.moveTo(relativeXFromView(0.5f * mAnimPercent), 0); path.lineTo(relativeYFromView(1 - 0.5f * mAnimPercent), 0); float distanceX = (mControlX) * mAnimPercent; float distanceY = (relativeYFromView(1f) - mControlY) * mAnimPercent; path.lineTo(relativeXFromView(1f) - distanceX, relativeYFromView(1f) - distanceY); path.lineTo(relativeXFromView(0f) + distanceX, relativeYFromView(1f) - distanceY); path.close(); canvas.drawPath(path, mPaint); invalidate(); } else { mPaint.setColor(getResources().getColor(R.color.rect)); mControlX = relativeXFromView(0.5f - genhao3 / 4); mControlY = relativeYFromView(0.75f); Path path = new Path(); path.moveTo(relativeXFromView(0f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1f), relativeYFromView(0f)); path.lineTo(relativeXFromView(1f), relativeYFromView(1f)); path.lineTo(relativeXFromView(0f), relativeYFromView(1f)); path.close(); mAnimPercent = 0; canvas.drawPath(path, mPaint); } break; } } private float relativeXFromView(float percent) { return getWidth() * percent; } private float relativeYFromView(float percent) { return getHeight() * percent; } public void changeShape() { mIsLoading = true; invalidate(); public enum Shape { SHAPE_TRIANGLE, SHAPE_RECT, SHAPE_CIRCLE } @Override public void setVisibility(int visibility) { super.setVisibility(visibility); if(visibility==VISIBLE){ invalidate(); } } public Shape getShape() { return mShape; }} 这个开源项目我们学习的两个主要知识
1.使用path绘制图形
2.ObjectAnimation&AnimatorSet
看了这个项目是不是可以用这两个知识点做一个自己喜欢的动画？
just do it.
版权声明：本文为博主原创文章，未经博主允许不得转载。
热心网友
时间：2022-04-21 09:48
Animator框架是Android 4.0中新添加的一个动画框架，和之前的Animation框架相比，Animator可以进行更多和更精细化的动画控制，而且比之前更简单和更高效。在4.0源码中随处都可以看到Animator的使用。
二、 Animation和Animator比较
如下图，是Animation和Animator两个类继承图的对比。
C:Object C:Object
C:Animation C:Animator
C:AlphaAnimation C:AnimatorSet
C:AnimationSet C:ValueAnimator
C:DummyAnimation C:ObjectAnimator
C:Rotate3dAnimation C:TimeAnbimator
C:RotateAniamtion
C:ScaleAnimation
C:TranslateAnimation
Animation框架定义了透明度，旋转，缩放和位移几种常见的动画，而且控制的是一个整个View动画，实现原理是每次绘制视图时View所在的ViewGroup中的drawChild函数获取该View的Animation的Transformation值，然后调用canvas.concat(transformToApply.getMatrix())，通过矩阵运算完成动画帧，如果动画没有完成，继续调用invalidate()函数，启动下次绘制来驱动动画，动画过程中的帧之间间隙时间是绘制函数所消耗的时间，可能会导致动画消耗比较多的CPU资源。
在Animator框架中使用最多的是AnimatorSet和ObjectAnimator配合，使用ObjectAnimator进行更精细化控制，只控制一个对象的一个属性值，多个ObjectAnimator组合到AnimatorSet形成一个动画。而且ObjectAnimator能够自动驱动，可以调用setFrameDelay(longframeDelay)设置动画帧之间的间隙时间，调整帧率，减少动画过程中频繁绘制界面，而在不影响动画效果的前提下减少CPU资源消耗。
三、 关键接口介绍
1. ObjectAnimator介绍
Animator框架封装得比较完美，对外提供的接口非常简单，创建一个ObjectAnimator只需通过如下图所示的静态工厂类直接返回一个ObjectAnimator对象。传的参数包括一个对象和对象的属性名字，但这个属性必须有get和set函数，内部会通过java反射机制来调用set函数修改对象属性值。还包括属性的初始值，最终值，还可以调用setInterpolator设置曲线函数。
2. AnimatorSet介绍
AnimatorSet主要是组合多个AnimatorSet和ObjectAnimator形成一个动画，并可以控制动画的播放顺序，其中还有个辅助类通过调用play函数获得。
3. AnimatorUpdateListner介绍
通过实现AnimatorUpdateListner，来获得属性值发生变化时的事件，在这个回调中发起重绘屏幕事件。
四、 使用实例
在Android4.0中的ApiDemo中有个BouncingBalls实例，描述了Animator框架的使用，当点击屏幕时，绘制一个球从点击位置掉到屏幕底部，碰到底部时球有压扁的效果，然后回弹到点击位置再消失。
代码如下：
ShapeHolder newBall =addBall(event.getX(), event.getY());
// Bouncing animation with squash and stretch
float startY = newBall.getY();
float endY = getHeight() - 50f;
float h = (float)getHeight();
float eventY = event.getY();
int ration = (int)(500 * ((h - eventY)/h));
ValueAnimator bounceAnim = ObjectAnimator.ofFloat(newBall, "y", startY, endY);
bounceAnim.setDuration(ration);
bounceAnim.setInterpolator(new AccelerateInterpolator());
ValueAnimator squashAnim1 = ObjectAnimator.ofFloat(newBall, "x", newBall.getX(),
newBall.getX() - 25f);
squashAnim1.setDuration(ration/4);
squashAnim1.setRepeatCount(1);
squashAnim1.setRepeatMode(ValueAnimator.REVERSE);
squashAnim1.setInterpolator(new DecelerateInterpolator());
ValueAnimator squashAnim2 = ObjectAnimator.ofFloat(newBall, "width", newBall.getWidth(),
newBall.getWidth() + 50);
squashAnim2.setDuration(ration/4);
squashAnim2.setRepeatCount(1);
squashAnim2.setRepeatMode(ValueAnimator.REVERSE);
squashAnim2.setInterpolator(new DecelerateInterpolator());
ValueAnimator stretchAnim1 = ObjectAnimator.ofFloat(newBall, "y", endY,
endY + 25f);
stretchAnim1.setDuration(ration/4);
stretchAnim1.setRepeatCount(1);
stretchAnim1.setInterpolator(new DecelerateInterpolator());
stretchAnim1.setRepeatMode(ValueAnimator.REVERSE);
ValueAnimator stretchAnim2 = ObjectAnimator.ofFloat(newBall, "height",
newBall.getHeight(),newBall.getHeight() - 25);
stretchAnim2.setDuration(ration/4);
stretchAnim2.setRepeatCount(1);
stretchAnim2.setInterpolator(new DecelerateInterpolator());
stretchAnim2.setRepeatMode(ValueAnimator.REVERSE);
ValueAnimator bounceBackAnim = ObjectAnimator.ofFloat(newBall, "y", endY,
startY);
bounceBackAnim.setDuration(ration);
bounceBackAnim.setInterpolator(newDecelerateInterpolator());
// Sequence the down/squash&stretch/upanimations
AnimatorSet bouncer = new AnimatorSet();
bouncer.play(bounceAnim).before(squashAnim1);
bouncer.play(squashAnim1).with(squashAnim2);
bouncer.play(squashAnim1).with(stretchAnim1);
bouncer.play(squashAnim1).with(stretchAnim2);
bouncer.play(bounceBackAnim).after(stretchAnim2);
// Fading animation - remove the ball when theanimation is done
ValueAnimator fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f);
fadeAnim.setDuration(250);
fadeAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animatoranimation) {
balls.remove(((ObjectAnimator)animation).getTarget());
}
});
// Sequence the two animations to play oneafter the other
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(bouncer).before(fadeAnim);
// Start the animation
animatorSet.start();
