花式实现图片3D翻转效果

前言

本文是zhangyu的投稿,Camera是自定义View中实现3D效果的利器,通过Camera,可以让的View突破2D的限制,展示酷炫的3D效果~

闲话

曾经在闲逛时,看到有一个很炫的3D翻转切换图片的效果。地址在这里:https://tympanus.net/Development/Slicebox/index.html 一直想搞一个,最近撸出来一个自定义View,包含多个效果,其中一种与之相近。

正文

1.效果 话不多说,先看效果:

2d平移:

3D翻转:

3D开合:

百叶窗:

3D轮转:

是否觉得酷炫呢?

2.核心原理

如果你已经迫不及待的想知道实现的原理,那我先把源码的传送门给你:https://github.com/zhangyuChen1991/Roll3DImageView 不过直接撸代码,效率难免低,如果有介绍的文章,为什么不看呢?接下来我们一步一步来分析各种效果的实现过程。 开门见山,我们直击要点:这一系列的效果实现的基础是对两个类的使用,Camera和Matrix。这也是我们今天的主角。 先来看几个API: camera.rotateX(float deg); camera.rotateY(float deg); camera.rotateZ(float deg); camera有一个三维坐标系,x轴水平,Y轴竖直,Z轴垂直屏幕指向你。上面三个API意思很明显就是绕着三个轴旋转一定的角度,camera的处理对象是matrix,将处理后的matrix应用在图片上,就会让一个平铺在屏幕上的图片产生绕x轴或者y轴旋转过后的3D效果了。像这样(盗个图): (图片出自另一篇将camera和matrix讲得很不错的文章:传送门在这里:http://www.gcssloop.com/customview/matrix-3d-camera%20%E2%80%9C%E4%BC%A0%E9%80%81%E9%97%A8%E2%80%9D)

知道了camera的这个基础而关键的API,我们再来看下面一段代码:

上面的代码做了一件事:将matrix用camera旋转处理后运用在bitmap上,将bitmap显示出来。这里显示出来的效果就如上面的图片展示,是有3D效果的。

但是这里要讲的关键不是这个,请注意其中的四行代码:

这里的preTranslate()和postTranslate()有什么作用?

通常上理解,preTranslate()就是在一个matrix发生变化之前,给它做一个平移,postTranslate()是在一个matrix发生变化之后做平移。通过参数来看,这里的动作是把它先往左上方移动,然后往右下方移动,目的只有一个:在matrix做旋转处理时改变旋转中心的位置。 camera旋转matrix时,中心点在(0,0),这是它的旋转中心,而(0,0)点只是matrix的左上角,如果不处理就旋转的话,旋转轴就是matrix的顶边或者左边,这里竖直方向先向上移动了整个bitmap的高度,让它的旋转轴变成了bitmap的底部,如果不移动,则在bitmap的顶部。 结合一张丑图来看吧:

蓝色框的中心就是旋转操作的中心,如果移到绿框位置,则对图片进行以中心为旋转的处理。 所以这里的过程总结为: 1 移动bitmap到旋转轴合适的位置 2 进行旋转处理 3 移回原位,显示处理后的位图效果

还有一点要注意到,上面代码中移过去和移回来,参数是不一样的,也就是说,图片并不是移回原位。这点应该比较好理解,3D翻转的过程,图片的位置其实是变化的,当前图片会逐渐移出显示框,下一张图片会逐渐进来,所以参数不同为了就是造成图片位置移动而已。

上面这段内容其实就是整个所有效果实现的核心了,如果你跟着这个思路理清楚了,再看代码应该要省力得多。

3.3D翻转基本过程

那么我们梳理一下整体3D翻转的过程: 水平向左翻转,第一张图片旋转轴在最右,旋转角度不断增加,同时旋转轴逐渐往左移动;第二张图片旋转轴在自己的最左,旋转角度不断减小,同时旋转轴逐渐靠向左边;于是就产生了3D翻转切换的效果了。竖直方向类同。 如果你理解了上面讲述的过程,那么跟着这段描述来试着写出代码吧!

其实讲到这里,最关键的原理已经说完了,下面没有什么太干的货了,我们简单梳理一下分割变化的过程吧。

4.基础之上的扩展

整体3D翻转,我们处理的是图片的整个bitmap。分割翻转的道理其实是一样的,只是要先做一步:将bitmap均等分割成若干块,放到数组里备用。当启动效果时,依次拿出每个bitmap,处理它的旋转、位移,就可以了。

1.分割合并效果:这个没啥好说的,整体3D是操作一个,这里分成3个照整体3D哪样处理就可以了。唯一要注意的一点是:每一块bitmap平移回来的时候,记得算对参数,把图片完整的拼回一起。

2.百叶窗效果:唯一的不同就是每一块bitmap翻转的中心不同了,其他的旋转轴都在边沿,而它是在中心位置。

3.轮转效果:这个我认为最炫的一个效果,其实原理也就那么回事了,每块bitmap依次执行3D翻转,最后全部翻转过来,就是这样了。

结尾

最后还想说的是,在实践的过程中,我发现偏移某些参数相互搭配,其实会产生更加3D逼真绚丽的效果。我浅尝辄止,期待你们脑洞大开无限探索,只有想不到,没有做不到!

最后的最后,贴一遍项目地址吧,欢迎大家赏脸前去观看。https://github.com/zhangyuChen1991/Roll3DImageView 如发现问题,欢迎斧正!

原文发布于微信公众号 - Android群英传(android_heroes)

原文发表时间:2017-01-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阿凯的Excel

巧妙设置目标红线(Excel绘制图表系列课程)

应朋友要求,让我分享几期Excel的图表绘制,其实内心是拒绝的。 为啥尼,因为讲图表绘制的截图要很多很多,不过看在他说有好处的份上,我就无节操的分享几期。 ...

2904
来自专栏游戏杂谈

社交应用动态九宫格图片的规则

iPhone6以下的设备(5s、SE、4s),判断条件同上,只是将512px改为200px

1291
来自专栏数据小魔方

柱形趋势图

今天跟大家分享的是柱形趋势图! ▽▼▽ 这种图表在功能上很类似之前有几期分享的各种组图,不过柱形趋势图在表达周期性数据趋势方面,给读者的冲击力会更加明显一点儿。...

3686
来自专栏技术总结

Swift3.1动画(一)

2355
来自专栏腾讯社交用户体验设计

打造高大上的Canvas粒子动画

3253
来自专栏walterlv - 吕毅的博客

WPF/UWP 的 Grid 布局竟然有 Bug,还不止一个!了解 Grid 中那些未定义的布局规则

发布于 2018-05-05 07:43 更新于 2018-08...

641
来自专栏Material Design组件

Material Design — 分隔线(Dividers)

33612
来自专栏数据小魔方

精美炫酷数据分析地图——简单几步轻松学会

本篇文章开始教大家如何使用矢量素材在Excel、PPT中自定义精美的数据分析图表。 使用矢量素材制作数据分析报告其实并不难,最常见的就是形式就是使用矢量地图制作...

4115
来自专栏前端那些事

理解标准盒模型和怪异模式&box-sizing属性

盒子模型 主要有两种,w3c标准盒模型,IE下的怪异盒模型,其实还有就是弹性盒模型(上篇文章我们用他很好的解决了对齐问题)

1200
来自专栏CDA数据分析师

这么漂亮的Excel图表,年终总结就用它了!

作者 罂粟姐姐 最近在某份研究报告中见到了这样一个图表: 看到它的瞬间,有一种看见美女惊为天人的感觉。很精致,很别致,让整个报告显得特别上档次。 所以,今天...

1919

扫码关注云+社区