餅圖
- 彈性動(dòng)畫(huà)
- 緩動(dòng)跟隨
彈性動(dòng)畫(huà)
動(dòng)畫(huà)原理
根據(jù)上面的原理我們知道，你眼前所看到圖像正在以每秒60次的頻率刷新混弥，由于刷新頻率很高菱父，因此你感覺(jué)不到它在刷新。
- 與setTimeout和setInterval區(qū)別
利用seTimeout實(shí)現(xiàn)的動(dòng)畫(huà)在某些低端機(jī)上會(huì)出現(xiàn)卡頓剑逃、抖動(dòng)的現(xiàn)象浙宜。 這種現(xiàn)象的產(chǎn)生有兩個(gè)原因：
A.setTimeout的執(zhí)行時(shí)間并不是確定的。在Javascript中蛹磺， setTimeout任務(wù)被放進(jìn)了異步隊(duì)列中粟瞬，只有當(dāng)主線(xiàn)程上的任務(wù)執(zhí)行完以后才執(zhí)行，因此 setTimeout 的實(shí)際執(zhí)行時(shí)間一般要比其設(shè)定的時(shí)間晚一些萤捆。
B.刷新頻率受屏幕分辨率和屏幕尺寸的影響裙品。因此不同設(shè)備的屏幕刷新頻率可能會(huì)不同，而 setTimeout只能設(shè)置一個(gè)固定的時(shí)間間隔俗或，這個(gè)時(shí)間不一定和屏幕的刷新時(shí)間相同市怎。
如果兩者的步調(diào)不一致，就可能會(huì)導(dǎo)致中間某一幀的操作被跨越過(guò)去辛慰，而直接更新下一幀的圖像区匠。
舉例：假設(shè)屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms設(shè)置圖像向左移動(dòng)1px帅腌，
就會(huì)出現(xiàn)如下繪制過(guò)程：
第0ms: 屏幕未刷新驰弄，等待中，setTimeout也未執(zhí)行速客，等待中戚篙；
第10ms: 屏幕未刷新，等待中溺职，setTimeout開(kāi)始執(zhí)行并設(shè)置圖像屬性left=1px岔擂；
第16.7ms: 屏幕開(kāi)始刷新位喂，屏幕上的圖像向左移動(dòng)了1px， setTimeout 未執(zhí)行乱灵，繼續(xù)等待中忆某；
第20ms: 屏幕未刷新，等待中阔蛉，setTimeout開(kāi)始執(zhí)行并設(shè)置left=2px;
第30ms: 屏幕未刷新弃舒，等待中，setTimeout開(kāi)始執(zhí)行并設(shè)置left=3px;
第33.4ms:屏幕開(kāi)始刷新状原，屏幕上的圖像向左移動(dòng)了3px聋呢， setTimeout未執(zhí)行，繼續(xù)等待中颠区；
從上面的繪制過(guò)程中可以看出削锰，屏幕沒(méi)有更新left=2px的那一幀畫(huà)
面，圖像直接從1px的位置跳到了3px的的位置毕莱，這就是丟幀現(xiàn)象器贩，這種現(xiàn)象就會(huì)引起動(dòng)畫(huà)卡頓。
- 與setTimeout相比朋截，requestAnimationFrame優(yōu)點(diǎn)
A.不卡頓蛹稍。requestAnimationFrame最大優(yōu)勢(shì)是由系統(tǒng)來(lái)決定回調(diào)函數(shù)的執(zhí)行時(shí)機(jī)。它能保證部服，這樣就不會(huì)引起丟幀現(xiàn)象唆姐，也不會(huì)導(dǎo)致動(dòng)畫(huà)出現(xiàn)卡頓的問(wèn)題。
B.CPU節(jié)能廓八。使用setTimeout實(shí)現(xiàn)的動(dòng)畫(huà)奉芦，當(dāng)頁(yè)面被隱藏或最小化時(shí)，setTimeout 仍然在后臺(tái)執(zhí)行動(dòng)畫(huà)任務(wù)剧蹂，此時(shí)刷新動(dòng)畫(huà)是沒(méi)有意義的声功，完全是浪費(fèi)CPU資源。而requestAnimationFrame則完全不同宠叼，當(dāng)頁(yè)面處理未激活的狀態(tài)下先巴，該頁(yè)面的屏幕刷新任務(wù)也會(huì)被系統(tǒng)暫停，requestAnimationFrame也會(huì)停止渲染车吹，當(dāng)頁(yè)面被激活時(shí)筹裕，動(dòng)畫(huà)就從上次停留的地方繼續(xù)執(zhí)行醋闭，有效節(jié)省了CPU開(kāi)銷(xiāo)窄驹。
C.函數(shù)節(jié)流。在高頻率事件(resize,scroll等)中证逻，為了防止在一個(gè)刷新間隔內(nèi)發(fā)生多次函數(shù)執(zhí)行乐埠，使用requestAnimationFrame可保證每個(gè)刷新間隔內(nèi)，函數(shù)只被執(zhí)行一次，這樣既能保證流暢性丈咐，也能更好的節(jié)省函數(shù)執(zhí)行的開(kāi)銷(xiāo)瑞眼。
緩動(dòng)跟隨
- 二分法
舉個(gè)栗子：
閃電俠從A 點(diǎn)到B點(diǎn)可以一步走完】醚罚可是他被施加了一個(gè)魔法：閃電俠走出的第一步永遠(yuǎn)是他所在的位置到B 點(diǎn)的一半伤疙。那么閃電俠只會(huì)越來(lái)越接近B 點(diǎn)，但永遠(yuǎn)達(dá)不到B 點(diǎn)辆影。
閃電俠行走的這個(gè)過(guò)程就是從A點(diǎn)到B點(diǎn)的緩動(dòng)效果徒像。
image.png
大屏
- 基礎(chǔ)概念
大屏就是要顯示在大屏幕里的網(wǎng)頁(yè)，通常放在公共空間中展示數(shù)據(jù)蛙讥。
大屏的尺寸一般是1920*1080锯蛀。
大屏可以不用考慮瀏覽器的兼容性，只要谷歌能兼容就行次慢。
大屏的制作原理是在瀏覽器中旁涤，建立多個(gè)echarts 容器，將不同的echarts 圖表放入其中迫像。
注意：特殊字體+動(dòng)畫(huà) CSS3
// 指定字體
@font-face {
font-family:myFont;
src:url(../font/DS-DIGIT.TTF)
}
// 簡(jiǎn)單動(dòng)畫(huà) animate (順時(shí)針旋轉(zhuǎn))
.img1{
animation:img1 20s linear infinite;
}
@keyframes img1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
- echarts 的樣式設(shè)置方法有以下幾種：
顏色主題 （theme）
-- 默認(rèn)兩種light和dark劈愚。自定義主題(如walden, vintage)可選自己配置，在https://echarts.apache.org/zh/theme-builder.html下載js文件闻妓。
使用: echarts.init(xxx, 'walden')
調(diào)色盤(pán)（color）
-- options: { color: [] }
設(shè)置theme以后可以不設(shè)置color
具體樣式設(shè)置（itemStyle造虎、lineStyle、areaStyle纷闺、label算凿、...）
-- 餅圖差距過(guò)大可使用圓環(huán) -- roseType, radius
視覺(jué)映射（visualMap）
