扑面而来的零散,一款有趣的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。

正文较短,要是还有怎样疑点依然指出,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有扶持,点个赞,写小说不简单。

打赏帮衬我写出越多好小说,谢谢!

打赏小编

进行出真知,有的时候看到有的诙谐的光景就想着用自己所学的文化复现一下。

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

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

本文作者: 伯乐在线 –
扑面而来的零散,一款有趣的Javascript动画效果。chokcoco
。未经小编许可,禁止转载!
欢迎参与伯乐在线 专辑撰稿人。

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

如今认为温馨 CSS3 过于薄弱,想着深切学习一番,遂以那么些 LOGO
为切入口,好好钻研学习了一下巢毁卵破的 CSS3 属性。webpack 的 LOGO
动画效果乍看不是很难,深切通晓之后,觉得其中其实大有文化,自己折磨了一番,做了一层层有关的
CSS3 动画效果。

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

本文完整的代码,以及越多的 CSS3
效果,在我 github 上得以见到,也期待大家可以点个
star。

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

 以前逛园子的时候来看 ChokCoco
的爆裂效果小说:【BOOM】一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←),觉得蛮有意思的,效果如下:

打赏支持自己写出更加多好文章,谢谢!

任选一种支付方式

亚洲必赢官网 8
亚洲必赢官网 9

5 赞 12 收藏 3
评论

 

立方体 3D 旋转

亚洲必赢官网 10

 亚洲必赢官网 11

至于小编:chokcoco

亚洲必赢官网 12

经不住大运似水,逃可是此间少年。

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

亚洲必赢官网 13

   boomJS 缘起

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

亚洲必赢官网 14

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

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

亚洲必赢官网 15   
  亚洲必赢官网 16

Demo戳我。

 

3D 透视照片墙

亚洲必赢官网 17

唯独觉得那个爆炸效果如故偏软了少数,没有爆炸那种碎片飞溅的感到,一直念兹在兹想要自己做一个3D效益的爆裂动效。那两日在搞一些小动画,就顺便也把3D爆裂做了出来,动画效果:

   boomJS 实现

自己感觉效果依然得以的,因为尚未利用
canvas
,所以不可能取到图片上每个像素的颜色值。使用了部分相比讨(sha)巧(bi)的艺术,上边简单讲讲怎么贯彻的:

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

原先的图是
<img> 标签的图,一张整图,最后的意义自然不是在原图上 boom
,看上去连贯的动画本质上只是一个障眼法,利用 Javascript
做了有的优美纷呈的更换,所以首先步所做的就是取到原图的高宽及相对浏览器视窗的定势,再成立一个新的器皿附着在原图之上,然后隐藏原图。

以此艺术里面我首要利用了
getBoundingClientRect
这些形式,该方法再次来到元素的分寸及其相对于视口的地点,完美满意自家的须要。

嗯,这一步做了如何吗?简单的如下所示:

亚洲必赢官网 18

 

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

末段效果是图形
boom
一下裂缝,所以第二步要做的就是模拟出一小块一小块小图,那里每一个小块就是一个新的
div ,然后使用图片的定势 background-position
将其稳定到适合的岗位,嘿,看看效果:

亚洲必赢官网 19

可以看到,这里分割成了成百上千个小块,每个小块其实是一个
div 然后,那么些小块被添加到我们上一步中设置的器皿当中,然后使用原图设置
div 的背景图,所有 div
利用的都是原图一张背景图,接着图片定位就足以做到如此一个效能,说起来很简单,可是中间经历了重重划算,怎么着分割图片,图片的
width 与 height 比(是横图如故竖图),每个小块 div 的定点及小 div
背景图的定点,具体的可以到那里探访:boomJS。

说到底为了为难,设置了圆角,不过这么爆炸的话,感觉不够真实,图片一块一块的清晰可辨。所以选用缩放
scale ,随机让各样小块放大或者收缩,再看看缩放后的功能:

亚洲必赢官网 20 

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

 

3、boom
爆炸!

啊,到了鸡冻人心的末尾一步,要做的就是给每一个
div 小块设置运动轨迹,然后还要爆开。

正如繁琐,须求先算出图片的中坚点,然后每个
div
块点以着力为基准点向外做直线运动,不得不说,做那些自己还专程恶补了一下高中的几何知识(囧)。为了效果越来越真实,每个
div
块运动的直线距离添加一个正负值恰当的随意数,那么就可以高达有的块炸的可比远,有的块炸的可比近。利用未缩放的小块图片做一下几乎的示意图:

亚洲必赢官网 21

 

最终在炸裂的眨眼间,让每个小块渐变消失,就可以形成地方gif 所示的法力了。

 

计算一下,其实进程当中还有为数不少细节尚未提及,相比主要的是动画片触发的时序控制,因为方今在研读
jQuery 源码,就概括的运用了 jQuery 的队列来促成控制时序。

关联了就安利一下,我在
github 上关于 jQuery 源码的全文注脚,感兴趣的可以扫描一下。jQuery
v1.10.2 源码申明。

然后本文没有贴代码,这一个动画效果完全的代码在自己的
github
上,有趣味也得以扫描一下:boomJS 

本文较短,如若还有怎么样疑点仍然指出,可以多多沟通,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

假定本文对您有协理,请点下推荐,写文章不不难。

 

跳跃的音符

亚洲必赢官网 22

莫不上边的机能对通晓 CSS3
的而言小菜一碟,写本文的目标也是自己要好读书积累的一个进程,感兴趣的就可以共同往下看啦。

骨子里 CSS3 效果真的很有力,下面的听从都是纯 CSS 达成,个人感觉越是深切CSS 的求学,越是觉得温馨不懂 CSS
,但是话说回来,那些职能的实用场景不大,但是作为一个有追求的前端,我认为依然有要求去美观打听一下那几个属性。

故而本文接下去要讲的大概有:

  • transform-style: preserve-3d 三维效果
  • perspective and perspective-origin 3D视距,透视/景深效果
  • CSS3 filter CSS3滤镜
  • transparent、radial-gradient 透明与渐变

transform-style

要动用 CSS3 已毕 3D 的效果,最要紧的就是信赖 transform-style
属性。transform-style 只有四个值可以挑选:

JavaScript

// 语法: transform-style: flat|preserve-3d; transform-style: flat; //
默许,子元素将不保留其 3D 地方 transform-style: preserve-3d; //
子元素将保留其 3D 地方。

1
2
3
4
5
// 语法:
transform-style: flat|preserve-3d;
 
transform-style: flat; // 默认,子元素将不保留其 3D 位置
transform-style: preserve-3d; // 子元素将保留其 3D 位置。

当大家指定一个容器的 transform-style 的属性值为 preserve-3d
时,容器的后人元素便会怀有 3D
效果,这样说有些抽象,也就是时下父容器设置了 preserve-3d
值后,它的子元素就足以相对于父元素所在的平面,进行 3D 变形操作。

当父元素设置了 transform-style:preserve-3d 后,就足以对子元素举办 3D
变形操作了,3D 变形和 2D 变形一样可以,使用 transform
属性来设置,或者可以通过制订的函数或者经过三维矩阵来对元素变型操作:

1、使用 translateX(length) 、translateY(length) 、 translateZ(length)
来举行 3D 位移操作,与 2D
操作一样,对元素进行移动操作,也可以统一为 translate3d(x,y,z) 那种写法;

2、使用 scaleX() 、scaleY() 、scaleY() 来开展3D 缩放操作,也能够统一为
scale3d(number,number,number) 那种写法;

3、使用 rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来开展 3D
旋转操作,也可以统一为 rotate3d(Xangle,Yangle,Zangle) 那种写法。

对此 API
的上学,我指出去源头看看,不要满足于消费别人的下结论,transform-style
API。

这边要越发提出的,3D 坐标轴,所谓的绕 X、Y、Z
轴的七个轴,这几个简单,感觉空间想象困难的,照着 API
试试,绕每个轴都转一下就领会了:

亚洲必赢官网 23

叩问过后,那么依靠地点所说的,其实大家就曾经得以做一个立方出来了。所谓实践出真知,上面就看看该怎么一步步获得一个立方。

1、准备七个正方形

其一好了解,正方体三个面,首先用 div 做出 6
个面,包裹在同一个父级容器上边,父级容器设置 transform-style:preserve-3d
,这样接下去就能够对 6 个面举办 3D 变换操作,为了方便演示,我用 6
个颜色不同的面:

亚洲必赢官网 24

上边的图是表示有 6 个面,当然大家要把 6 个正方形 div
设置为相对定位,重叠叠在一齐,那么相应是这么的,只能够看到一个面:

亚洲必赢官网 25

2、父容器做简单的更换

为了最后的看起来的机能赏心悦目,大家须要先对父容器举办转移,运用方面说的 rotate
属性,将容器的角度改变一下:

JavaScript

.cube-container{ -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
transform: rotateX(-33.5deg) rotateY(45deg); }

1
2
3
4
.cube-container{
    -webkit-transform: rotateX(-33.5deg) rotateY(45deg);
    transform: rotateX(-33.5deg) rotateY(45deg);
}

那就是说,变换之后,获得那样一个图形:

亚洲必赢官网 26

哦,那个时候,6 个 div 面依然是重叠在联名的。

3、对每个面做 3D 变换

接下去就是对每个面拓展 3D 变换了,运用 rotate 可以对 div
平面进行旋转,运用 translate 能够对 div
平面举行活动,而且要牢记现在大家是在三维空间内更换,转啊转啊,大家兴许会得到这么的模样:

亚洲必赢官网 27

算好旋转角度和摇头距离,最终上边的 6
个面就足以健全拼成一个立方体咯!为了效果更好,我给种种面增添部分透明度,最后得到一个总体的立方体:

亚洲必赢官网 28

为了更有立体感,大家可以调动父容器的转动角度,旋转看上去更立体的角度:

亚洲必赢官网 29

迄今,一个 3D
立方体就完事了。写那篇小说的时候,本来到此地,这一块应该就长逝了,可是写到那里的时候,突然突发奇想,既然正方体可以(正六面体),那么正四面体,正八面体甚至球体应该也能做出来啊?

啊,没有按住躁动的心,立马出手尝试了一番,最终做出了上边的多个:

亚洲必赢官网 30  亚洲必赢官网 31

就不再详细座谈哪些一步一步得到那八个了,有趣味的可以去自己的
github
上看看源码,或者直接和自我谈谈互换,不难的议论思路:

正四面体

和正方体一样,我们率先要未雨绸缪 4 个三角形(上面会详细讲怎么使用 CSS3
制作一个三角形 div),注意 4
个三角形应该是重叠在一道的,然后将中间多少个分级沿着三条边的主导点旋转
70.5 度(正四面体临面夹角),就足以拿走一个正四面体。

在意顺着三条边的基本点旋转 70.5
度那句话,意思是各种图形要定位两回旋转中央,也就是 transform-origin
属性,它同意大家设置旋转元素的重头戏地点。

球体

上边的 GIF 图因为添加了 animation
动画效率,看上去很像一个圆球在运动,其实只用了 4 个 div,每个 div 利用
border-radius:100% 设置为圆形,然后以骨干点为标准,每个圆形 div 绕 Y
轴旋转不一样的角度,再让漫天圆形容器绕 Y
轴动起来,就能够得到那样一个效能了。

 

perspective and perspective-origin 3D视距,透视/景深效果

接轨说 3D ,接下去要说的性质是 persepective 和 perspective-origin 。

persepective

JavaScript

// 语法 perspective: number|none;

1
2
// 语法
perspective: number|none;

perspective
为一个因素设置三维透视的相距,仅功效于元素的后人,而不是其元素本身。

简单易行的话,当元素没有安装 perspective 时,也就是当 perspective:none/0
时持有后代元素被减少在同一个二维平面上,不存在景深的成效。

而一旦设置 perspective 后,将会看到三维的功能。

perspective-origin

perspective-origin 代表 3D
元素透视视角的重心地点,默许的透视视角大目的在于容器是 perspective
所在的要素,而不是他的后裔元素的中部,也就是 perspective-origin: 50%
50%。

JavaScript

// 语法 perspective-origin: x-axis y-axis; // x-axis : 定义该视图在 x
轴上的地点。默许值:50% // y-axis : 定义该视图在 y
轴上的岗位。默认值:50%

1
2
3
4
5
// 语法
perspective-origin: x-axis y-axis;
 
// x-axis : 定义该视图在 x 轴上的位置。默认值:50%
// y-axis : 定义该视图在 y 轴上的位置。默认值:50%

值得注意的是,CSS3 3D 变换中的透视的透视点是在浏览器的前方。

说总是很难驾驭,运用地点大家做出来的正方体试验须臾间,我设置了正方体的边长为
50 px ,那里安装正方体容器 cuber-inner 的 persepective 的为 100 px,而
perspective-origin 保持为默认值:

JavaScript

-webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%;
-webkit-perspective: 100px; perspective: 100px;

1
2
3
4
-webkit-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-perspective: 100px;
perspective: 100px;

地点那样设置,也就是一定于本人站在 100px
的长短外去看这么些立方体,效果如下:

亚洲必赢官网 32

透过调整 persepective 和 perspective-origin
的值,可以看来不均等的图纸,这几个很好明白,我们寓目一个物体的角度和距离物体的距离不断发生变更,我们看的物体也是差其他,嗯想象一下完小课文,杨桃和个别,就能便于领悟了。

需要提出的是,我上边的多少个正多面体图形和球形图形是未曾添加 persepective
值的,感兴趣的可以加上试一下看看效果。

 亚洲必赢官网 33

实现

规律很粗略,就是用很多小图片拼凑成大图片,然后让小图片按照一定规律运动形成爆炸效果。那里的爆炸效果用的是
CSS3 的 3D 变换到做的,通过 js
动态改变变换参数形成动画。达成步骤省略说说:

1、图片拼凑

这一步相对不难,用的是众多 div
标签的背景图拼凑的,设置好每个 div 标签的 position
和 background-position 就可以了。那里要小心的一点就是丰盛 div
标签是纪念要用 innerHTML 四遍性全体抬高进去。尽管那里没有一向浮现图片,可是此间依旧new 了一个 image,并将图纸拼凑放在 load
事件中执行。效果和代码分别如下(实际效果没格子线的):

  亚洲必赢官网 34

亚洲必赢官网 35亚洲必赢官网 36

var img = new Image();
img.src = 'img/zoro.jpg';    //160*160,or you need to change wrapper's size
img.onload = function () {
    var x = y = 0,
    div = styleCtn = '',
    imgWidth = this.width,
    imgHeight = this.height,
    pwidth = pheight = 10,
    nx = Math.floor(imgWidth / pwidth),    //x方向粒子个数
    ny = Math.floor(imgHeight / pheight),    //y方向粒子个数
    wrap = document.getElementById('zd-wrap');

    for (var i = 0, num = nx * ny; i < num; i++) {
        x = (i % nx) * pwidth;
        y = Math.floor(i / ny) * 10;
    styleCtn = 'left: ' + x + 'px; top: ' + y + 'px; background-position: ' + (-x) + 'px ' + (-y) + 'px;';
    div = div + '<div class="bomb" style="background-image: url(' + this.src + '); ' + styleCtn + '"></div>';
    }
    wrap.innerHTML = div;    //添加图片
};

View Code

2、爆炸效果

这一步相对难了累累,因为都是三维的位移,分为平移和扭转二种运动会不难一点。

a)平移运动:在立体空间中的爆炸应该是这么的:

  亚洲必赢官网 37

回到平面空间应该是那般的:

  亚洲必赢官网 38

从上图能够总括出小块的运动方向,依据小块所处的岗位运动方向是区其余,左上角向左上角飞去,右下角向右下角飞去那样。那里应该有一些小块向屏幕飞来,还有一些背井离乡显示屏以崛起扑面而来的感到。编程中表现各轴运动的是
translate3d,那里注意显示屏和图表的坐标关系,显示屏的 Y
轴就是切实中的垂直方向、向下为正,Z轴就是面向用户方向。运动总计起来就是:

左上角:vx < 0, vy < 0,
vz随机

左下角:vx < 0, vy > 0,
vz随机

右上角:vx > 0, vy < 0,
vz随机

右下角:vx > 0, vy > 0,
vz随机

  亚洲必赢官网 39

此处 Y
方向没有严峻对半分,有一种一体化发展的感到。加速度的话模仿需要效法动力: vxa
= 0, vya = 0.5
(模仿动力),vza可以适量加点,能拉长扑面而来的痛感。

b)翻转运动

转头效果,就是 X
轴的团团转,为了效果更为绘声绘色必要引入 Y 轴的旋转,能够忽略 z
轴的转动。因为粒子小块的尺寸很小,所以那里不需要严刻控制旋转参数,一方面简化模型,另一方面减轻浏览器负荷。当然也无须引入旋转变量了,直接用
x、y 的坐标代入也足以博得不错的扭曲效果: rotateX(xdeg)
rotateY(ydeg),我那里引用了 Zachstronaut 的算法:

rotateX: Math.cos(0.1 *ys) + 'rad
rotateY: Math.sin(0.1 * xs) + 'rad

最终设置终止条件,可以根据 粒子小块的x、y
坐标判断是不是合宜让其脱离动画循环。

如此那般就兑现了动画,当然还必须要开启父对象的透视属性,大概设置透视距离
300px 左右就可以了。

3D 透视照片墙

回去小说一初叶我贴的相当 3D 照片墙,运用 transform-style: preserve-3d
和 persepective ,可以做出效果很好的这种 3D 照片墙旋转效果。

代码就不贴了,本文已经很长了,只是简短的座谈原理,感兴趣的去扒源码看看。

1、设立一个舞台,也就是包装旋转的图纸们的器皿,给她安装一个 persepective
距离,以及 transform-style: preserve-3d 让后代能够开展 3D 变换;

2、准备 N 张图片置于容器内部,N 的分寸看个人喜好了,图片的 3D
旋转木马效果是近似钢管舞旋转的移动,因而是绕 Y
轴的,大家关注的是 rotateY 的轻重,按照大家添加的图形数量,用 360°
的圆周角将各种图片等分,也就是让每张图纸绕 Y
轴旋转固定角度依次散开:(上面的图为表示效果,我调动了一下角度和透明度)

亚洲必赢官网 40

3、那几个时候,N
张图肯定是重合叠在了一同,所以这里最首要一步是使用 translateZ(length)
让图片沿 Z 轴平移,也就是运用 translateZ
可以让图片离大家更近或者更远,因为上一步设置了图片分化的 rotateY()
角度,所以 N 张图片设定一个 translateZ
后,图片就很自然以中央为圆心分散开了,也就是那样:

亚洲必赢官网 41

 

4、最终选用 animation ,大家让舞台,也就是包裹着图片的器皿绕 Y
轴旋转起来(rotateY),那么一个看似旋转木马的 3D 照片墙效果就旗开得胜了!

那里要注意的少数是安装的 persepective 值和单个图片 translateZ(length)
的值,persepective 一定要比 translateZ(length)
的值大,否则就是一对一于舞台跑你身后去了,肯定是看不到效果了。

 

本来想继承说

  • CSS3 filter CSS3滤镜
  • transparent、radial-gradient 透明与渐变

那些个可以让动画效果变得更赞的片段 CSS3
属性,可是觉得本文篇幅已经很长,而且那四个特性有点距离主旨,打算另起一文,再做深远切磋。

况且两点本文没有谈到的,不过很有用处的小细节,感兴趣的可以去打听摸底,也会在接下去进行详尽探索:

1、使用 transform3d api 代替 transform api,强制开启 GPU
加快,提高网站动画渲染品质;

2、使用 CSS3 will-change 提升页面滚动、动画等渲染质量

 

OK,本文到此截止,要是还有何样难题照旧提出,可以多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

正文完整的代码,以及更加多的 CSS3 效果,在自我
github
上得以观望,也愿意大家能够点个 star。

本文的 demo
戳我。

一旦本文对你有帮扶,请点下赞,写作品不易于。

打赏援助我写出越多好小说,谢谢!

打赏小编

后话

自身动用的图片尺寸为160*160,粒子尺寸为10*10,在iOS中表现非凡,移动chrome中展现的也还不易。就算一度调用了
GPU
加快渲染,但曾经到了众多进口移动浏览器的上限了,所以不指出再增添粒子数量。品质进步也做了,不过没找到好的突破点,如若您有更好的关键,请联系我!

耗时测试:

亚洲必赢官网 42 
 亚洲必赢官网 43

可以看看瓶颈在
Painting 上,再划分的话重要是图层重组,接着看一下动画片进程:

亚洲必赢官网 44

可以阅览在最起始的时候出现了多重的绿框,也就是此处发出了汪洋的
paint flashing(重绘)。再看我们一开首拼凑背景图的主意,用的是纯属定位+
left + top,那里会促成大批量的重绘。固然您可以在起初导用一个
translate3d(0, 0,
0)来限制渲染层让绿框消失,但并不会有多大的作用,因为根本耗时的是图层合成,并不是绘制。分层是必须的,我也尝尝过使用
translate 去替代 left + top,可是效果并不理想,暂时没有想到更好的法子改良渲染品质……

DOM操作方面倒是可以再改进,现在动效的代码是:

 this.nodes[i].style[this.transformProperty] = 'translate3d(' + this.xs[i] + 'px, ' + this.ys[i] + 'px, ' + this.zs[i] + 'px) rotateX(' + Math.cos(0.1 * this.ys[i]) + 'rad) rotateY(' + Math.sin(0.1 * this.xs[i]) + 'rad)';

循环中老是都会操作dom,而且在装置style上或者用属性查找的法子,这那里应该是足以革新的。一是重写style,幸免查找属性。二就是重写父对象div里面的innerHTML,就好像早先设置背景图一样,几回立异具有粒子块。

不过自己在步进调试的时候发现,除了第一次施行时会一个一个地设置粒子块的属性,前边的动画片循环中都现已被浏览器优化成完全重写了,每一遍换代都是一体更新的,所以地点的法门一般也无法升官太多。真的没悟出其余优化的章程了,借使你有典型,请联系自身!

打赏补助自己写出愈来愈多好作品,谢谢!

任选一种支付格局

亚洲必赢官网 45
亚洲必赢官网 46

5 赞 17 收藏 5
评论

如何使用

源码已经放开GitHub(bomb.js)上边去了,有趣味的同窗可以fork来探望,求星星!

自我早已将 js+HTML+CSS
都卷入好了,设置好容器之后直接引用bomb.js就足以了,如下:

亚洲必赢官网 47亚洲必赢官网 48

<style type="text/css">
    .wrapper {
        width: 160px;
        margin: 100px auto 0;
        position: relative;
        cursor: pointer;
        perspective: 200px;
    }
</style>

<div class="wrapper" id="zd-wrap"></div>

<script src="js/bomb.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var explore = new ParticlesTemplate(),
        exploreImg = new Image(),
        wrapper = document.getElementById('zd-wrap');
    exploreImg.src = 'img/zoro.jpg';    
    exploreImg.onload = function () {
        explore.init(exploreImg, wrapper);
        wrapper.addEventListener('click', function () {
            explore.go();
        }, false);
    };
</script>

View Code

 

就写到这了,码字不易,随手点赞哈~~~

参考资料:

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

2) 前端品质优化(CSS动画篇)

3) 

 

亚洲必赢官网 49

(图片出处:小周)

原创小说,转发请评释出处!本文链接: 

关于小编:chokcoco

亚洲必赢官网 50

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

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

亚洲必赢官网 51

网站地图xml地图