一直在学习扔物线的Hencoder 的android教程中,其中有这么一个仿写活动,将之前在这个教程中学到关于自定义View的知识点应用下,最终在参考了仿写活动的获胜者的实现后,自己也实现了这么一个仿写,加入了一些自定义属性设置和暴露出动画执行的监听回调。
先看下原来的效果:
Flipboard logo
实现后的效果:
flipboardiconview.gif
talk is cheap, show your code!
githup源码地址:https://github.com/DarkSherlock/FlipboardIconDemo
这个动画效果是:右半边先绕Y轴旋转45°,然后这个已经绕Y轴旋转45°后的右半边部分绕Z轴逆时针旋转270°,然后剩下的另外半边绕X轴旋转45°。
重点贴下 ondraw()里的代码就好了,有兴趣的可以去githup clone下工程,看下源码,源码不多,也加了注释,非常容易理解。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int bitmapWidth = bitmap.getWidth();
int bitmapHeight = bitmap.getHeight();
int centerX = getWidth() / 2;
int centerY = getHeight() / 2;
int x = centerX - bitmapWidth / 2;
int y = centerY - bitmapHeight / 2;
//绘制动的半边.
//开始先绕Y轴旋转 targetDegreeY 度
//然后是中间波浪效果:把裁剪出来的那半边canvas旋转了targetDegreeY的那
//半边绕Z轴旋转270°,
//这样因为那半边canvas是已经旋转了targetDegreeY的,所以中间波浪动画效
//果就实现了这半边扫过的部分变得凸起
//最后再绕X轴旋转targetDegreeX 度
canvas.save();
camera.save();
canvas.translate(centerX, centerY);
camera.rotateY(-degreeY);
canvas.rotate(-degreeZ);
camera.applyToCanvas(canvas);
canvas.clipRect(0, -centerY, centerX, centerY);
canvas.rotate(degreeZ);
canvas.translate(-centerX, -centerY);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();
camera.restore();
//绘制不动的那半边
canvas.save();
camera.save();
canvas.translate(centerX, centerY);
canvas.rotate(-degreeZ);
camera.rotateY(degreeFixY);
camera.applyToCanvas(canvas);
canvas.clipRect(-centerX, -centerY, 0, centerY);
canvas.rotate(degreeZ);
canvas.translate(-centerX, -centerY);
canvas.drawBitmap(bitmap, x, y, paint);
canvas.restore();
camera.restore();
}
其中关于自定义View onDraw()方法不熟悉的朋友,推荐一同关注扔物线大神的Hencoder教程http://hencoder.com/,一起共同提高.
网友评论