Android绘制(三):Path结合属性动画, 让图标动起来!
16lz
2021-01-26
Android绘制(一):来用shape绘出想要的图形吧!
Android绘制(二):来用Path绘出想要的图形吧!
目录
- 效果图
- 前言
- 绘制
- 属性动画
- 最后
效果图
暂停到终止 暂停到播放不废话, 直接上效果图, 感兴趣再看下去. 其实不单单是效果图演示的, 运用熟练的话各种图标之间都是可以切换的.
前言
之前的文章也说了, path还是很有潜力的. 但是很遗憾, 我本人不太擅长用贝塞尔曲线画东西, 所以只能演示一些简单的变化(手动无奈). 来看看是如何实现的吧.
绘制
想要绘制矩形很简单啦, 移动到左上角, 然后逆时针画一圈, 或者顺时针画一圈. 那其实暂停和终止就是两个矩形, 播放就是两个三角形. 所以稍微改变下path绘制的位置就解决问题啦.
mLPath.moveTo(left, top);mLPath.lineTo(left, bottom);mLPath.lineTo(right, bottom);mLPath.lineTo(right, top);mLPath.close();
绘制但是需要弄清绘制区域. 首先要测出设定视图宽高, 再以此画一个圆, 然后设置一个内边距, 然后再绘制图标. 来张图:
属性动画
其实这里的属性动画的使用部分是最简单的使用, 就是值变化, 从0到1或者从1到0.
ValueAnimator valueAnimator = ValueAnimator.ofFloat(isPlaying ? 1 : 0, isPlaying ? 0 : 1);valueAnimator.setDuration(mAnimDuration);valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mProgress = (float) animation.getAnimatedValue(); invalidate(); }});
然后依据mProgress的值变化图形. 那要怎么构建这个变化呢? 注意看我的注释部分, 变化的值就那几个, 你将0时的值和1时的值先写好, 然后推算函数, 就是初中数学的难度, 大概(天知道现在小学生变成什么样了)(手动滑稽).
// 暂停间距(0: mMidSpace 1: 0)float pauseDis = mMidSpace * (1 - mProgress);// 暂停单条宽(0: mRectWidth / 3 1: mRectWidth / 2)float pauseWidth = (mRectWidth - pauseDis) / 2;// 左暂停左上(0: 0 1: mRectWidth / 2)float pauseLLT = pauseWidth * mProgress;// 右暂停左上(0: mRectWidth / 3 * 2 1: mRectWidth / 2)float pauseRLT = pauseWidth + pauseDis;// 右暂停右上(0: mRectWidth 1: mRectWidth)float pauseRRT = pauseWidth * 2 + pauseDis;// 右暂停右下(0: mRectWidth 1: mRectWidth / 2)float pauseRRB = pauseRRT - pauseWidth * mProgress;
最后
之后实现应该都不太难了, 不管是监听还是自定义属性. 那自定义视图可以看这篇-界面无小事(五):自定义TextView, 属性动画可以看这篇-动画必须有(一): 属性动画浅谈. 当然了, 要是前一篇没看的, 建议看下Android绘制(二):来用Path绘出想要的图形吧!. 喜欢记得点赞哦, 有意见或者建议评论区见, 暗中关注我也是可以的哦~
更多相关文章
- Android视图控件属性layout_weight的作用
- Android绘图机制(一)——自定义View的基础属性和方法
- Android仿搜狗浏览器加载动画
- android字体样式
- Android(安卓)代码热修复详解
- 摘要:HenCoder Android(安卓)自定义 View 1-8 硬件加速
- Android(安卓)SurfaceView 详解
- Android(安卓)View绘制流程(结合源码分析)上
- android:windowIsTranslucent 的好处 与 引发的部分问题