Android 图片平移随记 GuidePagerDemo

Pm需求:单张背景图做平移,至图片的最左移动至最右边,ImageView本身没有什么变化,类似Android的桌面单张长图的模式。

想法:

• 需要达成需求,等比缩放后图的宽度一定要大于屏幕宽度,否则就没有效果
• 画一个保存图片区域的矩形 , 再利用矩阵对矩形的Translate进行变换
• 利用ValueAnimator做成动画效果即可

//应该用如下方法才是创建Matrix对象
Matrix matrix = new Matrix ( mImage.getImageMatrix () );

一、先将XML中的ImageView的scaleType设置成matrix

使用RectF画出需要存放图片的矩形区域
// 存放图片区域的矩形
RectF rectF = new RectF(img.getDrawable().getBounds());
// 图片宽高
float dw = rectF.width();
float dh = rectF.height();
// 控件宽高
int width = imgBg.getWidth();
int height = imgBg.getHeight();
//初始化矩阵值
imgBg.setImageMatrix(new Matrix());
//获取矩阵
Matrix matrix = imgBg.getImageMatrix();
//缩放比例
float value = height / dh;
// 缩放变换,按照比例放大，使图片高度等于控件高度
matrix.postScale(value, value);
// 矩阵缩放映射到存放图片区域的矩形
matrix.mapRect(rectF);
// 移动图片到坐标原点
matrix.postTranslate(0, 0);
// 将变换应用到图片
imgBg.setImageMatrix(matrix);

注意:

• postTranslate是指在setScale后平移(preTranslate是在setScale前),他们参数是平移的距离,而不是平移目的地的坐标。

二、设置位移动画

位移动画的移动距离为图片对当前屏幕缩放后的真实宽度减去屏幕(或者当前场景下ImageView宽度)

setTranslateAnimation(imgBg, -(dw * value - screenWidth), 0);

动画的添加:

public void setTranslateAnimation(final ImageView imgBg, float translateX, float translateY) {
    Matrix matrix = imgBg.getImageMatrix();
    float[] startMatrixValue = new float[9];
    float[] endMatrixValue = new float[9];
    // 获取矩阵的初始值
    matrix.getValues(startMatrixValue);
    // 对矩阵进行变换
    matrix.postTranslate(translateX, translateY);
    // 获取变换后的值
    matrix.getValues(endMatrixValue);
    ValueAnimator animator = ValueAnimator.ofFloat(0, 1);
    animator.addUpdateListener(new TransXAnimatorListener(imgBg, startMatrixValue, endMatrixValue));
    animator.setDuration(4000);
    animator.setTarget(imgBg);
    // 设置插值器 LinearInterpolator为匀速效果
    animator.setInterpolator(new LinearInterpolator());
    animator.start();
}

三、设置好初始状态的矩阵和最终状态的矩阵及变换动画

class TransXAnimatorListener implements ValueAnimator.AnimatorUpdateListener {

    private float[] mStartMatrixValue;
    private float[] mEndMatrixValue;
    private float[] mInterpolateMatrixValue; // 矩阵变换动画过程中间值
    private Matrix mMatrix;
    private ImageView imgBg;

    public TransXAnimatorListener(final ImageView imgBg, float[] startMatrixValue, float[] endMatrixValue) {
        this.mStartMatrixValue = startMatrixValue;
        this.mEndMatrixValue = endMatrixValue;
        this.imgBg = imgBg;
        mInterpolateMatrixValue = new float[9];
        mMatrix = imgBg.getImageMatrix();
    }

    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float animatedValue = (float) animation.getAnimatedValue();
        // 根据动画当前进度设置矩阵的值
        for (int i = 0; i < 9; i++) {
            mInterpolateMatrixValue[i] = mStartMatrixValue[i]
                    + (mEndMatrixValue[i] - mStartMatrixValue[i]) * animatedValue;
        }
        mMatrix.setValues(mInterpolateMatrixValue);
        imgBg.setImageMatrix(mMatrix);
        // setImageMatrix() 不一定会调用invalidate()，此处手动调用即可，
        // 或者为了避免重复绘制也可以参考setImageMatrix()源码进行改进
        imgBg.invalidate();
    }
}

此处onAnimationUpdate方法内矩阵变换参考:
篱开罗 - 自定义可旋转、平移、缩放的ImageView 中的 [动画技巧]

四、后续优化

测试过程中放一些分辨率高的图片的时候发现出现卡顿,使用bitmap压缩的话在压缩过程中会出现短时间的空白屏

• 这里使用Fresco的SimpleDraweeView进行替换当前的ImageView
• 添加Viewpager和Indicator效果,完成需求

也有使用过Glide去加载并简化,不过效果会有些问题,还需要再度完善,新手一枚还需要多多练习。

Demo已放在上Github,如有需要的盆友可以看一下,互相交流~