Android 自定义view-点赞效果

1.前言

看到常用的应用里的点赞效果不错，决定学习(copy)一下。

2.效果

原本效果：

我的效果：

 

差不太多，数字部分太单调了，不过原版没有动画，我也不知道怎么copy。

总共分为三部分

一个拇指View，需要变大变小变颜色

一个数字View，加减数字，变颜色

一个布局包含上面两部分

3.思路

通过录屏，然后放慢看，动画效果就清晰了。

灰色拇指缩小 -> 切换成橙色拇指，并且放大，还会扬起，直到比平常要大些，最后缩小并摆正，还会小晃一下。

知道过程后，就比较好做了

给view设置一个属性，然后通过ObjectAnimator动画这个属性，并在setter方法里根据属性值做一些事情，最后调用invalidate()触发draw，根据需要多设置几个动画配合使用。

// 动画
val unCheckedScaleToMin = ObjectAnimator.ofFloat(
    this,
    "uncheckedThumbScale",
    SCALE_NORMAL,
    SCALE_MIN
)
unCheckedScaleToMin.duration = DURATION_SCALE

// 动画开始
unCheckedScaleToMin.start()

// setter方法里计算等会要draw的rect
private fun setUncheckedThumbScale(arg: Float) {
    val x = (1 - arg) / 2
    val scaleLeft = width * x
    val scaleTop = height * x
    val scaleRight = width * (1 - x)
    val scaleBottom = height * (1 - x)
    // rect的兄弟rectf，int和float的区别
    mRectF.set(scaleLeft, scaleTop, scaleRight, scaleBottom)
    mThumbBitmap = mUnCheckedBitmap
    // 调用invalidate才会onDraw()
    postInvalidate()
}

// onDraw()
canvas?.drawBitmap(mThumbBitmap, null, mRectF, mPaint)

流程上比较简单，但是有很多细节在写的时候才会注意到。

给布局设置了padding，会不会影响拇指的位置？

一些生动的动画效果可以通过interpolator实现。

动画的属性不单单是Int、Float等类型咋办，可以用ofObject，然后自己写一个Evaluator，可以自由的动画任何属性。

4.代码

ThumbsUp: 自定义View-点赞效果 (gitee.com)

自定义 View - 扔物线 (Page 2) (rengwuxian.com)