菜单

【BOOM】一款款有趣的Javascript动画效果

2018年12月17日 - CSS/CSS3

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

本文较短,即便还有什么问题依旧提议,可以多互换,原创著作,文笔有限,才疏学浅,文中若有不正之处,万望告知。

倘诺本文对你有拉,点单赞,写著作不易于。

打赏帮助自勾勒来双重多好作品,谢谢!


打赏作者

推行出真知,有的上见到局部有趣的光景就想着用自己所学的文化复现一下。

打赏辅助我勾勒来更多好著作,谢谢!

任选一种出办法

图片 8
图片 9

5 赞 12 收藏 3
评论

 

至于作者:chokcoco

图片 10

经不住大运似水,逃然则此少年。

个人主页
·
我之稿子
·
63
·
   

图片 11

   boomJS 缘起

面前几乎龙在
github
上寓目同事的一个如此的小项目,在
IOS 上落实了这样一个粗动画效果,看上去蛮炫的,效果图:

图片 12

自便招来思着,在浏览器环境下,用
Javascript 怎么落实呢?

在浓郁的好奇心驱使下,末了使
Javascript 和 CSS3
完成了学上边的效用,通过调用方法,可以拿页面上之图纸一键爆炸,我吃它们由了个
boomJS
的名,贴两摆效果图:

图片 13   
  图片 14

Demo戳我。

 

   boomJS 实现

本人感觉到效果或得的,因为没有使用
canvas
,所以无法赢得到图片上每个像素的颜色值。使用了有的相比较讨(sha)巧(bi)的方法,下边简单说出口怎么实现之:

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

原来的觊觎是
<img> 标签的图,一摆放整图,最后之效果自然不是在原图上 boom
,看上去连贯的卡通本质上一味是一个障眼法,利用 Javascript
做了有些巧妙的转换,所以率先步所举办的哪怕是获取到原图的高宽及相对浏览器视窗的定点,再创一个新的器皿附着在原图之上,然后隐藏原图。

本条形式中我重点拔取了
getBoundingClientRect
这些方法,该办法重临元素的分寸及其相对于视口的岗位,完美满足自家之要。

啊,这同一步做了什么吧?简单的如下所示:

图片 15

 

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

末效果是图片
boom
一下开裂,所以亚步而做的哪怕是仿出同样稍微片一样稍微片小图,这里每一个稍稍片就是一个初的
div ,然后下图片的固化 background-position
将那一个稳住及当的职务,嘿,看看效果:

图片 16

得看到,这里分割成了成千上万只小片,每个微片其实是一个
div 然后,这多少个不怎么片让上加至我们达成一致步着安装的容器中,然后以原图设置
div 的背景图,所有 div
利用的都是本图一律张背景图,接着图片定位就是可成功如此一个力量,说起来特别简短,可是中经历了好多计量,怎么着分割图片,图片的
width 与 height 比(是横图依旧竖图),每个微片 div 的恒与小 div
背景图的平素,具体的可以到这里看看:boomJS

末为了为难,设置了圆角,不过那样爆炸的讲话,感觉不够实,图片相同块一样块的清晰可辨。所以拔取缩放
scale ,随机让每个微片放大或者收缩,再看看缩放后的效能:

图片 17 

嗯,模糊了广大,效果近平步增强,这样爆开来比真实。

 

3、boom
爆炸!

啊,到了鸡冻人心的末段一步,要进行的便是为各国一个
div 小片设置运动轨迹,然后以爆开。

比繁琐,需要事先算有图的主干点,然后每个
div
块点以骨干也基准点向外举办直线走,不得不说,做此我还专程恶补了一下高中的几乎哪个地方知识(囧)。为了效果进一步实事求是,每个
div
块运动的直线距离添加一个正要负值恰当的自由数,那么就是好高达有的块炸的可比远,有的块炸的比近。利用非缩放的多少片图片做一下大致的示意图:

图片 18

 

终极当炸裂的立时,让每个微片渐变消失,就足以做到地方gif 所示之效率了。

 

总括一下,其实过程中还有很多细节无提及,相比重大之是卡通触发的时序控制,因为目前当研读
jQuery 源码,就概括的运了 jQuery 的连串来实现控制时序。

关系了不畏安利一下,我以
github 上关于 jQuery 源码的全文注明,感兴趣的可以扫描一下。jQuery
v1.10.2 源码表明

接下来本文没有贴代码,那一个动画效果总体的代码在本人的
github
上,有趣味呢得以扫描一下:boomJS 

正文较短,如若还有啊疑难或提议,可以多多互换,原创随笔,文笔有限,才疏学浅,文中若暴发不正之处,万望告知。

假诺本文对而发生帮,请点下推荐,写篇非易于。

 

相关文章

发表评论

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

网站地图xml地图