您的当前位置:AG视讯 > 2019城市篮球大赛 >

用Kotlin实现抖音爆红的文字时钟征服产品小姐姐

时间:2019-10-13

  

用Kotlin实现抖音爆红的文字时钟征服产品小姐姐

  经过第一步,可以在 AS 的 Xml Preview 中看到一屏黑色 + 一条从屏幕中心到右边界的红线。(一眼望去,还是挺美的) 该方法接收一个degrees: Float参数,是控制「时圈」整体的旋转的,后文就是不断改变该值,而产生动画效果的。并且因为三个圈的动画方向都是逆时针,所以这个degrees是个始终会是个负数。 个人能力有限,如有不正之处欢迎大家批评指出,我会虚心接受并第一时间修改,以不误导大家。写作时参考以下文章,特别感谢。返回搜狐,查看更多 绘制思路就是 for 循环 12 次,每次将画布旋转30° 乘以 i,然后在指定位置绘制文字,12 次后刚好一个圆圈。 每秒钟「秒圈」走一下,这一下的旋转角度为360°/60=6°,并且走这一下的时候有个线性旋转过去的动画效果。 然而实现两者的基础便是拿起CanvasPaint等把它绘制出来,所以「上篇」我先用自定义 View 的方式把时钟画出来,在 Activity 中展示效果。「下篇」的时候再把该 View 结合LiveWallPaper设置到壁纸。抖音爆红文字时钟项目源码() 基于我们已经知道了,时钟动起来的本质就是在一段时间内(比如 150ms)不断的改变参数degrees: Float 的值并触发重绘方法,这样就产生了人眼看到的动画效果。 所以,我们想让「秒圈」(三个圈的代表)转的更线性更优雅一点,就可以在要开始绘制新的一秒的时候,在前 150ms线°。 //iDeg控制绘制时顺时针,所以两者和为0时,刚好在x正半轴上,也就是起始绘制位置。 其中要说一下mPaint.getBottomedYmPaint.getToppedY, 这是两个扩展到 Paint 画笔上的两个 kotlin 方法。他们的作用是为了处理绘制文字时与 x 轴的对齐关系。canvas.drawText方法的第三个参数是y 坐标,但这个指的是文字的Baseline 的 y 坐标, 所以写了工具方法来得到矫正后的y 坐标。(这里就只抛出这个点吧,具体实现原理可先查阅 Paint 类的相关 API 就会明白,文末会贴出我拜读的文章链接) //这里将三个角度与实际时间关联起来,当前几点几分几秒,就把相应的圈逆时针旋转多少 周末在家刷抖音的时候看到了这款网红时钟,都是 Android 平台的,想来何不自己实现一把。看抖音里大家发的视频,这款时钟基本分两类,一类是展示在「壁纸」上,带你去坐长毛象公车拿经验一类是展示在「锁屏」上。 基本是将画布背景填充黑色,然后将画布的原点移动到 View 大小的中心,这样方便思维理解与绘制。 每秒钟「秒圈」走一下,这一下的旋转角度为360°/60=6°,并且走这一下的时候有个线性旋转过去的动画效果。 那么首先定义三个角度的全局变量,并把他们与实际的时间关联起来,然后每隔一秒触发一次 View 的重绘即可。 然后只需在 Activity 中使用 timer 每秒钟刷新一次 View 即可。效果如下图,会发现转是转起来的,但是却每秒一跳。再看一下咱们当时的分析: 那么如何可以让时钟转起来呢?我们再看一下onDraw中的代码,绘制三个圈的方法都会接收一个相应的degrees: Float参数,这个是控制一个圈的整体旋转的,而且要逆时针转,所以始终得是负数。

北大医疗鲁中医院 发财树之家 中国文化网 上海硕博公司 华恒生物官网 武汉未来科技城 百度
联系我们

400-500-8888

公司服务热线

AG视讯