Skip to content

模仿即刻 App 点赞与数字跳动效果,模仿小米运动首页转圈圈的烟花效果

Notifications You must be signed in to change notification settings

luciferldy/Bnimation

Repository files navigation

Bnimation

本项目来源于 HenCoder「仿写酷界面」征稿

现阶段实现了模仿即刻点赞效果以及数字跳动增长,小米运动首页烟花转圈圈(•̀⌄•́)效果。

即刻

即刻的点赞效果

下面是我实现的效果(最下为 TextView 自带的展示数字效果)

主要使用了 PropertyValuesHolderObjectAnimator 来编写动画。点赞效果可以分为手势图标的缩小放大(1.0->0.8->1.0,符合重力按下的效果),水纹图案的扩散并逐渐透明,手势上的 'shining' 图标的放大。通过 AnimatorSet 控制这三种动画的播放顺序。数字跳动效果通过比较新数字与旧数字之间的差异,从左侧开始第一个不同的数字以及后面的数字都需要跳动。如当前显示为 99,99+1=100,99 与 100 从第一位开始就不同,所以需要整体滚动。而 909+1=910 这种情况,只需要从第 2 位开始滚动即可。

滚动效果的实现主要使用

class Paint {
  ...
    public void drawText(@NonNull String text, int start, int end, float x, float y,
                         @NonNull Paint paint) {
      super.drawText(text, start, end, x, y, paint);
    }
  
}

这个函数。坐标 y 根据 view 的高度与字体的 ascentdescent 属性可以得到纵向中间的位置。坐标 x 使用 Paint 类的 getTextWidths() 获得每一位数字的宽度,每次累加即可(注意,0~9 每个数字的宽度不完全相等)。

图标来源于即刻 App 反编译后的资源包,布局也使用了即刻的布局(还是有些复杂的)

小米运动

小米运动效果

上述 Gif 图中前半段是一个烟花转圈圈的效果,表示正在连接到运动设备,后烟花渐隐,出现计时的圆圈。烟花转圈的效果比较难实现,所以下文主要讲这个部分的实现。

下面是我实现的效果:最下面是 ProgressBar 的展示。

我将这个动画分为两部分: ProgressBar 就是按钮下方展示的,还有烟花效果 Comet

ProgressBar 部分使用 Canvas + Path 完成,可以看到是 5 个圆圈按照某种梯度依次包含。每层圆圈使用 SweepGradient 实现了颜色渐变。这里面有个技巧:SweepGradient 颜色渐变如下分布

其构造方法不提供初始的旋转角度,需要使用 canvas.rotate() 方法对画布进行旋转。当然,每次操作前记得 canvas.save() 操作后 canvas.restore()

烟花的效果参考了这篇文章为你的EditText添加一个烟花效果Comet 类存储了所有的尘埃 Dust 实例,在每个位置都会诞生出 DustDust 中包含了在此位置辐射的所有 Element

值得注意的是模仿的是彗星运行的效果,所以每一处位置上辐射的 Element 范围在与前进方向相反的并且-30~30度内,大概就是这样的。

有点夸张了

ProgressBarComet 分开,由 ProgressBar 的滚动动画 ObjectAnimator 来驱动 Comet 产生 Dust 和执行 Dust 辐射效果。

图片来源于 小米运动 App 反编译后的资源包, HenCoder Android 开发进阶: 自定义 View 1-2 Paint 详解 关于 SweepGradient 的描述图片。

做完这个项目之后突然惊觉:使用 canvas 画出一个圆圈,并在某个位置固定产生 Dust 并执行辐射效果,然后对 canvas 整体旋转不就得了。。。

About

模仿即刻 App 点赞与数字跳动效果,模仿小米运动首页转圈圈的烟花效果

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages