WindowImageView.gif

前几天看到知乎里的双11广告有这么一个效果，就决定仿一个出来。
项目地址在 https://github.com/Bleoo/WindowImageView，觉得不错就给个star吧~
该库已上传至 jitpack，可直接引用。
图片已处理，避免OOM，并且支持Fresco，加载网络图片。
以下是效果实现的核心思路，具体实现请到项目中看。

Draw

思路是先将canvas坐标系垂直偏移出View，即偏移量为负数，然后在将drawable绘制在(0,0)点处，这时候的(0,0)点已经在View可视范围之外了。

public void draw(Canvas canvas) {
    ...
    // canvas的坐标系先偏移到view之外的某个点，disPlayTop垂直偏移量
    canvas.translate(0, disPlayTop);
    // 再将drawable绘制出来，rescaleHeight图片处理后的高度
    drawable.setBounds(0, 0, getWidth(), rescaleHeight);
    drawable.draw(canvas);
    ...
}

disPlayTop 垂直偏移量

这个得结合 View的当前位置 及 translationMultiple偏移倍数 来计算。

// 当图片处理完成后的回调
public void onProcessFinished(int width, int height) {
    rescaleHeight = height;
    // 计算出RecyclerView高度与图片高度不一致时的偏移倍数translationMultiple
    resetTransMultiple(height);
    // 获取View所在坐标
    getLocationInWindow(location);
    // 当图片处理完成，计算垂直偏移量，rvLocationRecyclerView所在坐标
    disPlayTop = -(location[1] - rvLocation[1]) * translationMultiple;
    ...
}

translationMultiple 偏移倍数

通过 图片高度 及 RecyclerView的高度 来计算偏移倍数。

private void resetTransMultiple(int scaledHeight) {
    ...
    // 计算最小垂直偏移量
    mMimDisPlayTop = -scaledHeight + getHeight();
    // 计算垂直偏移倍数，rvHeight为RecyclerView的高度
    translationMultiple = 1.0f * -mMimDisPlayTop / (rvHeight - getHeight());
    ...
}

onScrolled 滑动

通过 RecyclerView的滑动回调 及 translationMultiple偏移倍数 来计算 disPlayTop垂直偏移量，然后主动重绘。

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    ...
    disPlayTop += dy * translationMultiple;
    invalidate();
    ...
}

项目地址 https://github.com/Bleoo/WindowImageView，觉得不错就给个star吧~