前几天看到知乎里的双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吧~