自定义View手写实现微信啪一啪动画效果

class ShakeImageView @JvmOverloads constructor(

context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : AppCompatImageView(context, attrs, defStyleAttr) {

//圆角矩形的Path

private val path = Path()

private val paint = Paint().apply {

//开启抗锯齿

isAntiAlias = true

}

override fun onDraw(canvas: Canvas) {

//开启离屏缓冲

val count = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), paint)

//path添加一个圆角矩形

path.addRoundRect(0f, 0f, width.toFloat(), height.toFloat(), imageCorner, imageCorner, Path.Direction.CW)

//Canvas裁切成一个圆角矩形

canvas.clipPath(path)

//调用AppCompatImageView的onDraw方法

super.onDraw(canvas)

//恢复离屏缓冲

canvas.restoreToCount(count)

}

}

• 继续AppCompatImageView重写onDraw方法

• 开启离屏缓冲，来拿出一块离屏缓冲来绘制

• 给Path添加一个View大小的圆角矩形

• Canvas裁切成一个圆角矩形

• 调用AppCompatImageView的onDraw方法，在裁剪后的Canvas上绘制图片

• 恢复离屏缓冲

通过以上的几个步骤就能实现一个圆角矩形的头像，注意要开启缓冲

2.让ShakeImageView能响应双击事件

为了实现双击拍一拍的动画，首先得让自定义的View响应双击事件

class ShakeImageView @JvmOverloads constructor(

context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : AppCompatImageView(context, attrs, defStyleAttr) {

//初始化GestureDetector

private val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {

//必须返回true 不然不能接管事件

override fun onDown(e: MotionEvent?) = true

//当双击的时候回调

override fun onDoubleTap(e: MotionEvent?): Boolean {

//处理动画

return true

}

})

override fun onTouchEvent(event: MotionEvent?): Boolean {

//用gestureDetector来接管触摸事件

return gestureDetector.onTouchEvent(event)

}

}

• 生命一个gestureDetector的实例，并且在onDown方法中返回true，代表接管事件

• 在onTouchEvent，用gestureDetector来接管触摸事件

• GestureDetector相当于一个检测器，而各种事件的响应会回调到SimpleOnGestureListener方法中

• SimpleOnGestureListener是一个实现了 OnGestureListener和OnDoubleTapListener的接口，用它更便捷

当双击的时候回调已经处理好了，接下来就要设置动画了。

3.给ShakeImageView设置动画

class ShakeImageView @JvmOverloads constructor(

context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : AppCompatImageView(context, attrs, defStyleAttr) {

//图片动画执行的偏移距离

private var offset = 3f

//动画执行的时间

private var duration = 500

//初始化动画

private val animator by lazy {

ObjectAnimator.ofFloat(this, “rotation”, offset, 0f, -offset, 0f, offset, 0f, -offset, 0f, offset, 0f)

}.apply {

this.value.duration = duration.toLong()

}

//初始化GestureDetector

private val gestureDetector = GestureDetector(context, object : GestureDetector.SimpleOnGestureListener() {

//必须返回true 不然不能接管事件

override fun onDown(e: MotionEvent?) = true

//当双击的时候回调

override fun onDoubleTap(e: MotionEvent?): Boolean {

shake()

return true

}

})

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {

super.onSizeChanged(w, h, oldw, oldh)

//轴心为宽的一半,高的底部

pivotX = width / 2f

pivotY = height.toFloat()

}

//执行拍一拍的动画

fun shake() {

animator.start()

}

}

• 通过Kotlin by lazy 初始化 animator动画对象，并设置旋转的距离和时间，注意X轴Y轴都要旋转

• onSizeChanged方法中设置旋转的轴心（width/2,height）轴心为宽的一半,高的底部

• onDoubleTap 双击回调中，调用shake()方法执行动画

这个效果通过这三个步骤就做出来了，如果你想做的更通用一点可以通过给自定义View配置属性的方式，来让你的自定义View更灵活。

4.设置自定义View的自定义属性

比如可以在如下几个方面来设置

• 是否开启拍一拍效果

• 图片的圆角大小

• 图片动画执行的偏移距离

• 动画执行的时间

4.1.在value文件夹下创建一个attr.xml文件

<?xml version="1.0" encoding="utf-8"?>

4.2.在代码中获取在xml配置的属性

class ShakeImageView @JvmOverloads constructor(

context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : AppCompatImageView(context, attrs, defStyleAttr) {

//开启拍一拍效果

private var openShake = true

//图片的圆角大小

private var imageCorner = 10.dp

//图片动画执行的偏移距离

private var offset = 3f

//动画执行的时间

private var duration = 500

init {

//获取xml中定义的值

val ta = context.obtainStyledAttributes(attrs, R.styleable.ShakeImageView)

openShake = ta.getBoolean(R.styleable.ShakeImageView_openShake, true)

imageCorner = ta.getDimension(R.styleable.ShakeImageView_imageCorner, 10.dp)

offset = ta.getFloat(R.styleable.ShakeImageView_offset, 3.5f)

duration = ta.getInt(R.styleable.ShakeImageView_animDuration, 350)

ta.recycle()

}

}

• 通过TypeArray来获取对应的属性

• 回收TypeArray

通过在init代码块中获取这些属性，如果没声明则给一个默认值，赋值给成员变量，在接下来的时候使用

4.3.使用在xml中获取的属性值

class ShakeImageView @JvmOverloads constructor(

context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0

) : AppCompatImageView(context, attrs, defStyleAttr) {

//开启拍一拍效果

private var openShake = true

//图片的圆角大小

private var imageCorner = 10.dp

//图片动画执行的偏移距离

private var offset = 3f

//动画执行的时间

private var duration = 500

//初始化动画

private val animator by lazy {

ObjectAnimator.ofFloat(this, “rotation”, offset, 0f, -offset, 0f, offset, 0f, -offset, 0f, offset, 0f)

}.apply {

this.value.duration = duration.toLong()

}