澳门在线威尼斯官方 > 威尼斯澳门在线 > 意气风发款有意思的Javascript动漫效果

原标题:意气风发款有意思的Javascript动漫效果

浏览次数:120 时间:2019-12-01

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 评论

 

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:意气风发款有意思的Javascript动漫效果

关键词:

上一篇:编程基础,nodejs部署方式

下一篇:层叠上下文,CSS里的BFC和堆叠上下文