动画动图.gif
分析
该控件由两个部分组成，水果图片ImageView和底部沿着Path绘制的文字，ImageView从最高点一边旋转一边移动到最低点，移动到最低点时图片资源改变并且从最低点再移动到最高点，此时下面的文字沿着不断变化的Path开始不断绘制，看起来像是ImageView在接触到文字后被反弹回去的效果。
ImageView和文字分别绘制
绘制底部文字
为了后面组合的方便，我们先绘制底部文字。
沿着Path绘制文字需要先定义一个Path，这里要主要用Path的二阶贝赛尔曲线，也就是 quadTo 这个方法，绘制二阶贝赛尔曲线需要用到三个点，其中两个点用来固定曲线的起点和终点，另个一点用来控制曲线往哪里弯曲。
首先新建一个类继承自View
在构造方法中初始化二阶贝赛尔曲线的三点：
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 这个坐标用来记录控件的中心点，将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对象，然后调用moveTo方法传入start起点的左边，调用quadTo方法传入控制点的坐标和end终点坐标，此时的曲线三点在同一直线上所以没有任何弯曲，也就是处于直线状态，此时调用drawTextOnPath方法沿着Path绘制文字肯定也是直的。
改变控制点的Y轴坐标来改变曲线的弯曲程度：
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轴坐标数值，然后调用invalidate方法绘制。这里在ofFloat方法中传入参数，这些参数分别表示将数值从0变化到最低点再变化到-30再变化到20再变化到-10最后变成0，这是为了达到曲线从起始点“弹”到最低点后回到起始点之前“惯性”来回弹几次的效果。
这样该控件的文字部分就做好了，下面做上面ImageView部分。
绘制ImageView
这里再说一下ImageView平移+旋转+变换图片的思路，给ImageView加上平移和旋转的动画，在ImageView平移到最低点文字的位置时改变ImageView的图片资源，再平移到起点，由于向下平移和向上平移所经历的时间都是总动画时间的一半，所以在动画执行到总时间的一半的时刻就是ImageView到达最低点的位置，在此时刻执行底部文字的动画就可以达到效果了。
由于刚刚做的文字部分是要和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对象设置位置参数，并使用addView方法将该ImageView加入父容器中。
自定义ViewGroup需要实现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设置为0和100，表示高度为100；将第二个View的顶部挨着第一个View的底部，可以让ImageView平移到最低点时可以“接触”到文字部分。
给ImageView设置动画
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设置平移、旋转动画，给动画加一个监听，使用Handler，在动画开始执行后一段时间发送一个延时，延时后再执行文字View的动画，并且通过一个Int整数来记录并调用changeImg方法为ImageView的图片更换为资源图片数组的另一个子元素。
网友评论