仿Flipboard 波浪折叠式Logo自定义View

一直在学习扔物线的Hencoder 的android教程中，其中有这么一个仿写活动，将之前在这个教程中学到关于自定义View的知识点应用下，最终在参考了仿写活动的获胜者的实现后，自己也实现了这么一个仿写，加入了一些自定义属性设置和暴露出动画执行的监听回调。

先看下原来的效果:
Flipboard logo

实现后的效果:

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/，一起共同提高.

仿Flipboard 波浪折叠式Logo自定义View

猜你喜欢