背景颜色随滑动而渐变的View

名称: GuideBackgroundColorAnimation

分类: 动画

项目地址: https://github.com/TaurusXi/GuideBackgroundColorAnimation

功能: view的背景色能随着滑动而渐变, 适合引导页的设计,稍作改动也可用于栏目的切换.

分析:

这个小功能没有特别复杂的地方, 主要是在ViewPager的监听函数onPageScrolled()这里实现了颜色的改变.分析下过程吧:

  1. 自定义一个View—ColorAnimationView
  2. 为view设置一各Viewpager, 并重写ViewPager.OnPageChangeListener
  3. 重点分析onPageScrolled(): 
1
2
3
4
5
6
int count = getViewPagerChildCount() - 1;
if (count != 0) {
    float length = (position + positionOffset) / count;
    int progress = (int) (length * DURATION);
        ColorAnimationView.this.seek(progress);
}

先得到页面数量count, 根据每一次的position和positionOffset计算得到length, position是从0开始计算, 最大值为count - 1, 如果有n个子页面, position的最大值就是n-1. 而positionOffset则是一个取值范围在[0,1]之间的值, 对于一个页面来说, 滑动到一半, positionOffset的值就是0.5, 全部滑过来的那一瞬间, 取值为1, 当然也是下一个新的position的0了. 因此length可以想象成一个取值范围为[0,count]/count(也就是[0,1])之间的浮点数, 能反映全部过程中的某一个时间点.
根据这个百分比,再乘以总的时间DURATION就知道目前完成了整个动画的百分比了, 也就是progress, 随后调用seek方法.