旋转风车实现效果
![21808f96d8933c02ce91199c4add3cc9.gif](https://i-blog.csdnimg.cn/blog_migrate/50ef82f5c2b9af5896d2adc2d621c238.gif)
实现方案
对于风车的立柱部分,采用一张固定背景图;对于风车上面旋转部分,采用一张图,通过安卓属性动画进行旋转。注意点: 因为是采用两张图叠加而形成的效果,所以需要注意调整两张图的相对位置,使之刚好形成风车旋转效果。
主要代码
- 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}
- 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)}
- view_double_windmill.xml
<?xml version="1.0" encoding="utf-8"?>
lib库集成方法
- 在工程根目录下build.gradle文件中增加jitpack仓库地址:
allprojects { repositories { ... maven { url 'https://jitpack.io' } }}
- 在app工程下build.gradle文件中增加依赖:
dependencies { implementation 'com.github.cxyzy1:windmill:1.0.0'}
完整源代码
https://github.com/cxyzy1/windmill