RippleView

撸个绘制的自定义View,实现了个RippleView,写下来记载。

直接上图看效果:

ripple_view.gif

运行时效果就是这样,这样的效果最常见的就是用来作为下载进度条,或者作为一个交互的背景。
好,废话不多说,来实现吧。

分析

看到这个动画,想到的是用自定义View去做,并且在onDraw里面去绘制。具体参考这篇文章

do it

先继承View,实现构造方法,然后按照自定义三部曲走
1、onMeasure 测量大小

ripple_measure_code.png

2、onLayout确定位置
略...(没有用到)
3、onDraw 绘制

ripple_draw_code.png

重写onDraw方法,在里面调用绘制波浪线方法。
其中,mOffset为波浪线的偏移量,用ValueAnimator来控制;
注意点:

  • 绘制的path在要reset(),否则会重叠。
  • 绘制的曲线要闭合,paint设置style为fill,才会把颜色填充在波浪里面。

三部曲走完搞掟。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容