MISportsConnectWidget

Introduction: 【仿写酷界面】【HenCoder】仿小米运动的运动记录界面
More: Author   ReportBugs   
Tags:

【仿写酷界面】【HenCoder】仿小米运动的运动记录界面

2017.12.23 更新

奖品拿到啦~感谢投票的同学

耳机

由于 Google Clips 相机暂时没货,所以换成了 AirPods。

原作者对各个仿写项目的点评:关注我就能达到大师级水平,这话我终于敢说了

介绍

本项目为 HenCoder仿写酷界面 投稿,投稿项目为:3.小米运动首页顶部的运动记录界面。 HenCoder 有多牛逼呢?就是这个项目仅靠它的 4 篇自定义控件文章就可以完成了。

平时工作没什么机会做 UI,这次投稿也可以说是很想要相机用心了!

效果图

原版效果:

正版

模仿效果:

盗版

对不起放错了:

真·盗版

工程文件清单


app: 使用控件的模块
    MainActivity:主界面

misportsconnectview
    MISportsConnectView:小米运动控件
        AnimationState:动画状态机
        AnimationThread:动画控制线程

    FireworksCircleGraphics:烟花圆环实现类,代码较多单独独立出来
        StartArgument:烟花圆环上的星星,负责存储当前运动状态及下一帧运动状态
        StartArgument:烟花圆环上的线条,负责存储当前运动状态及下一帧运动状态

    SportsData:view 使用到的数据的 bean
    LogUtils:日志工具类
    DensityUtils:dp,px,sp 的转换工具类

比较满意的地方

  • 做了一些性能优化
  • 做了一些工程化处理,可以直接用啦
  • 相关的界面参数都提取成常数了,没有 magic number,方便修改参数
  • 给烟花圆环加了一些骚动画
  • 加了新版小米运动圆环会微微颤抖的类似海市蜃楼的骚效果

不满意的地方

  • 为了优化性能,动画参数计算限制了 1 秒 60 次,后面所有的参数都是基于这个设定来设置的。结果发现会导致很多计算出问题,比如加速度参数一下子超过了临界值,变成上面那个失败的动图那样天外飞仙。
  • 瞎掰一套动画公式,导致调试参数调试了很久
  • 原控件的大圆环上的光晕看起来应该是几个半透明椭圆的叠加,我想着能不能做的更好看一点,结果各种碰壁。。还是太年轻了。最后用回原方案

后记

水平不够,时间来凑

这三个月学到很多,比心!

Apps
About Me
GitHub: Trinea
Facebook: Dev Tools