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

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


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

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

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

运行效果

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

自定义TypeEvaluator的构造方法

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

贝塞尔曲线

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

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

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

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

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

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

2756
来自专栏企鹅号快讯

浅谈 Web 图像优化

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

2099
来自专栏42度空间

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

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

41810
来自专栏Python小屋

Python实现批量图片添加数字水印

之前写过一个类似的代码,是把水印信息打散以后随机添加到原图中,并提供了水印信息的提取功能,请参考:Python实现图像空域随机水印加入与提取。本文代码功能:为指...

3213
来自专栏京东技术

服务器端的图像处理 | 请召唤ImageMagick助你解忧

在客户端我们可以用 PhotoShop 等 GUI 工具处理静态图片或者动态 GIF 图片,不过在服务器端对于 WEB 应用程序要处理图片格式转换,缩放裁剪,翻...

1821
来自专栏木头编程 - moTzxx

HTML 图片映射<map>标签整理

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1424
来自专栏逍遥剑客的游戏开发

Direct3D学习(一):3D Sierpinski镂垫绘制

1899
来自专栏HenCoder

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

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

1022
来自专栏练小习的专栏

SVG图形绘制入门第一弹

之前很长一段时间,我是不重视SVG的,认为他就是在AI里画画,然后导出来做个矢量图标。直到我在上家公司遇到图表的绘制,因为不会写不得已而拿插件实现,而插件绘制的...

2267

扫码关注云+社区