开发者社区> sorrower> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android绘制(三):Path结合属性动画, 让图标动起来!

简介: Android绘制(一):来用shape绘出想要的图形吧!Android绘制(二):来用Path绘出想要的图形吧! 目录 效果图 前言 绘制 属性动画 最后 效果图 不废话, 直接上效果图, 感兴趣再看下去.
+关注继续查看

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绘制竖直虚线完美解决方案—自定义View
开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式。
0 0
Android进阶之绘制-自定义View完全掌握(四)
Android进阶之绘制-自定义View完全掌握(四)
0 0
Android进阶之绘制-自定义View完全掌握(三)
Android进阶之绘制-自定义View完全掌握(三)
0 0
Android进阶之绘制-自定义View完全掌握(二)
Android进阶之绘制-自定义View完全掌握(二)
0 0
Android进阶之绘制-自定义View完全掌握(一)
Android进阶之绘制-自定义View完全掌握(一)
0 0
Android自定义控件 | View绘制原理(画什么?)
从源码的角度分析“绘制(draw)”。View绘制只决定绘制的顺序,具体绘制内容由各个子View自己决定。
0 0
Android自定义控件 | View绘制原理(画在哪?)
从源码的角度分析“定位(layout)”。 位置都是相对的,比如“我在你的右边”、“你在广场的西边”。为了表明位置,总是需要一个参照物。。。
0 0
Android自定义控件 | View绘制原理(画多大?)
这一篇将以源码中的几个关键函数为线索分析“测量(measure)”。 如果想直接看结论可以移步到第三篇末尾。 真正的测量工作在onMeasure()中进行。。。
0 0
Android 开发进阶: 自定义 View 1-1 绘制基础
Android 开发进阶: 自定义 View 1-1 绘制基础
0 0
Android窗口管理分析(4):Android View绘制内存的分配、传递、使用
Android窗口管理分析(4):Android View绘制内存的分配、传递、使用
0 0
+关注
sorrower
磨碎的纳豆.
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android插件化:从入门到放弃
立即下载