安卓 : Animate Rating Bar to expand and shrink each star

Question

我有一个评级栏，它显示 5 颗星，我想通过归档从 0 到 5 进行动画处理，具体取决于传递到 View 中的评级值，并且每颗星的大小扩大，然后缩小到每颗星的原始大小已着色/填充。
例如，5 颗星中的所有 4 颗星都应该以 3.5 的星级为例进行扩展和缩小。
我已经用下面的代码将它从 0 填充到 3.5，但不知道如何扩展每个应用了填充的星星？
这可能吗？
这是我到目前为止所拥有的:

ObjectAnimator.ofFloat(starRating, "rating", 0f, 3.5f).apply {
    duration = animDuration
    addListener(onEachStarFilled?/onEachFrame?? = {
        //todo expand each star? how?
    })
    start()
}

Answer 1

添加一个容器来保存五个带有默认图像的 ImageView 。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/start_ratting"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent">
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:src="@drawable/empty"
        android:id="@+id/star_1"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:src="@drawable/empty"
        android:scaleType="fitCenter"
        android:id="@+id/star_2"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:src="@drawable/empty"
        android:id="@+id/star_3"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:src="@drawable/empty"
        android:id="@+id/star_4"/>
    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/empty"
        android:background="@android:color/transparent"
        android:scaleType="fitCenter"
        android:id="@+id/star_5"/>
</LinearLayout>

然后添加动画师

private fun expandHorizontal(v: ImageView, image: Drawable) {
    val width: Int = v.width
    v.visibility = View.VISIBLE
    v.layoutParams.width = 0
    v.setImageDrawable(image)
    val valueAnimator = ValueAnimator.ofInt(0, width)
    valueAnimator.addUpdateListener { animation ->
        v.layoutParams.width = animation.animatedValue as Int
        v.requestLayout()
    }
    valueAnimator.interpolator = DecelerateInterpolator()
    valueAnimator.duration = VIEW_TRANSITION_TIME
    valueAnimator.start()
}

在需要时调用设置星值

 private fun setStarValue(ratting: Double){
    star1.visibility = View.INVISIBLE
    star2.visibility = View.INVISIBLE
    star3.visibility = View.INVISIBLE
    star4.visibility = View.INVISIBLE
    star5.visibility = View.INVISIBLE
    var i = 0
    for(i in 0..5){
        when(i){
            0->{
                val res = ratting - i;
                if(res >= 1){
                    Log.d(TAG, "start 1")
                    getDrawable(R.drawable.full)?.let { expandHorizontal(star1, it) }
                }
                else if(res > 0 && res < 1){
                    Log.d(TAG, "start half")
                    getDrawable(R.drawable.half)?.let { expandHorizontal(star1, it) }
                }
                else{
                    Log.d(TAG, "no start")
                    getDrawable(R.drawable.empty)?.let { expandHorizontal(star1, it) }
                }
            }
            1 -> {
                val res = ratting - i;
                if(res >= 1){
                    Log.d(TAG, "start 2")
                    getDrawable(R.drawable.full)?.let { expandHorizontal(star2, it) }
                }
                else if(res > 0 && res < 1){
                    Log.d(TAG, "start two and half")
                    getDrawable(R.drawable.half)?.let { expandHorizontal(star2, it) }
                }
                else{
                    Log.d(TAG, "no start")
                    getDrawable(R.drawable.empty)?.let { expandHorizontal(star2, it) }
                }
            }
            2->{
                val res = ratting - i;
                if(res >= 1){
                    Log.d(TAG, "start 3")
                    getDrawable(R.drawable.full)?.let { expandHorizontal(star3, it) }
                }
                else if(res > 0 && res < 1){
                    Log.d(TAG, "start three and half")
                    getDrawable(R.drawable.half)?.let { expandHorizontal(star3, it) }
                }
                else{
                    Log.d(TAG, "no start")
                    getDrawable(R.drawable.empty)?.let { expandHorizontal(star3, it) }
                }
            }
            3 -> {
                val res = ratting - i;
                if(res >= 1){
                    Log.d(TAG, "start 4")
                    getDrawable(R.drawable.full)?.let { expandHorizontal(star4, it) }
                }
                else if(res > 0 && res < 1){
                    Log.d(TAG, "start 4 and half")
                    getDrawable(R.drawable.half)?.let { expandHorizontal(star4, it) }
                }
                else{
                    Log.d(TAG, "no start")
                    getDrawable(R.drawable.empty)?.let { expandHorizontal(star4, it) }
                }
            }
            4 ->{
                val res = ratting - i;
                if(res >= 1){
                    Log.d(TAG, "start 5")
                    getDrawable(R.drawable.full)?.let { expandHorizontal(star5, it) }
                }
                else if(res > 0 && res < 1){
                    Log.d(TAG, "start three and half")
                    getDrawable(R.drawable.half)?.let { expandHorizontal(star5, it) }
                }
                else{
                    Log.d(TAG, "no start")
                    getDrawable(R.drawable.empty)?.let { expandHorizontal(star5, it) }
                }
            }
        }
    }
}

您可以在 expandHorizo​​ntal 中选择动画