仿抖音的點贊效果

摘要： android.jpg 最近抖音App是真的很火，作為一個小宅Android Coder，看到抖音那麼火肯定是要下載觀摩的，被上面眾多妹子吸引的同時，還是想幹點啥。於是就有了這篇文章，這次我們就來仿一個抖音App的點贊效果！ 點贊按鈕效果 抖...

最近抖音App是真的很火，作為一個小宅Android Coder，看到抖音那麼火肯定是要下載觀摩的，被上面眾多妹子吸引的同時，還是想幹點啥。於是就有了這篇文章，這次我們就來仿一個抖音App的點贊效果！

點贊按鈕效果

抖音的點贊效果是由右側的桃心點贊和螢幕的點選構成，右側的點選後為點贊狀態並有點贊動畫，再次點選取消點贊。

此處我們觀察效果基本和此前用過的一個三方庫比較相似，此處就先又此代替，後面有時間再進行完善。

該庫為 ofollow,noindex">Like Button ,使用方式很簡單，如下：

<com.like.LikeButton
android:id="@+id/likeBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
app:icon_size="40dp"
app:icon_type="heart"
app:like_drawable="@mipmap/ic_heart_on"
app:unlike_drawable="@mipmap/ic_heart_off" />

LikeButton具有以下屬性,使用時可自行去檢視

<com.like.LikeButton
app:icon_type="Star"
app:circle_start_color="@color/colorPrimary"
app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"
app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"
app:icon_size="25dp"
app:liked="true"
app:anim_scale_factor="2"
app:is_enabled="false"/>

設定 LikeButton 的監聽事件：

likeBtn.setOnLikeListener(object : OnLikeListener {
override fun liked(p0: LikeButton?) {
toast("已點贊~~")
}

override fun unLiked(p0: LikeButton?) {
toast("取消點贊~~")
}

})

我們可以看一下點贊按鈕的點贊效果

和抖音的還是有點區別的，後續完善

螢幕點贊

分析抖音的螢幕點贊由幾個部分組合而成（紅心可自繪，也可以直接使用圖片）

1、剛開始顯示的時候，有個由大到小縮放動畫

2、透明度變化

3、向上平移

4、由小到大的縮放

5、剛開始顯示的時候有個小小的偏移，避免每個紅心在同一個位置

實現過程

獲取紅心

private var icon: Drawable = resources.getDrawable(R.mipmap.ic_heart)

監聽Touch事件，並在按下位置新增View

override fun onTouchEvent(event: MotionEvent?): Boolean {
if (event?.action == MotionEvent.ACTION_DOWN) {//按下時在Layout中生成紅心
val x = event.x
val y = event.y
addHeartView(x, y)
onLikeListener()
}
return super.onTouchEvent(event)
}

為紅心新增一個隨機的偏移（此處為-10~10）

img.scaleType = ImageView.ScaleType.MATRIX
val matrix = Matrix()
matrix.postRotate(getRandomRotate())//設定紅心的微量偏移

設定一開始的縮放動畫

private fun getShowAnimSet(view: ImageView): AnimatorSet {
// 縮放動畫
val scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1.2f, 1f)
val scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1.2f, 1f)
val animSet = AnimatorSet()
animSet.playTogether(scaleX, scaleY)
animSet.duration = 100
return animSet
}

設定慢慢消失時的動畫

private fun getHideAnimSet(view: ImageView): AnimatorSet {
// 1.alpha動畫
val alpha = ObjectAnimator.ofFloat(view, "alpha", 1f, 0.1f)
// 2.縮放動畫
val scaleX = ObjectAnimator.ofFloat(view, "scaleX", 1f, 2f)
val scaleY = ObjectAnimator.ofFloat(view, "scaleY", 1f, 2f)
// 3.translation動畫
val translation = ObjectAnimator.ofFloat(view, "translationY", 0f, -150f)
val animSet = AnimatorSet()
animSet.playTogether(alpha, scaleX, scaleY, translation)
animSet.duration = 500
return animSet
}

設定動畫關係，並且在動畫結束後Remove該紅心

val animSet = getShowAnimSet(img)
val hideSet = getHideAnimSet(img)
animSet.start()
animSet.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
super.onAnimationEnd(animation)
hideSet.start()
}
})
hideSet.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationEnd(animation: Animator?) {
super.onAnimationEnd(animation)
removeView(img)//動畫結束移除紅心
}
})

最終效果如下：

最後附上GitHub地址 DouYinLike ，希望各位看官不吝Star~~~