>

一款有趣的Javascript动画效果

- 编辑:至尊游戏网站 -

一款有趣的Javascript动画效果

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 

正文非常短,假若还会有哪些难题依然提议,能够多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

若果本文对你有救助,请点下推荐,写文章不轻巧。

 

本文由门户名站发布,转载请注明来源:一款有趣的Javascript动画效果