分析
該控件由兩個部分組成叙淌，水果圖片ImageView和底部沿著Path繪制的文字蟹略，ImageView從最高點一邊旋轉(zhuǎn)一邊移動到最低點枝恋，移動到最低點時圖片資源改變并且從最低點再移動到最高點段标，此時下面的文字沿著不斷變化的Path開始不斷繪制沃但，看起來像是ImageView在接觸到文字后被反彈回去的效果。
ImageView和文字分別繪制
繪制底部文字
為了后面組合的方便拣挪，我們先繪制底部文字擦酌。
沿著Path繪制文字需要先定義一個Path，這里要主要用Path的二階貝賽爾曲線菠劝，也就是 quadTo 這個方法赊舶，繪制二階貝賽爾曲線需要用到三個點，其中兩個點用來固定曲線的起點和終點赶诊，另個一點用來控制曲線往哪里彎曲锯岖。
首先新建一個類繼承自View
在構(gòu)造方法中初始化二階貝賽爾曲線的三點：
start = PointF()
end = PointF()
control = PointF()
然后在onSizeChanged方法中給這三個點賦初始值：
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX = w / 2f
centerY = h / 2f
start.x = centerX - temp
start.y = centerY
end.x = centerX + temp
end.y = centerY
control.x = centerX
control.y = centerY
}
centerX 和 centerY 這個坐標(biāo)用來記錄控件的中心點，將start點定在中心點左邊甫何，end點定在中心點右邊，control點定在中心點遇伞，此時這三點處于一條直線上辙喂。
在onDraw方法中繪制文字：
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
var mPath = Path()
mPath.moveTo(start.x, start.y)
mPath.quadTo(control.x, control.y, end.x, end.y)
mPaint.textSize = 40f
mPaint.color = Color.BLUE
mPaint.style = Paint.Style.FILL
canvas.drawTextOnPath("H e l l o W o r l d", mPath, 40f, 20f, mPaint)
}
首先聲明一個Path對象，然后調(diào)用moveTo方法傳入start起點的左邊鸠珠，調(diào)用quadTo方法傳入控制點的坐標(biāo)和end終點坐標(biāo)巍耗，此時的曲線三點在同一直線上所以沒有任何彎曲，也就是處于直線狀態(tài)渐排，此時調(diào)用drawTextOnPath方法沿著Path繪制文字肯定也是直的炬太。
改變控制點的Y軸坐標(biāo)來改變曲線的彎曲程度：
var anim = ValueAnimator.ofFloat(0f, offsetY, -30f, 20f, -10f, 0f)
anim.setDuration(mDuration)
anim.repeatMode = ValueAnimator.RESTART
anim.repeatCount = ValueAnimator.INFINITE
anim.addUpdateListener(object: ValueAnimator.AnimatorUpdateListener{
override fun onAnimationUpdate(animation: ValueAnimator?) {
val currentValue = animation?.animatedValue as Float
control.y = centerY + currentValue
invalidate()
}
})
anim.start()
這里使用到屬性動畫ValueAnimator，通過anim不斷改變控制點的Y軸坐標(biāo)數(shù)值驯耻，然后調(diào)用invalidate方法繪制亲族。這里在ofFloat方法中傳入?yún)?shù)，這些參數(shù)分別表示將數(shù)值從0變化到最低點再變化到-30再變化到20再變化到-10最后變成0可缚，這是為了達(dá)到曲線從起始點“彈”到最低點后回到起始點之前“慣性”來回彈幾次的效果霎迫。
這樣該控件的文字部分就做好了，下面做上面ImageView部分帘靡。
繪制ImageView
這里再說一下ImageView平移+旋轉(zhuǎn)+變換圖片的思路知给，給ImageView加上平移和旋轉(zhuǎn)的動畫，在ImageView平移到最低點文字的位置時改變ImageView的圖片資源，再平移到起點涩赢，由于向下平移和向上平移所經(jīng)歷的時間都是總動畫時間的一半戈次，所以在動畫執(zhí)行到總時間的一半的時刻就是ImageView到達(dá)最低點的位置，在此時刻執(zhí)行底部文字的動畫就可以達(dá)到效果了筒扒。
由于剛剛做的文字部分是要和ImageView部分組合在一起的怯邪，所以這里新建一個類繼承自ViewGroup。
聲明一個ImageView對象
mImg = ImageView(mContext)
var llm = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
mImg.layoutParams = llm
mImg.scaleType = ImageView.ScaleType.CENTER
mImg.setImageResource(imgs[index])
addView(mImg)
給ImageView對象設(shè)置位置參數(shù)霎肯，并使用addView方法將該ImageView加入父容器中擎颖。
自定義ViewGroup需要實現(xiàn)onMeasure onLayout方法分別用來測量和擺放子View，這里onMeasure方法先忽略观游，直接重寫onLayout方法：
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
var view0 = getChildAt(0)
view0.layout(l, 0, r, 100)
var view1 = getChildAt(1)
view1.layout(l, 100, r, 400)
}
控件總共有包含兩個子View搂捧，第一個是上半部分的ImageView，第二部分是剛剛自定義的View懂缕，這里將第一個View的Top和Bottom設(shè)置為0和100允跑，表示高度為100；將第二個View的頂部挨著第一個View的底部搪柑，可以讓ImageView平移到最低點時可以“接觸”到文字部分聋丝。
給ImageView設(shè)置動畫
transAnim = ObjectAnimator.ofFloat(mImg, "translationY", 0f, tanslationY, 0f)
transAnim.repeatMode = ValueAnimator.RESTART
transAnim.repeatCount = ValueAnimator.INFINITE
rotateAnim = ObjectAnimator.ofFloat(mImg, "rotation", 0f, 360f)
rotateAnim.repeatMode = ValueAnimator.RESTART
rotateAnim.repeatCount = ValueAnimator.INFINITE
animSet = AnimatorSet()
animSet.play(rotateAnim).with(transAnim)
animSet.setDuration(mDuration)
fun changeImg(){
index++
mImg.setImageResource(imgs[index])
if (index == 3){
index = 0
}
}
fun startAnim(){
if (!isRunning) {
val mPathText = getChildAt(1) as MyPathText
transAnim.addListener(object : AnimatorListenerAdapter() {
override fun onAnimationStart(animation: Animator?) {
mHandler.postDelayed(object : Runnable {
override fun run() {
mPathText?.startAnim()
changeImg()
}
}, mDelay)
}
override fun onAnimationRepeat(animation: Animator?) {
mHandler.postDelayed(object : Runnable {
override fun run() {
changeImg()
}
}, mDelay)
}
})
animSet.start()
isRunning = true
}
通過AnimatorSet同時給ImageView設(shè)置平移、旋轉(zhuǎn)動畫工碾，給動畫加一個監(jiān)聽弱睦，使用Handler，在動畫開始執(zhí)行后一段時間發(fā)送一個延時渊额，延時后再執(zhí)行文字View的動畫况木，并且通過一個Int整數(shù)來記錄并調(diào)用changeImg方法為ImageView的圖片更換為資源圖片數(shù)組的另一個子元素。
