美文网首页
对sunnyxibei关于Flipboard 红板报的翻页效果的

对sunnyxibei关于Flipboard 红板报的翻页效果的

作者: CoderLengary | 来源:发表于2017-12-09 12:34 被阅读0次
        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;

        //画变换的一半
        //先旋转,再裁切,再使用camera执行3D动效,**然后保存camera效果**,最后再旋转回来
        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        canvas.rotate(-degreeZ);
        camera.rotateY(degreeY);
        camera.applyToCanvas(canvas);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.rotate(degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);
        canvas.restore();

        //画不变换的另一半
        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        canvas.rotate(-degreeZ);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        canvas.clipRect(-centerX, -centerY, 0, centerY);
        //此时的canvas的坐标系已经旋转,所以这里是rotateY
        camera.rotateY(fixDegreeY);
        camera.applyToCanvas(canvas);
        canvas.rotate(degreeZ);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);
        canvas.restore();

首先,解释下为什么用的是 canvas.clipRect(-centerX, -centerY, 0, centerY);而不是canvas.clipRect(0, -bitmapHeight/2, bitmapWidth/2, bitmapHeight/2);
我们应该意识到clipRect的行为不是真的裁切了图片,而是让图片的一小部分显示在方框里。因此,如果采取了canvas.clipRect(0, -bitmapHeight/2, bitmapWidth/2, bitmapHeight/2);你会发现是这样的效果

image.png

其实是因为剪裁的框框不够大,把边角裁掉了


image.png

需要注意的是canvas的旋转,旋转的不是坐标系。要证明这个很简单,我们在rotate前先裁剪。

        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        //canvas.rotate(-degreeZ);
        camera.rotateY(0);
        camera.applyToCanvas(canvas);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        //canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.rotate(270);
        canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);

        canvas.restore();

效果是这样的


image.png

当我们在rotate后再裁剪

        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        //canvas.rotate(-degreeZ);
        camera.rotateY(0);
        camera.applyToCanvas(canvas);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.rotate(270);
        //canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);

        canvas.restore();
image.png

我们发现这两者有着区别,原因就是rotate旋转的不是坐标系,而是当前的画面。

实现三维旋转(0度)并裁切的效果

        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        canvas.rotate(-degreeZ);
        camera.rotateY(0);
        camera.applyToCanvas(canvas);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.rotate(degreeZ);

        //canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);

        canvas.restore();
GIF2.gif

实现三维的旋转,这里需要注意的是如果把 camera.rotateY(-45);设为0,整个画面看起来时不动的,但其实它在旋转。

        canvas.save();
        camera.save();
        canvas.translate(centerX, centerY);
        canvas.rotate(-degreeZ);
        camera.rotateY(-45);
        camera.applyToCanvas(canvas);
        //计算裁切参数时清注意,此时的canvas的坐标系已经移动
        //canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.rotate(degreeZ);

        //canvas.clipRect(0, -centerY, centerX, centerY);
        canvas.translate(-centerX, -centerY);
        camera.restore();
        canvas.drawBitmap(bitmap, x, y, paint);

        canvas.restore();
GIF3.gif

PS
如果你的图片文件没有建立分辨率文件夹分类放好,就会出现图片过大的情况。

相关文章

  • 对sunnyxibei关于Flipboard 红板报的翻页效果的

    首先,解释下为什么用的是 canvas.clipRect(-centerX, -centerY, 0, cente...

  • 揭秘:Flipboard 中国版4.0 发布背后的协作流程

    2017年7月,石墨文档的企业用户 Flipboard 推出全新中文版本——红板报。这是 Flipboard 进入...

  • iOS仿红板报翻页效果

    最近公司要实现类似红板报的翻页效果,所以封装了一个组件来使用 Demo已上传Githubhttps://githu...

  • 教你仿写 Flipboard 的翻页效果

    前言 自从清明放假之后,状态就一直一般般,(放假使我快乐,不要上学,我要放假!)导致更文也断了一段时间,鸽了好一段...

  • 聚合阅读

    这是「阅读」系列之三 本文结构: 资讯聚合 App#1 Flipboard 红板报#2 ZAKER#3 轻芒阅读 ...

  • APP推荐

    1 红板报新闻Flipboard 读新闻我比较喜欢这个APP,它整合了全球高质量的新闻资讯,还能看到英文原版的新闻...

  • 自定义View示例-05 仿红板报翻页效果

    1.效果图 2.思路分析 2.1 绘制图片 2.2 绘制图片折叠效果 2.3 绘制图片旋转折叠效果 2.4 添加动...

  • 翻页效果

    设定翻页转轴transform-origin: left center;左边中心; 设定页面翻页层级:page页面...

  • 翻页效果

    小时候看电子书,很多电子书APP都有仿真的翻页效果,那时候觉得很新奇,奈何姿势水平不够,看不破其中的奥秘,有些当时...

  • 相册浏览的简单应用(UIScrollView)

    通过一个关于相册浏览的简单应用--图片缩放,垂直滑动图片,翻页效果,大家将学到UIScrollView相关的知识。...

网友评论

      本文标题:对sunnyxibei关于Flipboard 红板报的翻页效果的

      本文链接:https://www.haomeiwen.com/subject/xgmuixtx.html