请选择 进入手机版 | 继续访问电脑版

12360技术网 - 专业IT技术发表平台

 立即注册  找回密码
查看: 8629|回复: 6

Android自定义控件(三)——贝济埃曲线与水波纹动画

[复制链接]

22

主题

28

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
发表于 2020-1-26 14:15:09 | 显示全部楼层 |阅读模式
我是清都山水郎,天教分付与疏狂。曾批给雨支风券,累上留云借月章。
诗万首,酒千觞。几曾着眼看侯王?玉楼金阙慵归去,且插梅花醉洛阳。
看过小编写的第一篇的刮刮乐实现的读者,肯定看到了博主提到的贝济埃曲线,那一篇没有解释,因为毕竟开篇还是要能让大家感兴趣,一上来就理论未免有些乏味,所以这篇就来解析刮刮乐那篇的贝济埃曲线。

1.贝济埃曲线历史

贝济埃曲线于1962年由法国工程师皮埃尔·贝济埃所提出,开始用途是为汽车的主体进行设计。在数学的数值领域分析中,贝济埃曲线是计算机图形学相当重要的参数曲线。其中有一阶贝济埃曲线,二阶贝济埃曲线,三阶贝济埃曲线,四阶贝济埃曲线,五阶贝济埃曲线。

而我们常用的当属二阶贝济埃曲线,特别是在Android自定义控件当中,捕捉的手势,用到的最多的就是二阶贝济埃曲线,今天后面所介绍的水波纹动画的原理也是二阶贝济埃曲线。
2.二阶贝济埃曲线

首先,我们来看看二阶贝济埃曲线的公式:
B(t)=(1-t)²P₀+2t(1-t)P₁+t²P₂(备注t在[0,1]之间)
在这里P₀是起始点,P₁是控制点,P₂是终点,t就是时间,为了便于理解,小编画了参考图,方便于大家理解,如下图所示:

 
从图中,我们可以看到,P₀和P₁形成了一条一阶贝济埃曲线,而这条点上的Q₀就是这条线上匀速运动的点。其次P₁和P₂也形成了一条贝济埃曲线,同样Q₁是这条线上匀速运动的点。
我们可以看到这两条贝济埃曲线又生成了由Q₀和Q₁的新一阶贝济埃曲线,而在这条线上匀速运动的点B的运动形态就是二阶贝济埃曲线的最终形态。
综上所示,之所以称B的运动轨迹为二阶贝济埃曲线,是因为B的运动轨迹建立在两条一阶贝济埃曲线之上,其实我们可以类推,三阶贝济埃曲线就是三条一阶贝济埃曲线生成的二阶贝济埃曲线后, 在由二阶贝济埃曲线生成的一阶贝济埃曲线的运动轨迹,同理,四阶,五阶类同。
3.Android贝济埃曲线的函数quadTo与rQuadTo

讲完贝济埃曲线的理论,我们来看看实战之中,如何生成贝济埃曲线。
在Path类中,由2个函数与二阶贝济埃曲线相关,分别是:
  1. public void quadTo(float x1,float y1,float x2,float y2)public void rQuadTo(float dx1,float dy1,float dx2,float dy2)
复制代码
其中(x1,y1)为控制点坐标,也就是上面的P₁,而(x2,y2)是终点坐标,也就是P₂,这里可能大家由疑问,我们前面的贝济埃曲线函数不是由三个点吗?那起始点P₀去哪里呢?
其实起始点就是我们常用的Path.moveTo()函数,也就是说,二阶贝济埃曲线的调用步骤,是先调用Path.moveTo(),然后调用quadTo()或者rQuadTo()来确定,如果说想一直绘制贝济埃曲线,那么quadTo()终点(x2,y2),就是下一个贝济埃曲线的起点。
接着,我们再来看看第二个函数rQuadTo,它的四个参数意思分别为:
dx1:控制点x坐标,表示相对于上一个终点x坐标的位移。可以为负值,正值表示相加,后面一样。
dy1:控制点y坐标,表示相对于上一个终点y坐标的位移。
dx2:终点x坐标,同样是相对于上一个终点x坐标位移。
dy2:终点y坐标,同样是相对于上一个坐标y坐标的位移。
如果开始绘制,就是相对于的点就是P₀,如果是连续绘制,就是相对于的点P₂(上一个的终点)。
4.波浪动画

①初始化

了解了两个函数,我们来玩点有意思的自定义控件的波浪效果。和以前一样,我们需要自定义View,实现它的构造函数,同时初始化成员变量,代码如下:
  1. /*** * 水波纹动画自定义控件 */public class RippleView extends View {    private Paint paint;//画笔    private Path path;//路径    private int mRippleLength=1200;//波长    private int dx;//动画的移动值    public RippleView(Context context) {        super(context);    }    public RippleView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        this.paint=new Paint();        this.paint.setColor(Color.GREEN);//画笔颜色        this.paint.setStyle(Paint.Style.FILL);//填充模式        this.path=new Path();        this.startAnim();    }    public RippleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }}
复制代码
②定义动画

接着就是自定义移动动画,也就是波纹的动画,你可以想象一下波纹的效果,基本上他们都是移动一个波纹长度,波纹就会重合,所以我们自定义动画的移动范围就是一个波长,代码如下:
  1. private void startAnim(){    ValueAnimator valueAnimator=ValueAnimator.ofInt(0,this.mRippleLength);//设置动画为一个波长    valueAnimator.setDuration(2000);//设置一次动画时间    valueAnimator.setRepeatCount(ValueAnimator.INFINITE);//设置动画为无线循环    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override        public void onAnimationUpdate(ValueAnimator animation) {            dx=(Integer) animation.getAnimatedValue();//获取动画进度            postInvalidate();//重回界面        }    });    valueAnimator.start();//执行动画}
复制代码
记得在上面初始化中调用这个设置动画的函数。
③绘制波纹

最后一步就是绘制动画,也就是在我们自定义View的onDraw()函数中进行。代码如下:
[code]@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);    this.path.reset();//清除之前绘制的path    int halfLength=this.mRippleLength/2;//波长的一半    this.path.moveTo(-this.mRippleLength+dx,halfLength);//起始点P₀    for(int i=-this.mRippleLength;i

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x




上一篇:关于HashMap几个刁钻的面试题
下一篇:C++关于srand函数使用时间作为种子仍然得到相同数字
回复

使用道具 举报

0

主题

15

帖子

325

积分

中级会员

Rank: 3Rank: 3

积分
325
发表于 2020-1-28 16:47:03 | 显示全部楼层
楼主,大恩不言谢了![www.12360.co]
回复

使用道具 举报

0

主题

10

帖子

220

积分

中级会员

Rank: 3Rank: 3

积分
220
发表于 2020-2-3 01:35:05 | 显示全部楼层
这个帖子不回对不起自己![www.12360.co]
回复

使用道具 举报

0

主题

24

帖子

514

积分

高级会员

Rank: 4

积分
514
发表于 2020-2-4 11:04:04 | 显示全部楼层
这东西我收了!谢谢楼主![www.12360.co]
回复

使用道具 举报

17

主题

22

帖子

166

积分

注册会员

Rank: 2

积分
166
发表于 2020-2-20 03:35:28 | 显示全部楼层
既然你诚信诚意的推荐了,那我就勉为其难的看看吧![www.12360.co]
回复

使用道具 举报

0

主题

18

帖子

388

积分

中级会员

Rank: 3Rank: 3

积分
388
发表于 5 天前 | 显示全部楼层
楼主太厉害了!楼主,I*老*虎*U![www.12360.co]
回复

使用道具 举报

0

主题

18

帖子

388

积分

中级会员

Rank: 3Rank: 3

积分
388
发表于 前天 10:06 | 显示全部楼层
其实我一直觉得楼主的品味不错!呵呵![www.12360.co]
回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复 【右侧内容,后台自定义】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

12360技术网

GMT+8, 2020-2-29 20:22 , Processed in 0.105603 second(s), 41 queries .

本网站内容收集于互联网,Www.12360.Co不承担任何由于内容的合法性及健康性所引起的争议和法律责任。 欢迎大家对网站内容侵犯版权等不合法和不健康行为进行监督和举报。

© 2019-2020 Www.12360.Co

快速回复 返回顶部 返回列表