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

   boomJS 缘起

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

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

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

      

Demo戳我。

   boomJS 实现

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

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

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

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

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

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

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

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

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

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

3、boom 爆炸!

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

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

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

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

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

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

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

如果本文对你有帮助,请点下推荐,写文章不容易。

【BOOM】一款有趣的Javascript动画效果的更多相关文章

  1. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  2. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  3. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  4. Javascript动画效果(四)

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  5. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  6. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  7. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. javascript动画效果

    之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...

随机推荐

  1. 3.4.4 数据预留和对齐(skb_reserve, skb_push, skb_put, skb_pull)

    转自:http://book.51cto.com/art/201206/345043.htm <Linux内核源码剖析:TCP/IP实现>本书详细论述了Linux内核2.6.20版本中TC ...

  2. Nginx - Linux下按天分割日志

    待完善. 可参考:https://www.iteblog.com/archives/1244

  3. U-BOOT分析之:环境变量

    (环境如下:U-BOOT  S3C2440  LINUX) 记录自己的学习过程,如果分析有问题,请帮忙指正. 最近在研究U-BOOT的代码,其中的环境变量个人觉得用处非常大,所以重点学习和分析一下. ...

  4. Linux系统学习优缺点

    Linux是一套操作系统,按照鸟哥的说法Linux提供了一个完整的操作系统当中最底层的硬件控制与资源管理的完整架构,这个架构是沿袭Unix良好的传统而来的,功能强大而且稳定性卓越.其实Torvalds ...

  5. 强制 history 不记住特定的命令

    使用 HISTCONTROL 强制 history 不记住特定的命令将 HISTCONTROL 设置为 ignorespace,并在不想被记住的命令前面输入一个空格: # export HISTCON ...

  6. Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)

    互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,Dubbo是一个分布式服务框架,在这种情况下诞生的.现在核心业务抽取出来,作为独立的服务,使 ...

  7. (转)windows系统下Python环境的搭建

    原博文地址:http://www.cnblogs.com/windinsky/archive/2012/09/20/2695520.html 这段时间在做python,觉得这个配置环境的帖子还不错,分 ...

  8. Python之路【第六篇】python基础 之面向对象(一)

    一.三大编程范式 1.面向过程编程 2.函数式编程 3.面向对象编程 二.编程进化论 1.编程最开始就是无组织无结构,从简单控制流中按步写指令 2.从上述的指令中提取重复的代码块或逻辑,组织到一起(比 ...

  9. ajax的理解与工作流程

    一.什么是ajax ajax是一种异步通信技术.在ajax出现之前,客户端与服务端之间直接通信.引入ajax之后,客户端与服务端加了一个第三者--ajax.有了ajax之后,通过在后台与服务器进行少量 ...

  10. 浅谈PHP7新特性

    1. 运算符(NULL 合并运算符) 把这个放在第一个说是因为我觉得它很有用.用法: $a = $_GET['a'] ?? 1; 它相当于: $a = isset($_GET['a']) ? $_GE ...