前言
自从清明放假之后，状态就一直一般般，（放假使我快乐，不要上学，我要放假！）导致更文也断了一段时间，鸽了好一段时间。痛定思痛，最近决定重新恢复更文。鉴于前段时间在学习扔物线大大 HenCoder 的自定义View系列文章，看到其中给出了一些可供仿写的酷界面，打算尝试仿写其中的 Flipboard 红板报的翻页效果（加强版）
动画效果如下：
效果
分析
-
核心：图片本身不旋转，旋转的是"翻折的 canvas "，在处理过后的canvas中绘制图片
- "右侧"（指 最开始 "翻折的 canvas"）翻折一定角度，"左侧"（指 最后 "翻折的 canvas"）无变化，分别绘制；
- 将 "右侧" 旋转 270°，"左侧" 配合旋转，分别绘制；
- "右侧"无变化， "左侧" 翻折一定角度
-
涉及知识点
- 属性动画 的使用，不了解的可以看我的另一篇分享Android 属性动画
- canvas 的使用，主要是 几何变换
- camera 的 旋转 和 平移
- 关关关键 要区别二者的 坐标系，这一点很重要，不了解清楚可能做出来的效果面目全非，别问我怎么知道的。。。。
上述不清楚的，或者想要深入学习自定义View的，推荐大家去 扔物线大大的 HenCoder 专栏学习一波
-
简要流程图
就简单解释一下旋转到90度时的处理流程（没找到方便的画图软件，很难受，读者有合适的给推荐一哈啊~）
流程图
- 图一为正常状态下的坐标系，灰色部分表示当前canvas
- 图二：假定此时进行到动画2，且旋转到90度，canvas的坐标系旋转90度，然后绕camera的y轴旋转一定角度，应用到canvas后，canvas变为图中红+粉色那个样子(现需要注意二者坐标系，图中仅仅标识canvas的坐标系)
- 然而我们只需要翻折的那部分用来绘制翻折起来的图片，因此对红色部分进行裁切。
- 图三：而由于我们原本的图片是不进行旋转的，因此我们需要将坐标系还原回来，这样我们绘制图片时候，就只会在红色翻折起来的canvas中绘制。
剩下的另一半原理也是一样的，大家自己脑补吧。。
（不知道合适的绘图软件，用windows自带的画图实在太难受。。）
实现
Demo地址 FilpboardAnimation
直接放代码吧，注释比较详细，对比上面的分析，不难理解。
MapView.java
public class MapView extends View {
//“右侧” 沿Y轴翻折的角度
private float degreeY;
//canvas 旋转的角度
private float degreeZ;
//“左侧” 最后翻折的角度
private float fixY;
private Paint mPaint;
private Bitmap mBitmap;
private Camera mCamera;
public MapView(Context context) {
this(context,null);
}
public MapView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public MapView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.MapView);
BitmapDrawable drawable = (BitmapDrawable) a.getDrawable(R.styleable.MapView_mv_background);
a.recycle();
if (drawable!=null){
mBitmap = drawable.getBitmap();
}else {
mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.flip_board);
}
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mCamera = new Camera();
//沿Z轴平移，防止相机旋转后图片“糊”到脸上
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
float newZ = - displayMetrics.density * 6;
mCamera.setLocation(0,0,newZ);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int bitmapWidth = mBitmap.getWidth();
int bitmapHeight = mBitmap.getHeight();
int centerX = getWidth()/2;
int centerY = getHeight()/2;
//绘制 翻折&旋转 部分
canvas.save();
mCamera.save();
canvas.translate(centerX,centerY);//画布移动到屏幕中心
//“折线及翻折部分的画布” 的旋转
canvas.rotate(-degreeZ);//画布旋转
mCamera.rotateY(degreeY);//相机绕Y周旋转
mCamera.applyToCanvas(canvas);//相机应用到画布
canvas.clipRect(0,-centerY,centerX,centerY);//画布裁切，只绘制翻折起来的部分
//因为翻折部分相对于画布而言，坐标始终未改变
canvas.rotate(degreeZ);//将画布旋转为原角度，否则绘制时绘制的图片也会旋转
mCamera.restore();
canvas.drawBitmap(mBitmap,-bitmapWidth/2,-bitmapHeight/2,mPaint);//绘制图片，注意坐标
canvas.restore();
//绘制 剩余 部分
canvas.save();
mCamera.save();
canvas.translate(centerX,centerY);//移动到画布中心
//“折线以及最后才翻折的画布”的旋转
canvas.rotate(-degreeZ);//画布旋转
canvas.clipRect(-centerX,-centerY,0,centerY);//裁切绘制范围
mCamera.rotateY(fixY);//将旋转之后才需要翻折的部分 进行旋转
mCamera.applyToCanvas(canvas);
canvas.rotate(degreeZ);//画布还原回原本角度
mCamera.restore();
canvas.drawBitmap(mBitmap,-bitmapWidth/2,-bitmapHeight/2,mPaint);//绘制图片，注意坐标
canvas.restore();
}
public void reset(){
degreeY = 0;
degreeZ = 0;
fixY = 0;
}
public void setDegreeY(float degreeY) {
this.degreeY = degreeY;
invalidate();
}
public void setDegreeZ(float degreeZ) {
this.degreeZ = degreeZ;
invalidate();
}
public void setFixY(float fixY) {
this.fixY = fixY;
invalidate();
}
}
MainActivity.java
public class MainActivity extends AppCompatActivity {
MapView mMapView;
private Handler mHandler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mMapView = findViewById(R.id.map_view);
//三段动画
//1."右侧" 翻折，"左侧" 不动
//2."右侧" 旋转，"左侧" 配合旋转
//3.收尾 "左侧" 翻折，"右侧" 不动
ObjectAnimator animator1 = ObjectAnimator.ofFloat(mMapView,"degreeY",0,-45);
animator1.setDuration(1000);
animator1.setStartDelay(500);
ObjectAnimator animator2 = ObjectAnimator.ofFloat(mMapView,"degreeZ",0,270);
animator2.setDuration(800);
animator2.setStartDelay(500);
ObjectAnimator animator3 = ObjectAnimator.ofFloat(mMapView,"fixY",0,30);
animator3.setDuration(500);
animator3.setStartDelay(500);
final AnimatorSet animatorSet = new AnimatorSet();
//循环播放
animatorSet.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
/*
//用handler的目的在这里只是为了模拟 原图中，在动画最后短暂停留
mHandler.postDelayed(new Runnable() {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
*/
//将属性重置
mMapView.reset();
animatorSet.start();
}
});
/*
}
},500);
}
});
*/
//顺序播放动画
animatorSet.playSequentially(animator1,animator2,animator3);
animatorSet.start();
}
}
效果如下
Android studio自带的模拟器在我电脑里超级卡，录屏瑕疵很大，大家随便看一看就好
建议大家自己实现一下，运行看看实际效果，虽然东西虽小，但成就感还是很重要的不是么，哈哈~
效果
好了，效果实现了，本文也就到此结束了。
总结
- 本文仿写了一个简易的Flipboard翻页效果，后续可能仿写其他常用不常用的view，望多多支持。
- 笔者水平有限，如有错漏，欢迎指正。
- 接下来我也会将所学的知识分享出来，有兴趣可以继续关注whd_Alive的Android开发笔记
欢迎关注whd_Alive的简书
- 不定期分享Android开发相关的技术干货，期待与你的交流，共勉。
