Android动画实例 (二)

效果图

• 实现思路
  循环添加一个自定义的ImageView，每个ImageView随机设置不同颜色的Bitmap，并且有一个放大的动画，比较简单。然后ImageView的移动轨迹使用贝塞尔曲线来完成。最后一个缩小到动画，动画结束移除控件。

public HeartView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    Bitmap bm = BitmapUtil.createHeart(context);
    setImageBitmap(bm);
}

在三个参数的构造方法里设置Bitmap，Btimap通过工具类BitmapUtil来创建，下面是这个工具类

public class BitmapUtil {

    private static final Paint sPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
    private static final Canvas sCanvas = new Canvas();
    private static Random mRandom = new Random();

    public static Bitmap createHeart(Context context) {
        Bitmap heart = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart);
        Bitmap heartBorder = BitmapFactory.decodeResource(context.getResources(), R.drawable.heart_border);
        Bitmap bm = Bitmap.createBitmap(heartBorder.getWidth(), heartBorder.getHeight(), Bitmap.Config.ARGB_8888);
        if (bm == null) {
            return null;
        }
        Canvas canvas = sCanvas;
        canvas.setBitmap(bm);
        Paint p = sPaint;
        // 画边框
        canvas.drawBitmap(heartBorder, 0, 0, p);
        // 随机生成爱心颜色
        int color = Color.rgb(mRandom.nextInt(255), mRandom.nextInt(255), mRandom.nextInt(255));
        // 设置ColorFilter
        p.setColorFilter(new PorterDuffColorFilter(color, PorterDuff.Mode.SRC_ATOP));
        float dx = (heartBorder.getWidth() - heart.getWidth()) / 2f;
        float dy = (heartBorder.getHeight() - heart.getHeight()) / 2f;
        // 因为边框图片比爱心图片大，爱心会在边框的中间
        canvas.drawBitmap(heart, dx, dy, p);
        p.setColorFilter(null);
        canvas.setBitmap(null);
        return bm;
    }

}

这是工具类中设计的两个图片，这个工具类是当初做这个东西的时候在网上找的，链接忘记了，上面有都有注释

@Override
protected void onAttachedToWindow() {
    super.onAttachedToWindow();
    int width = getDrawable().getIntrinsicWidth();
    int height = getDrawable().getIntrinsicHeight();
    // 控制自己在父控件中的位置
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
    params.leftMargin = (ScreenUtils.getScreenWidth(getContext()) - width) / 2;
    // 这个值可以适当的改一下
    params.topMargin = ScreenUtils.getScreenHeight(getContext()) - height * 3;
    setLayoutParams(params);
    zoom();
}

当控件绑定到Window的时候会调用这个方法，在这个方法中初始化控件的坐标，控制控件的初始位置在底部居中。然后执行一个放大的动画。

/**
 * 放大动画
 */
private void zoom() {
    AnimatorSet set = new AnimatorSet();
    ObjectAnimator scaleXAnim = scaleX(0.0f, 1.0f);
    ObjectAnimator scaleYAnim = scaleY(0.0f, 1.0f);
    set.play(scaleXAnim).with(scaleYAnim);
    set.start();
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            // 动画结束之后，
            bezier();
        }
    });
}

放大动画比较简单，在动画结束后调用bezier方法，也是实现的重点

private void bezier() {
    final int width = getDrawable().getIntrinsicWidth();
    final int height = getDrawable().getIntrinsicHeight();
    final int screentWidth = ScreenUtils.getScreenWidth(getContext());
    final int screenHeight = ScreenUtils.getScreenHeight(getContext());
    final Random random = new Random();
    // 设置贝塞尔曲线的起始坐标和控制坐标
    // 开始坐标与onAttachedToWindow中的初始坐标一致
    // 结束坐标
    float startX = (screentWidth- width) / 2;
    float startY = screenHeight - height * 3f;
    float stopX = random.nextInt(screentWidth);
    float stopY = 0;
    float controlX = random.nextInt(screentWidth);
    float controlY = ScreenUtils.getScreenHeight(getContext()) / 2;
    Path path = new Path();
    path.moveTo(startX, startY);
    path.quadTo(controlX, controlY, stopX, stopY);
    BezierEvaluator evaluator = new BezierEvaluator(new PointF(controlX, controlY));
    final PointF start = new PointF(startX, startY);
    final PointF stop = new PointF(stopX, stopY);
    ValueAnimator animator = ValueAnimator.ofObject(evaluator, start, stop);
    animator.setDuration(3000);
    animator.addUpdateListener(this);
    animator.addListener(new AnimatorListenerAdapter(){
        @Override
        public void onAnimationEnd(Animator animation) {
             shrink();
        }
    });
    animator.start();
}

使用二阶贝塞尔曲线，首先设置起点坐标与初始化坐标一致，然后设置终点坐标，想法是移动到顶部，所以stopY一直为0，stopX设置为random.nextInt(screentWidth)不超过宽度的一个随机大小，因为不想落下同一个位置，控制点也是一个意思，大致在窗口的中间位置。然后通过属性动画获取到这条曲线上的坐标，这里使用一个带有TypeEvaluator参数的方法来构造一个属性动画。那么TypeEvaluator的作用到底是什么呢？简单来说，就是告诉动画系统如何从初始值过度到结束值。最后这句来自大神郭霖的博客 下面是这个自定义的TypeEvaluator的内容：

public class BezierEvaluator implements TypeEvaluator<PointF> {

    private PointF mControlPointF;

    public BezierEvaluator(PointF controlPointF) {
        mControlPointF = controlPointF;
    }

    @Override
    public PointF evaluate(float fraction, PointF startValue, PointF endValue) {
        return BezierUtil.CalculateBezierPointForQuadratic(fraction, startValue, mControlPointF, endValue);
    }

}

BezierUtil来自大神徐宜生的慕课网课程 然后在动画过程中实时更新控件的位置，实现控件随着曲线轨迹移动：

@Override
public void onAnimationUpdate(ValueAnimator animation) {
    // 不断获取曲线上的点，更新控件坐标，实现控件随着曲线移动
    final PointF p = (PointF) animation.getAnimatedValue();
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) getLayoutParams();
    params.leftMargin = (int) p.x;
    params.topMargin = (int) p.y;
    setLayoutParams(params);
}

最后在曲线动画结束的时候缩小动画，缩小动画结束移除控件，与放大动画一样比较简单

/**
 * 缩小动画
 */
private void shrink() {
    AnimatorSet set = new AnimatorSet();
    ObjectAnimator scaleXAnim = scaleX(1.0f, 0.0f);
    ObjectAnimator scaleYAnim = scaleY(1.0f, 0.0f);
    set.play(scaleXAnim).with(scaleYAnim);
    set.start();
    set.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            // 动画结束，移除控件
            if(getParent() instanceof ViewGroup) {
                ViewGroup parent = (ViewGroup) getParent();
                parent.removeView(HeartView.this);
            }
        }
    });
}

最后使用：

final ViewGroup content = (ViewGroup) findViewById(android.R.id.content);
final RelativeLayout layout = (RelativeLayout) content.getChildAt(0);

final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
    @Override
    public void run() {
        HeartView view = new HeartView(MainActivity.this);
        layout.addView(view);
        handler.postDelayed(this, 500);
    }
}, 1000);

实现之前束手无策，实现之后感觉没啥可写的源码