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

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


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

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

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

运行效果

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

自定义TypeEvaluator的构造方法

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

贝塞尔曲线

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

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Alan的UX笔记

UX笔记#01 |按钮用图标还是文字?

1023
来自专栏企鹅号快讯

为什么CSS Grid在创建布局上比Bootstrap更好

CSS Grid是一种在网络上创建布局的新方法。在我们第一次使用浏览器原生的CSS网格布局后,发现这种方式给我们带来太多好处了。 特别是如果将CSS Grid与...

2416
来自专栏web前端教室

什么生命周期,在我看来就是各种回调 &&电商项目作业检查 -- 张xx

今天咱们的零基础课讲到了react的生命周期,什么三种状态啊,五种处理事件啊,函数的名字都特别的长。还有表单应用和react中哪使用ajax方法,以及get回来...

1648
来自专栏前端知识分享

第8天:CSS制作导航栏

今天主要学习了网页导航栏的制作。注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹...

471
来自专栏何俊林

Android TV开发总结(五)TV上屏幕适配总结

前言:前面几篇总结一些TV上的小Sample,开源到GitHub: https://github.com/hejunlin2013/TVSample, 点击”阅...

2309
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

1755
来自专栏知晓程序

如何用 1 张图说 100 次我爱你?这个小程序帮你搞定

本期,知晓程序推荐的「字云」小程序,就能帮你用文字一键生成「图文并茂」的个性图片。

834
来自专栏张俊红

爬虫进阶(四)

总第71篇 01|背景: 前段时间给人填报志愿,无意间发现这个网站的:http://gkcx.eol.cn/soudaxue/queryschoolgufen....

3375
来自专栏HTML5学堂

移动端H5知识[系列] - fixed定位模式与其他

TML5学堂:移动端H5知识普及 - fixed定位模式与其他。虽然知识小,但是不得不承认的是,它们很重要~! 本文会讲解到fixed的定位模式,另外,关于li...

2765
来自专栏机器学习算法与Python学习

给Python初学者:如何用 Django 写一个36Kr

关键字全网搜索最新排名 【机器学习算法】:排名第一 【机器学习】:排名第二 【Python】:排名第三 【算法】:排名第四 首先需要说明一下,这篇教程是写给初学...

3407

扫码关注云+社区