HTML5特效库酷炫的svg与canvas结合动画

HTML5特效库酷炫的svg与canvas结合动画特效源码

果图

各位朋友大家好！

今天给大家带来的是酷炫的svg与canvas结合动画特效源码！

有想要文件版源码的可以私聊小编

废话不多说上源码！

JS源码：

select=function(s) {

return document.querySelector(s);

selectAll=function(s) {

return document.querySelectorAll(s);

mainSVG=select('.mainSVG'),

orbit=select('#orbit'),

dot=select('#dot'),

startShape=select('#startShape'),

endShape=select('#endShape'),

shapeGroup=select('#shapeGroup'),

pContainer=select('#pContainer'),

particlePool=[],

numParticles=400,

particleCount=0

TweenMax.set('svg', {

visibility: 'visible'

})

TweenMax.set(['#startShape','#endShape'], {

transformOrigin:'50% 50%'

})

var orbitPath=MorphSVGPlugin.pathDataToBezier(orbit.getAttribute('d'), {

offsetX: 0,

offsetY: 0

})

var mainTl=new TimelineMax();

var tl=new TimelineMax({ repeat:-1, yoyo:false});

var tl2=new TimelineMax({ repeat:-1, yoyo:false, onUpdate:playParticle});

tl2.to(dot, 6, {

bezier: {

type: "cubic",

values: orbitPath,

autoRotate: false

ease:Linear.easeNone

})

//shapes

tl.to('#startShape', 20, {

rotation:360,

ease:Linear.easeNone

})

.to('#endShape', 20, {

rotation:-360,

ease:Linear.easeNone

},'-=20')

function createParticles() {

var i=numParticles, p;

while (--i > -1) {

p=document.createElementNS(xmlns, 'use');

p.setAttributeNS(xlinkns, "xlink:href", '#particle');

pContainer.appendChild(p);

//p.setAttributeNS(null, 'fill', particleColorArray[i % particleColorArray.length]);

p.setAttributeNS(null, 'opacity', 0);

p.setAttribute('class', "particle");

particlePool.push(p);

}

function playParticle(){

var p=particlePool[particleCount];

var curr={x:dot._gsTransform.x, y:dot._gsTransform.y};

var rad=Math.atan2(curr.y - 300, curr.x - 400);

var deg=Math.round(rad * (180/Math.PI));

//console.log(deg)

//console.log(dot._gsTransform.x)

TweenMax.set(p, {

x:randomBetween(curr.x, curr.x - 5),

y: randomBetween(curr.y, curr.y+5),

alpha:1,

transformOrigin:'50% 50%'

});

var tl=new TimelineMax();

tl.to(p, randomBetween(3, 6), {

//paused:true,

physics2D: {

velocity: randomBetween(5, 10),

angle:(deg % 2) ? deg : deg - 180,//randomBetween(-95, -85),

gravity:randomBetween(-1, 1)

scale:randomBetween(0, 3.3),

//rotation:randomBetween(180, 780),

onComplete:completeParticle,

onCompleteParams:[p],

alpha:0

//skewY:(Math.random() * 180),

//ease: Power4.easeIn,

//onStart:flicker,

//onStartParams:[p]

});

particleCount++;

particleCount=(particleCount >=numParticles) ? 0 : particleCount

}

function flicker(p){

//console.log("flivker")

TweenMax.killTweensOf(p, {alpha:true});

TweenMax.fromTo(p, 0.4,{

alpha:1

}, {

alpha:Math.random(),

ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 3, points: 6, taper: "both", randomize: true, clamp: false}),

repeat:-1

})

}

function completeParticle(p){

TweenMax.set(p, {

x:-10,

y:-10,

alpha:1,

scale:1

})

}

function randomBetween(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

createParticles();

mainTl.add(tl,0);

mainTl.add(tl2,0);

//ScrubGSAPTimeline(mainTl)

mainTl.timeScale(1)

TweenMax.globalTimeScale(1)

/*!

* VERSION: 0.1.3

* DATE: 2015-03-24

* UPDATES AND DOCS AT: http://greensock.com

* This is a special version of the plugin that is only to be used on certain sites like codepen.io. It will redirect to a page on GreenSock.com if you try using it on a different domain. Please sign up for Club GreenSock to get the fully-functional version at http://greensock.com/club/

* Physics2DPlugin is a Club GreenSock membership benefit; You must have a valid membership to use

* this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.

* For licensing details, see http://greensock.com/licensing/

* @author: Jack Doyle, jack@greensock.com

HTML5 是下一代 HTML 标准。

HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。

优势：开发技术简单，研发周期短，用户接触成本低

一、H5的优势是兼容性好，用H5的技术开发出来的应用在各个平台都适用，且可以在网页上直接进行调试和修改，开发和维护的成本较低，开发周期较短。

二、强化了Web网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。

三、追加了本地数据库等Web应用的功能。

适合场景：把手机网站当成网络上的“电子产品介绍手册”。

手机网站更适合用户“主动百度搜索”或者“主动访问”，适合于陌生用户的低频或初次访问，让用户更完整和详细的获得快速介绍。通常用户使用搜索引擎、手动输入网址等形式进行访问。

H5不足的地方表现在软件运行速度容易受网络影响，对于摄像头、陀螺仪等硬件支持较差，开发出来的应用性能较差，不适合处理较复杂的逻辑等等。

H5的应用。

1、HTML5的游戏开发，例如简单的微信小游戏，打飞机等，也有白鹭egret引擎，还有cocos2d-js等等。

2、轻应用、Webapp、微站

网站包括PC端和移动端，响应式网站适配不同的终端。

HTML5培训开发移动应用更灵活。采用HTML5技术的轻应用、WebApp相信会更容易被大众所认可，接受。

3、Hybrid App是指介于web-app、native-app这两者之间的app,它虽然看上去是一个Native App，但只有一个UI WebView，里面访问的是一个Web App，比如街旁网最开始的应用就是包了个客户端的壳，其实里面是HTML5的网页，后来才推出真正的原生应用。

4、基于微信平台的开发，微信开放JSSDK让H5的开发人员可以调用底层功能，实现扫一扫，卡卷，微信支付，等操作

5、HTML5教程移动营销

游戏化、场景化、跨屏互动，HTML5技术完美的满足了各大广告商心里的梦想，从形式到功用、到传播，只要是你能想到的，没有它做不到的。

6、WebVR让虚拟现实大众化

WebVR就是通过HTML5教程来把虚拟现实内容嵌入到web页面中，谷歌、Facebook等巨头都十分欣赏这一功能。

7、动漫、二次元

HTML5技术的成熟，还将会带来动漫产业的升级，从而为读者们带来更场景化，更真实化的方便体验。

览器，在这个时代继续统治着桌面平台互联网入口的软件类型，即使是在传统桌面市场的萧条期，依然是我们无法缺少的产品。而作为浏览器厂商们也仍然无法完全放弃传统桌面平台带来的流量，继续在这个产品线上保持稳步的投入。

不过我们也发现，随着移动互联网的介入，用户对于桌面浏览器的需求也越来越回归本质，即回到浏览器本身的浏览上来，而将更个性化的需求转移到了移动平台上。那么浏览器的本质最看重的是什么呢？我认为就是最纯粹的“看得快”和“看得全”。

所以本次评测我们也将重点测试浏览器的核心素质，分别是JavaScript性能测试、CSS3支持测试、Acid3测试、GPU加速测试以及HTML5兼容性测试。涉及产品包括：Chrome、360、QQ、百度、搜狗、猎豹、傲游、Firefox、IE以及Edge。

参测产品及版本号

测试环境

JavaScript性能测试

JavaScript性能反映了一款浏览器的基本素质，在这里我们使用了SunSpider JavaScript Benchmark基准测试。这是一种JavaScript测试基准，是一款权威的专注于实际问题解决的测试软件。测试中，得分越低越好。

我们在每款参测浏览器在相同环境下，进行Javascript基准测试，以求得公平的测试数据。针对双核浏览器，我们会对其两个核心分别进行测试。

SunSpider JavaScript Benchmark基准测试

以下为测试结果：

从上表中可以看出，在这项测试中基于Chromium内核的所谓极速内核都败下阵来，数值大多在280ms以上，而Firefox更是高达340ms以上。相反，基于IE内核的兼容模式反而表现良好，结果大多在都在150ms左右。

这里表现最出众的是微软用来取代IE的Edge浏览器，不过这款浏览器的份额却越来越小，且只向Windows 10系统提供。但不管怎样，在这一项测试中，Edge无疑是胜出者。

CSS3支持测试

CSS简单来说就是网页的布局、字体、颜色、背景和其它效果的样式设定。也就是有它来展现出网页的显示样式和效果，所以对于CSS的支持程度决定了一款浏览器能否完整且正确地显示网页。

CSS3是CSS技术的升级版本，现在的CSS3分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

针对CSS3的测试，我们通过专业的测试站点CSS3 Selectors Test来进行。最终考察的是通过率，总共有574项测试，通过率越高表现越好。

CSS3 Selectors Test

以下是我们的测试结果：

从上表中可以看出，所有参测的浏览器在这一项的表现中都是合格的，全都顺利地通过的CSS3测试。可见这项标准在几乎所有的浏览器中都得到了足够的重视，这也是浏览器的基本素质之一。

Acid3测试

Acid3测试是一份网页浏览器及设计软件之标准兼容性的测试网页，其测试焦点集中在ECMAScript、DOM Level 3、Media Queries和data: URL。Acid3是目前Web标准基准测试中最严格的，对DOM和JavaScript都有一定约束。

我们用到的Acid3测试，是通过专门的Acid3网站进行的，分数达到100才算完整通过测试。且若为完美通过测试，不应看到左上角的红字。

Acid3测试(图为不完美通过)

下面为本次测试的结果：

可以看出，在这项测试中所有参测浏览器都能够通过测试，即达到100分满分，但是唯有傲游浏览器不是完美通过的。傲游这个问题在我们去年测试时就遇到了，但看来并没有做相关的调整。

值得一提的是，在去年的测试中，猎豹浏览器连100分满分都达不到，但在今年已经能够完美通过测试了，这里的进步可以肯定一下。

图形加速测试

接下来是图形加速测试，这项标准在网页游戏越来越多的当今环境下也体现得尤为重要。这项测试将反映出浏览器对于页面图形处理的能力，尤其是GPU加速性能。是否能够更好地看视频和玩游戏，它起到了很大的作用。

本轮测试我们使用的是Mozilla的专门测试网站进行的FishIETank方法，统一设定2000条鱼，分辨率为1440x900，帧数越高者表现越好。这里的数据为稳定下来的帧数数值。

FishIETank测试

以下是测试结果：

从上图可以看出，这一部分测试的结果大部分差距不大，其中帧数最高的为Chrome浏览器，而帧数最稳的则是Edge浏览器。这里个人更倾向于Edge的稳定帧数，尽管上限不高，但是帧数非常平滑，不会出现突然掉帧的情况，因此视觉体验最好。

不过360浏览器在我们的测试过程中帧数非常低，已经卡成幻灯片模式了，其中还数次造成显卡驱动出问题而导致黑屏。至于IE，在我们的测试中始终无法初始化WebGL，所以完全无法正常打开FishIETank网站。

HTML5兼容性测试

最后一项测试为HTML5兼容性测试，HTML5的意义在于对更先进采用HTML5标准的网站的支持能力，同时对HTML5的支持效果也反映出了浏览器的前瞻性和对新技术的态度。越来越多的网站在表现图形动画，甚至是网页游戏时已经抛弃传统的Flash技术，转而使用HTML5。所以HTML5的重要性也逐渐凸显出来

HTML5测试我们使用的是专门的测试网站，它会直接为当前浏览器打出相应的分数，数值越高支持越好，满分500分。

HTML5测试

以下为测试结果:

从上表可以看出，在HTML5方面表现最好的是众多以Chromium为内核的浏览器，而表现最差的是IE。需要说明的是，在双核浏览器中，我们分别对两个内核都进行了测试，最终选取高的拿一个数值，且这些高数值均得自极速内核。而以IE内核为基础的兼容模式的分数普遍不高，这一点与IE本身的低分值是相符的。

最终结果及总结

好了，现在我们来将前面的各项测试结果进行一下总结，详见下表：

从上面的表格中，我们可以发现Edge的表现较为突出，相比去年可以说提升很大，不论是在JavaScript性能测试还是图形加速测试中都表现良好，而其他方面也保持了较平均的水准，只是HTML5一项偏弱。

国产浏览器方面，由于基本都是Chrome和IE的套壳产品，所以也同时兼顾了Chrome和IE内核的强项，比如在HTML5兼容方面使用Chrome内核，而在JavaScript方面是用IE内核，比较自由。但由于同时使用的都是别人家的统一内核，所以各自之间差异并不大，主要的区别还是各自产品附加的功能，比如抢票啊、云存储啊、安全啊之类的。

至于我们这次评测为什么没有涉及国产浏览器擅长的附加功能，主要是因为用户对于这些功能的需求不同，看法也不同。有的人就喜欢干净简洁的浏览器，有的人就习惯功能繁多的浏览器，我们很难做到客观。

所以从以上的本质测试来看，Edge无疑是最突出的。当然这也不是说Edge就是最好的浏览器，一来你要用它必须安装Windows 10系统，二来Edge独特的内核在对老IE支持的站点上兼容性不足，比如网银什么的会比较麻烦。

最后我要说的是，这个评测只是从技术层面对现在的浏览器产品做一个相对客观的硬标准的测试，不是告诉你应该选哪款浏览器，毕竟每个人的需求都不同。你要抢火车票，就算Edge分数再高也帮不了你；Chrome扩展多，你不会翻墙也是白搭。

在线咨询

上一篇：前端实现文本对比，并高亮显示差异！
下一篇：Git分支之分支的新建与合并解析

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5特效库 酷炫的svg与canvas结合动画

JS源码：

您的项目需求

HTML5特效库酷炫的svg与canvas结合动画