第一版发布，功能有 普通的动画效果（比例缩放） 掘金动画效果

app/src/main/java/com/wanglu/wlikeview/MainActivity.kt

@@ -2,12 +2,27 @@ package com.wanglu.wlikeview
 
 import android.os.Bundle
 import android.support.v7.app.AppCompatActivity
+import com.wanglu.lib.juejin.WJueJinLikeAnim
+import kotlinx.android.synthetic.main.activity_main.*
 
 class MainActivity : AppCompatActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_main)
 
+        var liked = false
+        val likeAnim = WJueJinLikeAnim.Builder(iv, R.mipmap.fd_zan_press).create()
+        iv.setOnClickListener {
+            if(liked){
+                iv.setImageResource(R.mipmap.fd_zan)
+                liked = false
+            }else{
+                iv.setImageResource(R.mipmap.fd_zan_press)
+                liked = true
+                likeAnim.show()
+            }
+        }
+
     }
 }

app/src/main/res/layout/activity_main.xml

@@ -5,12 +5,12 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#fff"
     tools:context=".MainActivity">
 
-    <com.wanglu.lib.juejin.DotsView
-        android:layout_width="wrap_content"
+    <ImageView
+        android:id="@+id/iv"
+        android:layout_width="25dp"
+        android:layout_height="25dp"
         android:layout_gravity="center"
-        android:layout_height="wrap_content"/>
-
+        android:src="@mipmap/fd_zan"/>
 </FrameLayout>

lib/src/main/AndroidManifest.xml

@@ -1,2 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="com.wanglu.lib"/>
+          package="com.wanglu.lib">
+
+    <application android:hardwareAccelerated="true"/>
+</manifest>

lib/src/main/java/com/wanglu/lib/juejin/CircleView.kt

@@ -1,5 +1,7 @@
 package com.wanglu.lib.juejin
 
+import android.animation.Animator
+import android.animation.AnimatorSet
 import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Canvas
@@ -13,17 +15,21 @@ class CircleView : View {
     private val outerCirclePaint = Paint()
     private val innerCirclePaint = Paint()
 
-    private var viewWidth = 174
-    private var viewHeight = 174
+    private var viewWidth = 0
+    private var viewHeight = 0
 
     private var outerCircleColor = Color.parseColor("#5BA2E9")
     private var innerCircleColor = Color.parseColor("#48CFC2")
-    
+
     private var outerCircleRadius = 0f
     private var innerCircleRadius = 0f
-    private var outerCircleMaxRadius = viewWidth / 2f - 30
-    private var innerCircleMaxRadius = viewWidth / 2f - 35
+    private var outerStrokeWidth = 10f
+    private var outerCircleMaxRadius = 0f
+    private var innerCircleMaxRadius = 0f
+
 
+    private var animSet = AnimatorSet()
+    private lateinit var dv: DotsView
 
     constructor(context: Context?) : this(context, null)
     constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs, 0)
@@ -33,32 +39,25 @@ class CircleView : View {
         outerCirclePaint.color = outerCircleColor
         outerCirclePaint.isAntiAlias = true
         outerCirclePaint.style = Paint.Style.STROKE
-        outerCirclePaint.strokeWidth = 5f
+        outerCirclePaint.strokeWidth = outerStrokeWidth
 
         innerCirclePaint.color = innerCircleColor
         innerCirclePaint.isAntiAlias = true
         innerCirclePaint.style = Paint.Style.FILL
-
-
-        val outerRadiusAnim = ValueAnimator.ofFloat(outerCircleRadius, outerCircleMaxRadius)
-        outerRadiusAnim.duration = 400
-        outerRadiusAnim.addUpdateListener{
-            outerCircleRadius = it.animatedValue as Float
-            invalidate()
-        }
-
-        val innerRadiusAnim = ValueAnimator.ofFloat(outerCircleRadius, innerCircleMaxRadius)
-        innerRadiusAnim.duration = 400
-        innerRadiusAnim.addUpdateListener{
-            outerCircleRadius = it.animatedValue as Float
-            invalidate()
-        }
+
+    }
+
+
+    fun startAnim() {
+        animSet.start()
     }
 
 
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec)
-        setMeasuredDimension(viewWidth, viewHeight)
+        if (viewWidth != 0 && viewHeight != 0) {
+            setMeasuredDimension(viewWidth, viewHeight)
+        }
     }
 
     override fun onDraw(canvas: Canvas?) {
@@ -74,6 +73,100 @@ class CircleView : View {
     fun setSize(width: Int, height: Int) {
         this.viewWidth = width
         this.viewHeight = height
+        outerStrokeWidth = (viewWidth / 2 * 0.1).toFloat()
+        outerCircleMaxRadius = viewWidth / 2f - 30
+        innerCircleMaxRadius = outerCircleMaxRadius - outerStrokeWidth / 2
+
+
+        val outerRadiusAnim = ValueAnimator.ofFloat(outerCircleRadius, outerCircleMaxRadius)
+        outerRadiusAnim.duration = 200
+        outerRadiusAnim.addUpdateListener {
+            outerCircleRadius = it.animatedValue as Float
+            invalidate()
+        }
+
+        val innerRadiusAnim = ValueAnimator.ofFloat(innerCircleRadius, innerCircleMaxRadius)
+        innerRadiusAnim.duration = 200
+        innerRadiusAnim.addUpdateListener {
+            innerCircleRadius = it.animatedValue as Float
+            invalidate()
+        }
+
+        val outerStrokeWidthAnim = ValueAnimator.ofFloat(outerStrokeWidth, 0f)
+        outerStrokeWidthAnim.duration = 100
+        outerStrokeWidthAnim.addUpdateListener {
+            outerStrokeWidth = it.animatedValue as Float
+            outerCirclePaint.strokeWidth = outerStrokeWidth
+            invalidate()
+        }
+
+        innerRadiusAnim.addListener(object : Animator.AnimatorListener {
+            override fun onAnimationRepeat(animation: Animator?) {
+
+            }
+
+            override fun onAnimationCancel(animation: Animator?) {
+            }
+
+            override fun onAnimationStart(animation: Animator?) {
+            }
+
+            override fun onAnimationEnd(animation: Animator?) {
+                innerCirclePaint.color = Color.TRANSPARENT
+                invalidate()
+            }
+
+        })
+
+        outerRadiusAnim.addListener(object : Animator.AnimatorListener {
+            override fun onAnimationRepeat(animation: Animator?) {
+
+            }
+
+            override fun onAnimationCancel(animation: Animator?) {
+            }
+
+            override fun onAnimationStart(animation: Animator?) {
+            }
+
+            override fun onAnimationEnd(animation: Animator?) {
+                innerCirclePaint.color = Color.TRANSPARENT
+                invalidate()
+            }
+
+        })
+
+
+
+        animSet.play(outerRadiusAnim).with(innerRadiusAnim).before(outerStrokeWidthAnim)
+        animSet.addListener(object : Animator.AnimatorListener {
+            override fun onAnimationRepeat(animation: Animator?) {
+
+            }
+
+            override fun onAnimationCancel(animation: Animator?) {
+                outerCircleRadius = 0f
+                innerCircleRadius = 0f
+                outerStrokeWidth = (viewWidth / 2 * 0.1).toFloat()
+                outerCirclePaint.strokeWidth = outerStrokeWidth
+                innerCirclePaint.color = innerCircleColor
+                dv.cancelAnim()
+            }
+
+            override fun onAnimationStart(animation: Animator?) {
+                dv.show()
+            }
+
+            override fun onAnimationEnd(animation: Animator?) {
+                outerCircleRadius = 0f
+                innerCircleRadius = 0f
+                outerStrokeWidth = (viewWidth / 2 * 0.1).toFloat()
+                outerCirclePaint.strokeWidth = outerStrokeWidth
+                innerCirclePaint.color = innerCircleColor
+                dv.dismiss()
+            }
+
+        })
         invalidate()
     }
 
@@ -86,4 +179,15 @@ class CircleView : View {
         invalidate()
     }
 
+    fun cancelAnim() {
+        animSet.cancel()
+    }
+
+    fun isAnimRunning(): Boolean {
+        return animSet.isRunning
+    }
+
+    fun setDv(dv: DotsView){
+        this.dv = dv
+    }
 }

lib/src/main/java/com/wanglu/lib/juejin/DotsView.kt

@@ -1,5 +1,7 @@
 package com.wanglu.lib.juejin
 
+import android.animation.Animator
+import android.animation.AnimatorSet
 import android.animation.ValueAnimator
 import android.content.Context
 import android.graphics.Canvas
@@ -14,11 +16,11 @@ class DotsView : View {
     private val smallDotPaint = Paint()
 
 
-    private var viewWidth = 174
-    private var viewHeight = 174
+    private var viewWidth = 0
+    private var viewHeight = 0
     private var centerX = 0
     private var centerY = 0
-    private var bitDotColor = Color.parseColor("#48CFC2")
+    private var bigDotColor = Color.parseColor("#48CFC2")
     private var smallDotColor = Color.parseColor("#5BA2E9")
 
     private var bigDotRadius = MAX_BIG_DOT_RADIUS   // 大点的半径
@@ -38,11 +40,11 @@ class DotsView : View {
 
 
     init {
-        bigDotPaint.color = bitDotColor
+        bigDotPaint.color = Color.TRANSPARENT
         bigDotPaint.isAntiAlias = true
         bigDotPaint.style = Paint.Style.FILL
 
-        smallDotPaint.color = smallDotColor
+        smallDotPaint.color = Color.TRANSPARENT
         smallDotPaint.isAntiAlias = true
         smallDotPaint.style = Paint.Style.FILL
     }
@@ -52,7 +54,7 @@ class DotsView : View {
      * 设置颜色
      */
     fun setColor(color1: Int, color2: Int){
-        bitDotColor = color1
+        bigDotColor = color1
         smallDotColor = color2
         invalidate()
     }
@@ -67,15 +69,23 @@ class DotsView : View {
         invalidate()
     }
 
+    fun show(){
+        bigDotPaint.color = bigDotColor
+        smallDotPaint.color = smallDotColor
+        invalidate()
+    }
+
+
+    private var animSet = AnimatorSet()
 
     /**
      * 消失
      */
     fun dismiss(){
         val bigDotAnim = ValueAnimator.ofFloat(bigDotRadius, 0f)
         val smallDotAnim = ValueAnimator.ofFloat(smallDotRadius, 0f)
-        bigDotAnim.duration = 400
-        smallDotAnim.duration = 400
+        bigDotAnim.duration = 300
+        smallDotAnim.duration = 300
         bigDotAnim.addUpdateListener {
             bigDotRadius = it.animatedValue as Float
             invalidate()
@@ -86,19 +96,47 @@ class DotsView : View {
             invalidate()
         }
 
-        bigDotAnim.start()
-        smallDotAnim.start()
+        animSet.playTogether(bigDotAnim, smallDotAnim)
+        animSet.addListener(object : Animator.AnimatorListener{
+            override fun onAnimationRepeat(animation: Animator?) {
+
+            }
+
+            override fun onAnimationCancel(animation: Animator?) {
+                bigDotPaint.color = Color.TRANSPARENT
+                smallDotPaint.color = Color.TRANSPARENT
+
+                bigDotRadius = MAX_BIG_DOT_RADIUS
+                smallDotRadius = MAX_SMALL_DOT_RADIUS
+            }
+
+            override fun onAnimationStart(animation: Animator?) {
+            }
+
+            override fun onAnimationEnd(animation: Animator?) {
+                // 动画结束后还原
+                bigDotPaint.color = Color.TRANSPARENT
+                smallDotPaint.color = Color.TRANSPARENT
+
+                bigDotRadius = MAX_BIG_DOT_RADIUS
+                smallDotRadius = MAX_SMALL_DOT_RADIUS
+                invalidate()
+            }
+
+        })
+        animSet.start()
     }
 
 
     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
         super.onMeasure(widthMeasureSpec, heightMeasureSpec)
 
         // 测量的时候如果宽高都不为0再设置
-//        if (width != 0 && height != 0)
-        setMeasuredDimension(viewWidth, viewHeight)
-        centerX = viewWidth / 2
-        centerY = viewHeight / 2
+        if (viewWidth != 0 && viewHeight != 0) {
+            setMeasuredDimension(viewWidth, viewHeight)
+            centerX = viewWidth / 2
+            centerY = viewHeight / 2
+        }
     }
 
 
@@ -121,5 +159,8 @@ class DotsView : View {
 
     }
 
+    fun cancelAnim(){
+        animSet.cancel()
+    }
 
 }