整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一直以來都覺得程序員的審美不行（包括我自己），但是后來接觸了不少的程序員，感覺不是審美不行，而是，懶。當然一般來講，很多事情就應(yīng)該是美工來做的。先看這個HTML5/canvas時鐘，界面很簡單，僅僅是幾個純色的圓環(huán)，但是對于初學者來說，實現(xiàn)起來還是有點難度的，這個時間也是獲取的本地時間，對于基礎(chǔ)的javascript水平需要非常的扎實，而且對于canvas的屬性，也需要很熟悉，主要還是javascript的邏輯要清晰，還有對于一些小細節(jié)的處理很重要，javascript算法倒是不多，想要更多HTML5/javascript特效游戲的朋友可以多關(guān)注我以前發(fā)的文章！以下附上源碼！
如果有正在學習前端javascript的伙伴，不知道怎么學習，或者該學些什么才能找到工作的可以一起來我們的頭條前端群570946165，一整套前端學習路線及系統(tǒng)學習資料已上傳到群文件！
代碼過長需要文檔版源碼來我的前端群570946165，源碼已經(jīng)上傳了！
5近兩年在國內(nèi)持續(xù)發(fā)酵，使得交互（interaction）這一概念從網(wǎng)站設(shè)計逐漸延伸到H5上。
就像魚離不開水，H5離開了交互，便失去了HTML5語言所賦予頁面形態(tài)的價值。說白了，如果H5弱化了交互，它充其量只是一個移動頁面的滑動PPT，根本談不上是H5。
“交互功能就像橡皮泥，只要發(fā)揮想象，它就能捏成各種形狀。”這是iH5.cn某位不愿意露臉的專業(yè)設(shè)計師原話。只要發(fā)揮想象，即便是同一個交互功能，也能延伸出各式各樣的戲法。
接下來以H5頁面制作工具——iH5.cn為例，選用最常用的時間軸功能，一步步深入探究它能延伸出的各種戲法。
1.先別急著動手，時間軸究竟為何物？
如果對時間軸的概念不清晰，說再多也是白費，我們先來科普一下時間軸。
如果在初中電腦課上有學過Flash制作小汽車運動的朋友，看到時間軸的界面時應(yīng)該會感到很熟悉。沒錯，時間軸的概念類似于Flash動畫制作，通過關(guān)鍵幀控制對象在規(guī)定時間內(nèi)的運動軌跡。
想用時間軸，請務(wù)必記住以下操作邏輯順序：時間軸——對象——軌跡——關(guān)鍵幀——修改關(guān)鍵幀屬性。
那么，時間軸最常見、最簡單粗暴的應(yīng)用是啥呢？
2.規(guī)律性的幾何運動
只要打開時間軸的循環(huán)播放功能，它就變成了無限循環(huán)的時間單元，所以我們能用時間軸延伸出很多規(guī)律性的運動形態(tài)，打個比方——
（1）線性運動
就比如上面這個奔跑的男人，純粹是單向線性往返運動，它的原理跟上面提到的用Flash做小汽車運動是一樣的，我們只需在時間軸上，用多個關(guān)鍵幀控制這個男人的X坐標就能實現(xiàn)了——
說到這里，要跟大家分享一個小技巧。大家注意到這個男人其實是在做往返運動，前進跟倒退的軌跡是剛好相反的。
因此我們在這類往返運動制作時，只需做好前進的軌跡，然后在時間軸下插入一個“結(jié)束——時間軸反向播放”的事件，這樣能減少很多工序，又能對稱兩個運動軌跡。
（2）圓周運動
跟線性運動相似，圓周運動只不過是在關(guān)鍵幀上調(diào)整素材的旋轉(zhuǎn)角度，這是換湯不換藥的，最常見的應(yīng)用就是模仿現(xiàn)實生活中的手表/時鐘，讓秒針、分針做周而復始的圓周運動。
假如把線性運動跟圓周運動同時放在同一個時間軸下，那么恭喜你，一個簡單粗暴的時間軸動畫完成了——
說到這里，不禁想吐槽一下...為什么圓周運動式的玩法這么獨特！這么好玩！怎么這么少設(shè)計師用？
它明明可以產(chǎn)生很多交互上的化學反應(yīng)！無論是預加載的Loading頁，還是過渡頁，圓周運動式的時間軸動畫都能給用戶一種獨特的心理預期，比如這種——
希望往后能看到這類時間軸應(yīng)用的化學反應(yīng)吧，咳咳，有點跑偏了，我們繼續(xù)...
3.不存在規(guī)律的運動
其實說不存在規(guī)律的運動有點籠統(tǒng)，其實說成仿真式視頻效果會比較合適，因為這類往往會讓你分不清它到底是時間軸動畫，還是視頻。
比如最近iH5.cn上那位專攻時間軸動畫的設(shè)計師小牙，他不久前的《門窗都關(guān)了,你就給我看這個?》H5——
效果就跟用AE做的動畫視頻如出一轍，特別是那個全屏振動效果，這完全媲美AE上的wiggle（a，b）振動效果！只不過，小牙用的只是一個簡單的“全屏振動”事件，就將這個效果復現(xiàn)了。
在這整套時間軸方案上看，設(shè)計師小牙讓我們看到了時間軸的更多可能，用時間軸模仿動畫視頻，未嘗不是一個很好的應(yīng)用形式。
時間軸還能做什么？
4.用時間軸做高級動效
時間軸動效的原理和原生的動效組件相似，都是通過在單位時間內(nèi)，改變元素的位置、大小、透明度、旋轉(zhuǎn)角度等促成相應(yīng)的動效效果。
可以是單位時間內(nèi)控制單一屬性，也可以是控制多個屬性。
控制多個屬性時，實現(xiàn)的動效效果更為驚艷！比如——
橡皮糖式滑動效果（控制高度、Y坐標）
重影效果（控制透明度、旋轉(zhuǎn)角度）
對折翻轉(zhuǎn)效果（繞X坐標旋轉(zhuǎn)）
視差效果（控制剪切屬性）
360度物體展示（控制旋轉(zhuǎn)角度、視距）
5.用時間軸做輔助
時間軸的靈活度很高，除了像上面提到的實現(xiàn)各種高大上交互，還可以作為輔助功能使用。此時可以將時間軸理解成導火線，用來引爆交互這顆重磅炸彈。
那么，它能“引爆”哪些交互？
用時間軸的循環(huán)播放控制頁面自動翻頁
時間軸用事件連接計數(shù)器，做成倒計時
時間軸用事件連接動效組件，配合動效的延時觸發(fā)，讓動效的銜接更自然
時間軸獲取當前事件，制作按下1秒等敏捷類小游戲
當然時間軸的輔助性應(yīng)用遠不止于此，上面只是拋磚引玉，還有更多有趣&實用的技法，還需靠大家去發(fā)掘。
功能就放在那兒，看似是死的；但只要懂的思考，它就能活起來，甚至能讓你的H5作品迸發(fā)出更多的光彩。
現(xiàn)在，你能聯(lián)想出哪個功能的延伸應(yīng)用了嗎？
JavaScript里，我們已經(jīng)會使用一些原生提供的方法來實現(xiàn)需要延時執(zhí)行的操作代碼，比如很多在線時鐘的制作，圖片輪播的實現(xiàn)，還有一些廣告彈窗，但凡可以自動執(zhí)行的東西，都是可以和定時器有關(guān)的。今天就來和大家分享一下，關(guān)于我們在JavaScript里經(jīng)常會使用到的定時器方法
在JavaScript里，我們要學習四個定時器的使用方法，setTiemout、setInterval、setImmediate、requestAnimationFrame，一起來看看吧！
JavaScript中提供了一些原生的函數(shù)方法來實現(xiàn)延時去執(zhí)行某一段代碼，這個就是定時器
下面我們來認識一下這些定時器
setTimeout:
設(shè)置一個定時器，在定時器到期后執(zhí)行一次函數(shù)或代碼段
var timeoutId=window.setTimeout(func[, delay,param1,...]); var timeoutId=window.setTimeout(code[, delay]);上面用到的關(guān)鍵詞名稱的意義：
timeoutId: 定時器ID
func: 延遲后執(zhí)行的函數(shù)
code: 延遲后執(zhí)行的代碼字符串，不推薦使用原理類似eval()
delay: 延遲的時間（單位：毫秒），默認值為0
param1: 向延遲函數(shù)傳遞而外的參數(shù)，IE9以上支持
setInterval:
以固定的時間間隔重復調(diào)用一個函數(shù)或者代碼段
var intervalId=window.setInterval(func, delay[, param1,...]); var intervalId=window.setInterval(code, delay);intervalId: 重復操作的ID
func: 延遲調(diào)用的函數(shù)
code: 代碼段
delay: 延遲時間，沒有默認值
setImmediate:
在瀏覽器完全結(jié)束當前運行的操作之后立即執(zhí)行指定的函數(shù)(僅IE10和Node 0.10+中有實現(xiàn))，類似setTimeout(func, 0)
var immediateId=setImmediate(func[, param1, param2, ...]); var immediateId=setImmediate(func);immediateId: 定時器ID
func: 回調(diào)
requestAnimationFrame:
專門為實現(xiàn)高性能的幀動畫而設(shè)計的API，但是不能指定延遲時間，而是根據(jù)瀏覽器的刷新頻率而定（幀）
var requestId=window.requestAnimationFrame(func);func: 回調(diào)
基本用法
// 下面代碼執(zhí)行之后會輸出什么？
var intervalId, timeoutId;
timeoutId=setTimeout(function() {
console.log(1);
}, 300);
setTimeout(function() {
clearTimeout(timeoutId);
console.log(2);
}, 100);
setTimeout('console.log("5")', 400);
intervalId=setInterval(function() {
console.log(4);
clearInterval(intervalId);
}, 200);
// 分別輸出: 2、4、5setInterval 和 setTimeout的區(qū)別？
// 執(zhí)行下面的代碼塊會輸出什么？
setTimeout(function() {
console.log('timeout');
}, 1000);
setInterval(function() {
console.log('interval')
}, 1000);
// 輸出一次 timeout，每隔1S輸出一次 interval
/*--------------------------------*/
// 通過setTimeout模擬setInterval 和 setInterval有啥區(qū)別么？
varcallback=function() {
if(times++ > max) {
clearTimeout(timeoutId);
clearInterval(intervalId);
}
console.log('start', Date.now() - start);
for(var i=0; i < 990000000; i++) {}
console.log('end', Date.now() - start);
},
delay=100,
times=0,
max=5,
start=Date.now(),
intervalId, timeoutId;
functionimitateInterval(fn, delay) {
timeoutId=setTimeout(function() {
fn();
if(times <=max) {
imitateInterval(fn ,delay);
}
}, delay);
}
imitateInterval(callback, delay);
intervalId=setInterval(callback, delay);如果是setTimeout和setInterval的話，它倆僅僅在執(zhí)行次數(shù)上有區(qū)別，setTimeout一次、setIntervaln次。
而通過setTimeout模擬的setInterval與setInterval的區(qū)別則在于：setTimeout只有在回調(diào)完成之后才會去調(diào)用下一次定時器，而setInterval則不管回調(diào)函數(shù)的執(zhí)行情況，當?shù)竭_規(guī)定時間就會在事件隊列中插入一個執(zhí)行回調(diào)的事件，所以在選擇定時器的方式時需要考慮setInterval的這種特性是否會對你的業(yè)務(wù)代碼有什么影響？
setTimeout(func, 0) 和 setImmediate(func)誰更快？
console.time('immediate');
console.time('timeout');
setImmediate(()=> {
console.timeEnd('immediate');
});
setTimeout(()=> {
console.timeEnd('timeout');
}, 0);在Node.JS v6.7.0中測試發(fā)現(xiàn)setTimeout更早執(zhí)行
下面代碼運行后的結(jié)果是什么？
// 題目一
var t=true;
setTimeout(function(){
t=false;
}, 1000);
while(t){}
alert('end');
// 題目二
for(var i=0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 0);
}
// 題目三
var obj={
msg: 'obj',
shout: function() {
alert(this.msg);
},
waitAndShout: function() {
setTimeout(function() {
this.shout();
}, 0);
}
};
obj.waitAndShout();在講解上面面試題的答案之前，我們先要理解一下定時器的工作原理，以方便理解上面的題目
這里將用引用How JavaScript Timers Work中的例子來解釋定時器的工作原理，該圖為一個簡單版的原理圖。
在這圖中，左側(cè)數(shù)字代表時間，單位毫秒；
左側(cè)文字代表某一個操作完成后，瀏覽器去詢問當前隊列中存在哪些正在等待執(zhí)行的操作；
藍色方塊表示正在執(zhí)行的代碼塊；
右側(cè)文字代表在代碼運行過程中，出現(xiàn)哪些異步事件。
大致流程如下：
1.程序開始時，有一個JS代碼塊開始執(zhí)行，執(zhí)行時長約為18ms，在執(zhí)行過程中有3個異步事件觸發(fā)，其中包括一個setTimeout、鼠標點擊事件、setInterval
2.第一個setTimeout先運行，延遲時間為10ms，稍后鼠標事件出現(xiàn)，瀏覽器在事件隊列中插入點擊的回調(diào)函數(shù)，稍后setInterval運行，10ms到達之后，setTimeout向事件隊列中插入setTimeout的回調(diào)
當?shù)谝粋€代碼塊執(zhí)行完成后，瀏覽器查看隊列中有哪些事件在等待，他取出排在隊列最前面的代碼來執(zhí)行
3.在瀏覽器處理鼠標點擊回調(diào)時，setInterval再次檢查到到達延遲時間，他將再次向事件隊列中插入一個interval的回調(diào)，以后每隔指定的延遲時間之后都會向隊列中插入一個回調(diào)
4.后面瀏覽器將在執(zhí)行完當前隊頭的代碼之后，將再次取出目前隊頭的事件來執(zhí)行
在這也只是對定時器的工作原理做了簡單的敘述，其實實際的實現(xiàn)處理過程會更加復雜。
在我們理解了定時器的運行原理之后，接下來我們就基于運行原理的基礎(chǔ)上，來看看上面的經(jīng)典面試題的答案
第一題
alert永遠都不會執(zhí)行，因為JS是單線程的，且定時器的回調(diào)將在等待當前正在執(zhí)行的任務(wù)完成后才執(zhí)行，而while(t) {}直接就進入了死循環(huán)一直占用線程，不給回調(diào)函數(shù)執(zhí)行機會
第二題
代碼會輸出 5 5 5 5 5，理由同上，當i=0時，生成一個定時器，將回調(diào)插入到事件隊列中，等待當前隊列中無任務(wù)執(zhí)行時立即執(zhí)行，而此時for循環(huán)正在執(zhí)行，所以回調(diào)被擱置。當for循環(huán)執(zhí)行完成后，隊列中存在著5個回調(diào)函數(shù)，他們的都將執(zhí)行console.log(i)的操作，因為當前JS代碼上中并沒有使用塊級作用域，所以i的值在for循環(huán)結(jié)束后一直為5，所以代碼將輸出5個5
第三題
這個問題涉及到this的指向問題，由setTimeout()調(diào)用的代碼運行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上. 這會導致這些代碼中包含的this關(guān)鍵字會指向window (或全局)對象，window對象中并不存在shout方法，所以就會報錯，修改方案如下:
var obj={
msg: 'obj',
shout: function() {
alert(this.msg);
},
waitAndShout: function() {
var self=this; // 這里將this賦給一個變量
setTimeout(function() {
self.shout();
}, 0);
}
};
obj.waitAndShout();1.setTimeout有最小時間間隔限制，HTML5標準為4ms，小于4ms按照4ms處理，但是每個瀏覽器實現(xiàn)的最小間隔都不同
2.因為JS引擎只有一個線程，所以它將會強制異步事件排隊執(zhí)行
3.如果setInterval的回調(diào)執(zhí)行時間長于指定的延遲，setInterval將無間隔的一個接一個執(zhí)行
4.this的指向問題可以通過bind函數(shù)、定義變量、箭頭函數(shù)的方式來解決
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
