属性动画实现控件类似贝塞尔曲线轨迹移动效果

      前段时间工作中需要实现一种控件类似贝塞尔曲线轨迹运动的效果,也是折腾了几天,刚开始本着不重复造轮子的想法,去网上搜类似的效果,结果没搜到,后来自己实现了,抽成一个Demo,希望有需要的朋友以后可以直接用到而不用再折腾。


关于贝塞尔曲线的概念可以移步到这儿贝塞尔曲线的介绍

原理其实很简单,根据贝塞尔公式,用四个点确定一个轨迹,然后通过给控件设置动画,根据时间计算出控件此刻应该在的位置(可以理解为在屏幕上的坐标),只要四个点设置的恰当,可以让控件运行任何的轨迹

先上个效果图(电脑太卡,录制gif效果不好,请见谅):

运行效果

代码重要的部分其实只有自定义的TypeEvaluator,构造方法如下:

自定义TypeEvaluator的构造方法

构造方法中有五个参数,这五个参数决定了中间两个点的位置以及控件的动画范围,通过这几个参数,我们可以定义控件动画的幅度或大或小。决定贝塞尔曲线轨迹的四个点如下图:

贝塞尔曲线

通过上图,我们对这几个参数可能有更好的理解,上下两个点代表动画的起点和中点,中间两个圆弧的拐点就是我们这里说的另外两个点,我们只要确定了起点和终点,再通过参数控制中间两个点,就可以让控件按不同的轨迹移动。同时,由于属性动画的特性,还可以给移动中的控件设置点击事件。

最后附上代码,欢迎有兴趣的朋友共同优化。源码下载请戳

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

带负值的图表标签处理方法

今天跟大家分享带负值的图表标签处理方法! ▽▼▽ 在遇到某些特殊图表时,特别是一个数据系列中既有正值又有负值的情况,数据标签以及纵轴轴标签总是会相互遮挡,做出来...

3446
来自专栏我是业余自学C/C++的

Excel求百分比

1823
来自专栏AzMark

Matplotlib 系列之「绘制函数图像」

matplotlib 是 python 最著名的绘图库,它提供了一整套和 matlab 相似的命令 API,十分适合交互式进行绘图。

1302
来自专栏HenCoder

HenCoder Android 开发进阶:自定义 View 1-4 Canvas 对绘制的辅助

这期是 HenCoder 自定义绘制的第 1-4 期:Canvas 对绘制的辅助——范围裁切和几何变换。

1442
来自专栏北京马哥教育

用Python制作迷宫GIF

问:我是一个Python迷,并且对迷宫的生成和迷宫解决的办法非常感兴趣。我很羡慕别人能够做出生成迷宫的动画。我如何能够用Python自己做一个迷宫动画,然后把我...

1740
来自专栏三十课

【图片版】CSS网格布局(Grid)完全教程

CSS网格布局(Grid)是一套二维的页面布局系统,它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内...

46810
来自专栏flutter开发者

自定义View【2】

在前面的文章中我们学习了部分绘制的相关方法,在本篇文章中我们会继续再介绍一些常用的绘制方法。

1222
来自专栏smy

css sprite 调整大张图片中小图标的大小

直接说解决方法: ? 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小。 正常取图: .spr...

3935
来自专栏PPV课数据科学社区

[V课堂]R语言十八讲(七)

? R的画图功能是非常强大的,这非常有利于数据可视化,对于R画图,我们一 般使用三个画图系统,分别是R自带的画图系统,另外还有两个包,他们的画图功能也很强...

2856
来自专栏企鹅号快讯

浅谈 Web 图像优化

前端优化有很多,图像优化也是其中的一部分。无论是渐进增强还是优雅降级,图像优化成为了开发上不可忽视的一部分。 知其然,须知其所以然 图像优化的前提是需要了解图像...

2179

扫码关注云+社区

领取腾讯云代金券