一、基础准备
本篇我们来学习一下自定义 View 中使用 Camera 来做三维变换,先看一下 自定义 View 1-4 Canvas 对绘制的辅助 clipXXX() 和 Matrix
二、Camera 介绍
先来看看适用 Camera 时的三维坐标系结构:
camera 相当于在 z 轴有个照相机(下图中黄色圆圈就代表 camera),对视图进行投影,效果如下:
使用 camera.rotateX(float degree) 翻转后,效果如下:
此时投影到屏幕上的效果是这样的:
可以看到投影后的图片不对称,这是因为 camera 只能位于 z 轴上而不能指定中心偏移。如果需要达到像折叠那样的对称效果,需要将 canvas 偏移,让偏移后的图片所在中心点落在 camera 所在的 z 轴上。偏移前:
再来看看偏移后:
投影应用到 canvas 后再将 canvas 偏移回去,这样效果就是预期的了,效果如下图:
另外,Camera 和 Canvas 一样也需要保存和恢复状态才能正常绘制,不然在界面刷新之后绘制就会出现问题。所以上面这张图完整的代码应该是这样的:
//如果你需要图形左右对称,需要配合上 Canvas.translate(),
//在三维旋转之前把绘制内容的中心点移动到原点,即旋转的轴心,然后在三维旋转后再把投影移动回来:
canvas.save();
camera.save(); // 保存 Camera 的状态
camera.rotateX(30); // 旋转 Camera 的三维空间
canvas.translate(centerX, centerY); // 旋转之后把投影移动回来
camera.applyToCanvas(canvas); // 把旋转投影到 Canvas
canvas.translate(-centerX, -centerY); // 旋转之前把绘制内容移动到轴心(原点)
camera.restore(); // 恢复 Camera 的状态
canvas.drawBitmap(bitmap, point1.x, point1.y, paint);
canvas.restore();
另外,setLocation(x , y , z) 是设置 camera 位置,默认值是(0, 0, -8) ,单位是英寸(1英寸 = 72像素),但是我们绘图都是用 dp,所以在不同 DPI 手机上绘制的像素大小不一致,导致 camera 投影在不同手机上效果不一样,所以需要对 camera 的位置做兼容适配,可以写这么一个工具类:
fun getZForCamera() : Float{
//-8 的值可以根据实际需要效果进行调整
return -8 * Resources.getSystem().displayMetrics.density
}
然后设置一下就可以在不同手机上显示效果一样了:
camera.setLocation(0, 0, Utils.getZForCamera());
三、Flipboard 红板报的翻页效果
我们看看 Flipboard 的动画效果图:
分析一下,首先第一步,如何只翻转图片的一部分呢?我们可以通过 canvas.clipRect 将图片切割成两部分绘制,两边分别做翻转效果。效果如下:
第二步,如何达到斜着翻转的效果呢?只需要在 canvas.clipRect 切割前进行 canvas.rotate 旋转,并在切割后旋转回来,效果如下:
第三步就是将左右区间旋转角度、翻转角度抽成属性做属性动画,效果图中的动画也可以分成三步:
- 右部分逐渐翻起至45°
- 左、右部分从0°逐渐旋转到270°
- “上”部分(旋转前对应的是左部分)逐渐翻起至45°
到这里就把全过程分析完毕了,完整代码如下:
class RotateView(context: Context?, attrs: AttributeSet?) : View(context, attrs) {
val BITMAP_WIDTH = Utils.dp2px(200)
var mCamera = Camera()
var mBitmap: Bitmap
var mPaint = Paint(Paint.ANTI_ALIAS_FLAG)
var mCenterPoint = PointF()//绘制图片的中心点
var leftFlip = 0f
set(value) {
field = value
invalidate()
}
var rightFlip = 0f
set(value) {
field = value
invalidate()
}
var flipRotation = 0f
set(value) {
field = value
invalidate()
}
init {
mBitmap = Utils.decodeBitmap(resources, R.drawable.flip, BITMAP_WIDTH.toInt())
mCamera.setLocation(0f, 0f, Utils.getZForCamera())
//动画一:右边翻转
val rightFlipAnimator = ObjectAnimator.ofFloat(this, "rightFlip", -45f)
rightFlipAnimator.duration = 1000
//动画二:旋转
val flipRotationAnimator = ObjectAnimator.ofFloat(this, "flipRotation", 270f)
flipRotationAnimator.duration = 1000
//动画三:左边翻转
val leftFlitAnimator = ObjectAnimator.ofFloat(this, "leftFlip", 45f)
leftFlitAnimator.duration = 1000
val animatorSet = AnimatorSet()
animatorSet.playSequentially(rightFlipAnimator, flipRotationAnimator, leftFlitAnimator)
animatorSet.startDelay = 1000
animatorSet.start()
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
mCenterPoint.x = width / 2f
mCenterPoint.y = height / 2f
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
//绘制左边
canvas.save()
canvas.translate(mCenterPoint.x, mCenterPoint.y)
canvas.rotate(-flipRotation)
mCamera.save()
mCamera.rotateY(leftFlip)
mCamera.applyToCanvas(canvas)
mCamera.restore()
canvas.clipRect(-BITMAP_WIDTH.toInt(), -BITMAP_WIDTH.toInt(), 0, BITMAP_WIDTH.toInt())
canvas.rotate(flipRotation)
canvas.translate(-mCenterPoint.x, -mCenterPoint.y)
canvas.drawBitmap(mBitmap, mCenterPoint.x - BITMAP_WIDTH / 2, mCenterPoint.y - BITMAP_WIDTH / 2, mPaint)
canvas.restore()
//绘制右边
canvas.save()
canvas.translate(mCenterPoint.x, mCenterPoint.y)
canvas.rotate(-flipRotation)
mCamera.save()
mCamera.rotateY(rightFlip)
mCamera.applyToCanvas(canvas)
mCamera.restore()
canvas.clipRect(0, BITMAP_WIDTH.toInt(), BITMAP_WIDTH.toInt(), -BITMAP_WIDTH.toInt())
canvas.rotate(flipRotation)
canvas.translate(-mCenterPoint.x, -mCenterPoint.y)
canvas.drawBitmap(mBitmap, mCenterPoint.x - BITMAP_WIDTH / 2, mCenterPoint.y - BITMAP_WIDTH / 2, mPaint)
canvas.restore()
}
}
运行结果: