属性动画使用详解2（Evaluator与Interpolator）

来源：互联网发布：js清除域名所有cookie 编辑：程序博客网时间：2024/06/05 05:34

Evaluator自定义

先看效果图：

详细代码：

定义一个对象Point.java，对象中只有x，y两个属性以及get，set方法~

/** * Created by Jay on 2015/11/18 0018. */public class Point {    private float x;    private float y;    public Point() {    }    public Point(float x, float y) {        this.x = x;        this.y = y;    }    public float getX() {        return x;    }    public float getY() {        return y;    }    public void setX(float x) {        this.x = x;    }    public void setY(float y) {        this.y = y;    }}

接着自定义Evaluator类：PointEvaluator.java，实现接口重写evaluate方法~

/** * Created by Jay on 2015/11/18 0018. */public class PointEvaluator implements TypeEvaluator<Point>{    @Override    public Point evaluate(float fraction, Point startValue, Point endValue) {        float x = startValue.getX() + fraction * (endValue.getX() - startValue.getX());        float y = startValue.getY() + fraction * (endValue.getY() - startValue.getY());        Point point = new Point(x, y);        return point;    }}

然后自定义一个View类：AnimView.java，很简单~

/** * Created by Jay on 2015/11/18 0018. */public class AnimView extends View {    public static final float RADIUS = 80.0f;    private Point currentPoint;    private Paint mPaint;    public AnimView(Context context) {        this(context, null);    }    public AnimView(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public AnimView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private void init() {        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setColor(Color.BLUE);    }    private void drawCircle(Canvas canvas){        float x = currentPoint.getX();        float y = currentPoint.getY();        canvas.drawCircle(x, y, RADIUS, mPaint);    }    private void startAnimation() {        Point startPoint = new Point(RADIUS, RADIUS);        Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);        ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                currentPoint = (Point) animation.getAnimatedValue();                invalidate();            }        });        anim.setDuration(3000l);        anim.start();    }    @Override    protected void onDraw(Canvas canvas) {        if (currentPoint == null) {            currentPoint = new Point(RADIUS, RADIUS);            drawCircle(canvas);            startAnimation();        } else {            drawCircle(canvas);        }    }}

最后MainActivity.java处实例化这个View即可~

public class MainActivity extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(new AnimView(this));    }}

再nb一点的效果：

详细代码：

ColorEvaluator.java：

/** * Created by Jay on 2015/11/18 0018. */public class ColorEvaluator implements TypeEvaluator<Integer>{    @Override    public Integer evaluate(float fraction, Integer startValue, Integer endValue) {        int alpha = (int) (Color.alpha(startValue) + fraction *                (Color.alpha(endValue) - Color.alpha(startValue)));        int red = (int) (Color.red(startValue) + fraction *                (Color.red(endValue) - Color.red(startValue)));        int green = (int) (Color.green(startValue) + fraction *                (Color.green(endValue) - Color.green(startValue)));        int blue = (int) (Color.blue(startValue) + fraction *                (Color.blue(endValue) - Color.blue(startValue)));        return Color.argb(alpha, red, green, blue);    }}

然后自定义View那里加个color，get和set方法；创建一个ObjectAnimator，和AnimatorSet，接着把动画组合到一起就到，这里就加点东西而已，怕读者有问题，直接另外建个View吧~

AnimView2.java：

/** * Created by Jay on 2015/11/18 0018. */public class AnimView2 extends View {    public static final float RADIUS = 80.0f;    private Point currentPoint;    private Paint mPaint;    private int mColor;    public AnimView2(Context context) {        this(context, null);    }    public AnimView2(Context context, AttributeSet attrs) {        super(context, attrs);        init();    }    public AnimView2(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private void init() {        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setColor(Color.BLUE);    }    private void drawCircle(Canvas canvas){        float x = currentPoint.getX();        float y = currentPoint.getY();        canvas.drawCircle(x, y, RADIUS, mPaint);    }    private void startAnimation() {        Point startPoint = new Point(RADIUS, RADIUS);        Point endPoint = new Point(getWidth() - RADIUS, getHeight() - RADIUS);        ValueAnimator anim = ValueAnimator.ofObject(new PointEvaluator(), startPoint, endPoint);        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                currentPoint = (Point) animation.getAnimatedValue();                invalidate();            }        });        ObjectAnimator objectAnimator = ObjectAnimator.ofObject(this, "color", new ColorEvaluator(),                Color.BLUE, Color.RED);        //动画集合将前面两个动画加到一起，with同时播放        AnimatorSet animatorSet = new AnimatorSet();        animatorSet.play(anim).with(objectAnimator);        animatorSet.setStartDelay(1000l);        animatorSet.setDuration(3000l);        animatorSet.start();    }    @Override    protected void onDraw(Canvas canvas) {        if (currentPoint == null) {            currentPoint = new Point(RADIUS, RADIUS);            drawCircle(canvas);            startAnimation();        } else {            drawCircle(canvas);        }    }    //color的get和set方法~    public int getColor() {        return mColor;    }    public void setColor(int color) {        mColor = color;        mPaint.setColor(color);        invalidate();    }}

然后MainActivity，setContentView那里把AnimView改成AnimView2就好~

Interpolator(补间器)

加速度：

弹球：

上面的补间器补间动画和属性动画都可用，而且补间动画还新增了一个TimeInterpolator接口该接口是用于兼容之前的Interpolator的，这使得所有过去的Interpolator实现类都可以直接拿过来放到属性动画当中使用！我们可以调用动画对象的setInterpolator()方法设置不同的Interpolator！我们先该点东西，让小球从屏幕正中央的顶部掉落到底部~ 然后我们会我们为我们的集合动画调用下述语句： animatorSet.setInterpolator(new AccelerateInterpolator(2f)); 括号里的值用于控制加速度~

自定义Interpolator

非常简单，实现TimeInterpolator接口，重写getInterpolation方法

详细代码：

private class DecelerateAccelerateInterpolator implements TimeInterpolator {    @Override    public float getInterpolation(float input) {        if (input < 0.5) {            return (float) (Math.sin(input * Math.PI) / 2);        } else {            return 1 - (float) (Math.sin(input * Math.PI) / 2);        }    }}

调用setInterpolator(new DecelerateAccelerateInterpolator())设置下即可~ 不贴图了~

1 0