背景图片的缩放

背景图片的缩放

 ONE Goal ,ONE Passion !

我们看到一些效果,控件中的背景图片会慢慢变大,但是控件不会随着图片的放大而变大.效果如下:

分析:

想让图片变大,而且控件本身大小不能改变,那么就要改变图片自身大小,而不能改变控件大小.

实现原理:

1,首先拿到我们要放大的图片bitmap.

2,使用Bitmap.createBitmap().创建一个bitmap的副本.

3,使用matrix去改变图片副本本身大小

4,使用ValueAnimator去根据变化率将副本绘制出来.

自定义View

 public class ScaleImage extends View {

    /**
     * 设置的背景图片
     */
    private Drawable background;
    /**
     * 画布的背景图片
     */
    private Bitmap bitmapCopy;
    /**
     * 跟随动画实时更新的 放大比例
     */
    float scal = 1f;

    /**
     * 让原图放大 1.3倍,这个值可以随意更改.目的是让原图填充满控件
     */
    private float orgFrac = 1.3f;
    /**
     * 控件宽
     */
    private int widthSize;
    /**
     * 控件高
     */
    private int heightSize;
    private float downY;
    private float downX;


    public ScaleImage(Context context) {
        this(context, null);
    }

    public ScaleImage(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScaleImage(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);


        widthSize = MeasureSpec.getSize(widthMeasureSpec);
        heightSize = MeasureSpec.getSize(heightMeasureSpec);


    }

    @Override
    protected void onDraw(final Canvas canvas) {
        super.onDraw(canvas);


        if (background != null) {
            BitmapDrawable bd = (BitmapDrawable) background;
            final Bitmap bitmap = bd.getBitmap();


            final Matrix matrix = new Matrix();

            bitmapCopy = Bitmap.createBitmap(bitmap, 0, 0,
                    bitmap.getWidth(), bitmap.getHeight(),
                    matrix, true);


            /**
             * float sx, float sy, float px, float py
             *
             * sx,sy x,y方向缩放比例
             * px,py 以px py为轴心进行缩放
             * 放大比例加了默认的orgFrac.是为了在还没有开始缩放时
             * 放图片能够填充控件.如果图片过小的话,可能控件和图片
             * 之间会有边界空白
             *
             * 注意: 这里的px  py :matrix作用于哪个对象上,那么px,py就是对象上的坐标点
             * 如 : 这里就是 bitmapCopy 上的px,py坐标点.
             */

           matrix.setScale(orgFrac + scal, 1, bitmapCopy.getWidth() / 2, bitmapCopy.getHeight() / 2);



            canvas.drawBitmap(bitmapCopy, matrix, null);

        }


    }

    /**
     * 开始缩放
     *
     * @param drawableId 需要放大的背景图片
     */
    public void startScale(int drawableId) {


        background = getResources().getDrawable(drawableId);
        if (background == null) {
            throw new RuntimeException("background must not null");
        } else {


            ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
            animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator animation) {

                    float fraction = (float) animation.getAnimatedValue();

                    scal = (float) (0.5 * fraction);
                    invalidate();


                }
            });

            animator.setDuration(5000);
            animator.setInterpolator(new BounceInterpolator());

            animator.start();

        }

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                downY = event.getY();
                downX = event.getX();

                break;
            case MotionEvent.ACTION_UP:

                float upY = event.getY();
                float upX = event.getX();


                if (Math.abs(upY - downY) < 5 && Math.abs(upX - downX) < 5) {
                    listener.backgroundClick();
                }

                break;
        }


        return true;
    }

    OnBackgroundCilckListener listener;

    /**
     * 点击事件的监听
     *
     * @param listener
     */
    public void addBackgroundCilckListener(OnBackgroundCilckListener listener) {
        this.listener = listener;
    }


    public interface OnBackgroundCilckListener {
        void backgroundClick();
    }


    }

跑起来

  image = (ScaleImage) findViewById(R.id.image);

        image.startScale(R.drawable.parallax_img);

        image.addBackgroundCilckListener(new ScaleImage.OnBackgroundCilckListener() {
            @Override
            public void backgroundClick() {

            }
        });

小提琴家

matrix使用待续

好了.直接使用控件,我们将资源文件中的Drawable传入就可以了.