饼图
- 弹性动画
- 缓动跟随
弹性动画
动画原理
根据上面的原理我们知道，你眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。
- 与setTimeout和setInterval区别
利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个原因：
A.setTimeout的执行时间并不是确定的。在Javascript中， setTimeout任务被放进了异步队列中，只有当主线程上的任务执行完以后才执行，因此 setTimeout 的实际执行时间一般要比其设定的时间晚一些。
B.刷新频率受屏幕分辨率和屏幕尺寸的影响。因此不同设备的屏幕刷新频率可能会不同，而 setTimeout只能设置一个固定的时间间隔，这个时间不一定和屏幕的刷新时间相同。
如果两者的步调不一致，就可能会导致中间某一帧的操作被跨越过去，而直接更新下一帧的图像。
举例：假设屏幕每隔16.7ms刷新一次，而setTimeout每隔10ms设置图像向左移动1px，
就会出现如下绘制过程：
第0ms: 屏幕未刷新，等待中，setTimeout也未执行，等待中；
第10ms: 屏幕未刷新，等待中，setTimeout开始执行并设置图像属性left=1px；
第16.7ms: 屏幕开始刷新，屏幕上的图像向左移动了1px， setTimeout 未执行，继续等待中；
第20ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=2px;
第30ms: 屏幕未刷新，等待中，setTimeout开始执行并设置left=3px;
第33.4ms:屏幕开始刷新，屏幕上的图像向左移动了3px， setTimeout未执行，继续等待中；
从上面的绘制过程中可以看出，屏幕没有更新left=2px的那一帧画
面，图像直接从1px的位置跳到了3px的的位置，这就是丢帧现象，这种现象就会引起动画卡顿。
- 与setTimeout相比，requestAnimationFrame优点
A.不卡顿。requestAnimationFrame最大优势是由系统来决定回调函数的执行时机。它能保证，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。
B.CPU节能。使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，此时刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停，requestAnimationFrame也会停止渲染，当页面被激活时，动画就从上次停留的地方继续执行，有效节省了CPU开销。
C.函数节流。在高频率事件(resize,scroll等)中，为了防止在一个刷新间隔内发生多次函数执行，使用requestAnimationFrame可保证每个刷新间隔内，函数只被执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销。
缓动跟随
- 二分法
举个栗子：
闪电侠从A 点到B点可以一步走完。可是他被施加了一个魔法：闪电侠走出的第一步永远是他所在的位置到B 点的一半。那么闪电侠只会越来越接近B 点，但永远达不到B 点。
闪电侠行走的这个过程就是从A点到B点的缓动效果。
image.png
大屏
- 基础概念
大屏就是要显示在大屏幕里的网页，通常放在公共空间中展示数据。
大屏的尺寸一般是1920*1080。
大屏可以不用考虑浏览器的兼容性，只要谷歌能兼容就行。
大屏的制作原理是在浏览器中，建立多个echarts 容器，将不同的echarts 图表放入其中。
注意：特殊字体+动画 CSS3
// 指定字体
@font-face {
font-family:myFont;
src:url(../font/DS-DIGIT.TTF)
}
// 简单动画 animate (顺时针旋转)
.img1{
animation:img1 20s linear infinite;
}
@keyframes img1{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
- echarts 的样式设置方法有以下几种：
颜色主题 （theme）
-- 默认两种light和dark。自定义主题(如walden, vintage)可选自己配置，在https://echarts.apache.org/zh/theme-builder.html下载js文件。
使用: echarts.init(xxx, 'walden')
调色盘（color）
-- options: { color: [] }
设置theme以后可以不设置color
具体样式设置（itemStyle、lineStyle、areaStyle、label、...）
-- 饼图差距过大可使用圆环 -- roseType, radius
视觉映射（visualMap）
网友评论