BOOM:一款有趣的Javascript动画效果

2016/04/06 · CSS,
JavaScript · 3
评论 ·
boom,
boomJS,
动画

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。

缘起

前几天在 github
上看到同事的一个这样的小项目,在
IOS 上实现了这样一个小动画效果,看上去蛮炫的,效果图:

图片 1

我就寻思着,在浏览器环境下,用 Javascript 怎么实现呢?

在浓烈的好奇心驱使下,最终利用 Javascript 和 CSS3
完成了模仿上面的效果,通过调用方法,可以将页面上的图片一键爆炸,我给它起了个
boomJS 的名字,贴两张效果图:

图片 2 
  图片 3

实现

我感觉效果还是可以的,因为没有使用 canvas
,所以无法取到图片上每个像素的颜色值。使用了一些比较讨(sha)巧(bi)的方法,下面简单讲讲如何实现的:

1、构造新图容器,隐藏原图

原本的图是 标签的图,一张整图,最终的效果当然不是在原图上 boom
,看上去连贯的动画本质上只是一个障眼法,利用 Javascript
做了一些巧妙的变换,所以第一步所做的就是取到原图的高宽及相对浏览器视窗的定位,再创建一个新的容器附着在原图之上,然后隐藏原图。

这个方法里面我主要用到了 getBoundingClientRect
这个方法,该方法返回元素的大小及其相对于视口的位置,完美满足我的需要。

嗯,这一步做了什么呢?简单的如下所示:

图片 4

 

2、生成一张张是碎裂小图

最后效果是图片 boom
一下裂开,所以第二步要做的就是模拟出一小块一小块小图,这里每一个小块就是一个新的
div ,然后利用图片的定位 background-position
将其定位到合适的位置,嘿,看看效果:

图片 5

可以看到,这里分割成了很多个小块,每个小块其实是一个 div
然后,这些小块被添加到我们上一步中设置的容器当中,然后利用原图设置 div
的背景图,所有 div
利用的都是原图一张背景图,接着图片定位就可以完成这样一个效果,说起来很简单,但是中间经历了很多计算,如何分割图片,图片的
width 与 height 比(是横图还是竖图),每个小块 div 的定位及小 div
背景图的定位,具体的可以到这里看看:boomJS。

最后为了好看,设置了圆角,但是这样爆炸的话,感觉不够真实,图片一块一块的清晰可辨。所以利用缩放
scale ,随机让每个小块放大或者缩小,再看看缩放后的效果:

图片 6

嗯,模糊了很多,效果近一步增强,这样爆开来比较真实。

 

3、boom 爆炸!

嗯,到了鸡冻人心的最后一步,要做的就是给每一个 div
小块设置运动轨迹,然后同时爆开。

过程比较繁琐,需要先算出图片的中心点,然后每个 div
块点以中心为基准点向外做直线运动,不得不说,做这个我还特意恶补了一下高中的几何知识(囧)。为了效果更加真实,每个
div
块运动的直线距离添加一个正负值恰当的随机数,那么就可以达到有的块炸的比较远,有的块炸的比较近。利用未缩放的小块图片做一下大概的示意图:

图片 7

最后在炸裂的瞬间,让每个小块渐变消失,就可以完成上面 Gif 所示的效果了。

总结一下,其实过程当中还有很多细节没有提及,比较重要的是动画触发的时序控制,因为最近在研读
jQuery 源码,就简单的利用了 jQuery 的队列来实现控制时序。

提到了就安利一下,我在 github 上关于 jQuery
源码的全文注解,感兴趣的可以围观一下。jQuery v1.10.2
源码注解。

然后本文没有贴代码,这个动画效果完整的代码在我的 github
上,有兴趣也可以围观一下:boomJS。

本文较短,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,点个赞,写文章不容易。

打赏支持我写出更多好文章,谢谢!

打赏作者

实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下。

CSS3进阶:酷炫的3D旋转透视

2016/04/22 · CSS · 5
评论 ·
CSS3,
动画

本文作者: 伯乐在线 –
chokcoco
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

之前学习 react+webpack ,偶然路过 webpack
官网 ,看到顶部的 LOGO ,就很感兴趣。

最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO
为切入口,好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO
动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的
CSS3 动画效果。

先上 demo
,没有将精力放在兼容上,请用 chrome 打开。

本文完整的代码,以及更多的 CSS3
效果,在我 github 上可以看到,也希望大家可以点个
star。

嗯,可能有些人打不开 demo
或者页面乱了,贴几张效果图:(图片有点大,耐心等待一会)

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 8
图片 9

5 赞 12 收藏 3
评论

 

立方体 3D 旋转

图片 10

关于作者:chokcoco

图片 11

经不住流年似水,逃不过此间少年。

个人主页 ·
我的文章 ·
63 ·
   

图片 12

   boomJS 缘起

前几天在
github
上看到同事的一个这样的小项目,在
IOS 上实现了这样一个小动画效果,看上去蛮炫的,效果图:

图片 13

我就寻思着,在浏览器环境下,用
Javascript 怎么实现呢?

在浓烈的好奇心驱使下,最终利用
Javascript 和 CSS3
完成了模仿上面的效果,通过调用方法,可以将页面上的图片一键爆炸,我给它起了个
boomJS
的名字,贴两张效果图:

图片 14   
  图片 15

Demo戳我。

 

3D 透视照片墙

图片 16

发表评论

电子邮件地址不会被公开。 必填项已用*标注