手把手讲解-一个复杂动效的自定义绘制2

手把手讲解-一个复杂动效的自定义绘制2

首页休闲益智帮助小老弟更新时间:2024-10-17

享学课堂诚邀作者:周周

转载请声明出处!

前言

手把手讲解系列文章,是我写给各位看官,也是写给我自己的。

文章可能过分详细,但是这是为了帮助到尽量多的人,毕竟工作5,6年,不能老吸血,也到了回馈开源的时候.

这个系列的文章:

1、用通俗易懂的讲解方式,讲解一门技术的实用价值

2、详细书写源码的追踪,源码截图,绘制类的结构图,尽量详细地解释原理的探索过程

3、提供Github 的 可运行的Demo工程,但是我所提供代码,更多是提供思路,抛砖引玉,请酌情cv

4、集合整理原理探索过程中的一些坑,或者demo的运行过程中的注意事项

5、用gif图,最直观地展示demo运行效果

如果觉得细节太细,直接跳过看结论即可。

本人能力有限,如若发现描述不当之处,欢迎留言批评指正。

学到老活到老,路漫漫其修远兮。与众君共勉 !

github地址:

[下载之后找到其中的 MemoryClearDrawable] (https://github.com/18598925736/UiDrawTest)

前言

上一篇文章,在 主要是在解读 不规则图形 和 覆盖绘制的"秘密" , 利用数学思维 解决无限动画的 要求.

本文,如何 优雅地设计一个动画特效自定义View类。代码经过本人反复推敲,应该足够优雅了, 尽请参考。

效果图

源码讲解

MemoryClearDrawable类

特别说明:自定义View,可以继承view,可以继承View的某个实现,可以继承ViewGroup或者ViewGroup的某个实现,具体做法很多,但是究其原理,无非就是自绘 / 组合. 而自绘,可以继承View去重写onDraw,也可以继承Drawable 去重写draw.

继承View 和 继承Drawable的区别是:

1.后者使用比前者更简单,只需要重写draw过程,并且不需要操心onMeasure的一堆破事。

2.setAlpha、setColorFilter、getOpacity也需要重写,但是模板固定.

另外,Drawable (英文翻译为 "可绘制",读音为:/'drɔəbl/ )可以理解为它就是一张图,可以当作图片去使用,并且这张图比 jpg/png 这种资源文件更省apk空间。

但是,继承Drawable有一个缺点:如果我们的自定义效果里面包含了手势操作,例如需要重写onTouchEvent,那么drawable就不能使用了,还是只能继承View,去重写测量 布局 绘制。

设计思路分析

我上面提供了动画减速的按钮,应该可以帮助大家更好去分解动画。

遇到复杂动画,第一件事就是放慢速度观察,看看具体有哪些绘制 、动效 步骤。

针对上面这个动画,

我们能够分析出

静止的部分有:

1.最外围的绿色背景

2.外围的白色圆圈(带渐变色)

3.中间的白色叉叉

4.叉叉消失之后的一个小圆点

5.小圆点消失之后的勾勾

6.纵横的辅助线(也可以不画)

动态的部分有:

1.白色圆圈(带渐变色)的旋转

2. 叉叉逐渐缩小直到消失

3.叉叉消失之后的一个小圆点 上移

4.叉叉消失之后的一个小圆点 下移

5.小圆点消失之后的勾勾的伸长

开始撸码

1、从静止的部分开始写:

TIPS: 自定义View的绘制,很大一部分工作量都是在坐标计算上。根据以往的经验,在绘制开始之前,将坐标轴平移到画面中心,一般都可以减轻计算的工作量,所以:

@Override public void draw(@NonNull Canvas canvas) { canvas.translate(mWidth / 2, mHeight / 2);//第一件事,先把坐标轴移动到中央,为了绘制方便 ... }

首先平移坐标轴,总是有好处的。

TIPS:坐标计算的过程,文字很难说的清,请阅读源码,应该能看懂

按照上面的6点要素,一个一个绘制, 确认单步绘制调试没有错误之后,把各个步骤的绘制方法独立出来.

2、静止的部分完了,那么现在是动态的部分。

TIPS: 我们看到的动画效果,都是利用人肉眼的影像残留特性,通过短时间刷新视图,造成动画的假象。自定义View做动画,可以通过ValueAnimator当作计算器 来改变全局参数,然后把全局参数 加入到 绘制的计算中。

动态的部分,按照步骤来:一共有5部分,如上述。

我把5个步骤定义为5种状态,通过内部类Status来管理。

然后根据状态的不同来执行不同的绘制过程

然后结合 ValueAnimator 对参数的改变,加上invalidateSelf 刷新自身来造成动画效果。

每一个步骤也是要单步调试,确定OK了,再编码下一步动画。

3、最后一步,利用AnimatorSet将所有的分步 animator 顺序执行

结语

如果UI小姐姐带着 产品经理 兴致匆匆地来找你,给你看一眼 别人app上的效果,说这个特别炫酷,问你能不能做出来,你依然一脸尴尬地不知所措?NO,NO,NO,UI小姐姐会很失望的。

拿到一个特效:

​ 如果发现某一个步骤有问题,则回到第3步 ;

​ 如果发现整体效果有很大差异,则回到 第2步

网上的自定义控件博文确实很多,但是能够详细讲解,并且提供案例,能够换位思考的作者,实在是太少。所以我写了几篇手把手系列,给自己以后温故而知新,也希望能帮到需要帮助的 小老弟们····

如果有大佬读了源码有问题,欢迎随时指教!

你的赞和关注是我继续创作的动力~

查看全文
大家还看了
也许喜欢
更多游戏

Copyright © 2024 妖气游戏网 www.17u1u.com All Rights Reserved