安卓实现旋转风车动画(仿华为天气预报)

旋转风车实现效果

实现方案

对于风车的立柱部分，采用一张固定背景图； 对于风车上面旋转部分，采用一张图，通过安卓属性动画进行旋转。 注意点： 因为是采用两张图叠加而形成的效果，所以需要注意调整两张图的相对位置，使之刚好形成风车旋转效果。

主要代码

1. BaseWindmillView.kt

abstract class BaseWindmillView constructor(context: Context, attrs: AttributeSet? = null) :
    LinearLayout(context, attrs) {

    private fun getRotateAnimation(@IntRange(from = 1, to = 10) speed: Int): RotateAnimation {
        val animateTime = getAnimateTimeFromSpeed(speed)
        val animation = RotateAnimation(
            0f, 360f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
        )
        animation.fillAfter = true
        animation.repeatCount = Animation.INFINITE
        animation.duration = animateTime
        animation.interpolator = LinearInterpolator()
        return animation
    }

    private fun getAnimateTimeFromSpeed(speed: Int): Long {
        return (10 * 1000 / speed).toLong()
    }

    fun startRotate(@IntRange(from = 1, to = 10) speed: Int) {
        getToRotateViews().forEach {
            it.clearAnimation()
            it.startAnimation(getRotateAnimation(speed)) }
    }

    abstract fun getToRotateViews(): List
}

2. DoubleWindmillView.kt

class DoubleWindmillView constructor(context: Context, attrs: AttributeSet? = null) :
    BaseWindmillView(context, attrs) {
    init {
        LayoutInflater.from(context).inflate(R.layout.view_double_windmill, this, true)
    }

    override fun getToRotateViews()= listOf(windmillBladeIv,smallWindmillBladeIv)

}

3. view_double_windmill.xml

lib库集成方法

1. 在工程根目录下build.gradle文件中增加jitpack仓库地址：

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

2. 在app工程下build.gradle文件中增加依赖：

dependencies {
    implementation 'com.github.cxyzy1:windmill:1.0.0'
}

完整源代码

https://github.com/cxyzy1/windmill