整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
果圖
各位朋友大家好！
今天給大家帶來的是 酷炫的svg與canvas結合動畫特效源碼！
有想要文件版源碼的 可以私聊小編
廢話不多說上源碼！
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/
*
* @license Copyright (c) 2008-2015, GreenSock. All rights reserved.
* 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
*/
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";var a=Math.PI/180,b=function(a,b,c,d,e){this.p=b,this.f="function"==typeof a[b],this.start=this.value=this.f?a[b.indexOf("set")||"function"!=typeof a["get"+b.substr(3)]?b:"get"+b.substr(3)]():parseFloat(a[b]),this.velocity=c||0,this.v=this.velocity/e,d||0===d?(this.acceleration=d,this.a=this.acceleration/(e*e)):this.acceleration=this.a=0},c=Math.random(),d=_gsScope._gsDefine.globals,e=d.com.greensock.core.Animation._rootFramesTimeline,f="",g="Physics2DPlugin",h=String.fromCharCode(103,114,101,101,110,115,111,99,107,46,99,111,109),i=String.fromCharCode(47,114,101,113,117,105,114,101,115,45,109,101,109,98,101,114,115,104,105,112,47),j=function(a){for(var b=-1!==(window?window.location.href:"").indexOf(String.fromCharCode(103,114,101,101,110,115,111,99,107))&&-1!==a.indexOf(String.fromCharCode(108,111,99,97,108,104,111,115,116)),c=[h,String.fromCharCode(99,111,100,101,112,101,110,46,105,111),String.fromCharCode(99,100,112,110,46,105,111),String.fromCharCode(103,97,110,110,111,110,46,116,118),String.fromCharCode(99,111,100,101,99,97,110,121,111,110,46,110,101,116),String.fromCharCode(116,104,101,109,101,102,111,114,101,115,116,46,110,101,116),String.fromCharCode(99,101,114,101,98,114,97,120,46,99,111,46,117,107),String.fromCharCode(116,121,109,112,97,110,117,115,46,110,101,116),String.fromCharCode(116,119,101,101,110,109,97,120,46,99,111,109),String.fromCharCode(116,119,101,101,110,108,105,116,101,46,99,111,109),String.fromCharCode(112,108,110,107,114,46,99,111),String.fromCharCode(104,111,116,106,97,114,46,99,111,109),String.fromCharCode(106,115,102,105,100,100,108,101,46,110,101,116)],d=c.length;--d>-1;)if(-1!==a.indexOf(c[d]))return!0;return b&&window&&window.console&&console.log(String.fromCharCode(87,65,82,78,73,78,71,58,32,97,32,115,112,101,99,105,97,108,32,118,101,114,115,105,111,110,32,111,102,32)+g+String.fromCharCode(32,105,115,32,114,117,110,110,105,110,103,32,108,111,99,97,108,108,121,44,32,98,117,116,32,105,116,32,119,105,108,108,32,110,111,116,32,119,111,114,107,32,111,110,32,97,32,108,105,118,101,32,100,111,109,97,105,110,32,98,101,99,97,117,115,101,32,105,116,32,105,115,32,97,32,109,101,109,98,101,114,115,104,105,112,32,98,101,110,101,102,105,116,32,111,102,32,67,108,117,98,32,71,114,101,101,110,83,111,99,107,46,32,80,108,101,97,115,101,32,115,105,103,110,32,117,112,32,97,116,32,104,116,116,112,58,47,47,103,114,101,101,110,115,111,99,107,46,99,111,109,47,99,108,117,98,47,32,97,110,100,32,116,104,101,110,32,100,111,119,110,108,111,97,100,32,116,104,101,32,39,114,101,97,108,39,32,118,101,114,115,105,111,110,32,102,114,111,109,32,121,111,117,114,32,71,114,101,101,110,83,111,99,107,32,97,99,99,111,117,110,116,32,119,104,105,99,104,32,104,97,115,32,110,111,32,115,117,99,104,32,108,105,109,105,116,97,116,105,111,110,115,46,32,84,104,101,32,102,105,108,101,32,121,111,117,39,114,101,32,117,115,105,110,103,32,119,97,115,32,108,105,107,101,108,121,32,100,111,119,110,108,111,97,100,101,100,32,102,114,111,109,32,101,108,115,101,119,104,101,114,101,32,111,110,32,116,104,101,32,119,101,98,32,97,110,100,32,105,115,32,114,101,115,116,114,105,99,116,101,100,32,116,111,32,108,111,99,97,108,32,117,115,101,32,111,114,32,111,110,32,115,105,116,101,115,32,108,105,107,101,32,99,111,100,101,112,101,110,46,105,111,46)),b}(window?window.location.host:""),k=_gsScope._gsDefine.plugin({propName:"physics2D",version:"0.1.3",API:2,init:function(c,d,k){if(!j)return window.location.href="http://"+h+i+"?plugin="+g+"&source="+f,!1;this._target=c,this._tween=k,this._runBackwards=k.vars.runBackwards===!0,this._step=0;for(var s,l=k._timeline,m=Number(d.angle)||0,n=Number(d.velocity)||0,o=Number(d.acceleration)||0,p=d.xProp||"x",q=d.yProp||"y",r=d.accelerationAngle||0===d.accelerationAngle?Number(d.accelerationAngle):m;l._timeline;)l=l._timeline;return this._stepsPerTimeUnit=s=l===e?1:30,d.gravity&&(o=Number(d.gravity),r=90),m*=a,r*=a,this._friction=1-Number(d.friction||0),this._overwriteProps.push(p),this._overwriteProps.push(q),this._x=new b(c,p,Math.cos(m)*n,Math.cos(r)*o,s),this._y=new b(c,q,Math.sin(m)*n,Math.sin(r)*o,s),this._skipX=this._skipY=!1,j},set:function(){var e,f,g,h,i,j,b=this._tween._time,c=this._x,d=this._y;if(this._runBackwards===!0&&(b=this._tween._duration-b),1===this._friction)g=.5*b*b,e=c.start+(c.velocity*b+c.acceleration*g),f=d.start+(d.velocity*b+d.acceleration*g);else{if(b*=this._stepsPerTimeUnit,h=j=(0|b)-this._step,i=b%1,j>=0)for(;--j>-1;)c.v+=c.a,d.v+=d.a,c.v*=this._friction,d.v*=this._friction,c.value+=c.v,d.value+=d.v;else for(j=-j;--j>-1;)c.value-=c.v,d.value-=d.v,c.v/=this._friction,d.v/=this._friction,c.v-=c.a,d.v-=d.a;e=c.value+c.v*i,f=d.value+d.v*i,this._step+=h}this._skipX||(c.r&&(e=0|e+(0>e?-.5:.5)),c.f?this._target[c.p](e):this._target[c.p]=e),this._skipY||(d.r&&(f=0|f+(0>f?-.5:.5)),d.f?this._target[d.p](f):this._target[d.p]=f)}}),l=k.prototype;l._kill=function(a){return null!=a[this._x.p]&&(this._skipX=!0),null!=a[this._y.p]&&(this._skipY=!0),this._super._kill(a)},l._roundProps=function(a,b){(a.physics2D||a[this._x.p])&&(this._x.r=b),(a.physics2D||a[this._y.p])&&(this._y.r=b)},k._autoCSS=!0,k._cssRegister=function(){var a=d.CSSPlugin;if(a){var b=a._internals,e=b._parseToProxy,f=b._setPluginRatio,g=b.CSSPropTween;b._registerComplexSpecialProp("physics2D",{parser:function(a,b,d,h,i,j){j=new k;var o,l=b.xProp||"x",m=b.yProp||"y",n={};return n[l]=n[m]=c++,o=e(a,n,h,i,j),i=new g(a,"physics2D",0,0,o.pt,2),i.data=o,i.plugin=j,i.setRatio=f,j._onInitTween(o.proxy,b,h._tween),i}})}}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();
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擴展多，你不會翻墻也是白搭。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
