前端杂记(六)

2019 / 12 / 21

出色的动效设计

  1. 出色的设计会让元素在动画中来回移动,以保持连续性,来回移动会比淡入淡出的连续感更强。
  2. 出色的设计会把一个大的组件过渡动画拆分为多个分组分别动画,以增加元素的独立性,但也要保持他们的动画形式一样,以保持整体的一致性。
  3. 出色的设计不光用颜色大小位置来增加对比,还会运用动画来让元素更加突出。
  4. 出色的设计会用元素本身的形状改变来告诉用户状态发生变化,而不是通过文字提示。
  5. 出色的设计会让弹窗或者提示可以从点击的地方开始弹出,这样操作的目的性更强。
  6. 出色的设计会让内容的改变对其上下文的影响展现出来,互相协作而不是各自为营。

Canvas离屏渲染

canvas渲染一个rect的效率要远远高于渲染一个arc,因为圆形的计算过程要比矩形复杂的多,所以在重复渲染复杂的效果的时候,经常可以把一个图像先绘制到另一个备份的canvas上,然后再复制到绘制的canvas上,这就是离屏渲染,离屏渲染本身就是把绘制复杂效果改成绘制rect,因为复制粘贴是选中一个方的区域。离屏渲染是一种双缓冲机制,可以大幅度提高渲染效率。

webpack创建一个library

webpack打包的时候,正常情况下编译出去的文件是不能引入的,除非打包成一个库。

webpack.out.library可以让打包的文件输出为一个库,libraryTarget是指输出的什么样的库。

比如

 library: 'dodot',
libraryTarget: 'umd',

表示输出的库是可以在commonjs和amd.js等中可以运行的,webpack本身的运行方式是和commonjs是一样的,一般情况下都是这个。

输出一个库的话还需要把 package.json 的main 指向输出的文件,这样别人才能找得到。

1. 如果 libraryTarget: 'window',就可以通过 window.dodot.default 获取到这个库导出的对象了。

2. 如果libraryTarget: 'var', 那么需要通过script引入的时候,然后加载了之后就会声明一个全局变量dodot

3. 正常情况下都用umd,他可以支持多种引入方式。

如何计算帧率

最好的方式就是通过requestAnimationFrame来计算走了多少桢。

然后用间隔时间除以这个间隔走的桢数就能知道每一帧的时间,再用 1000 除以这个值就是桢率了

let frameCount = 0;

const loop = () => {
frameCount++
requestAnimationFrame(loop)
}

loop()

const calcInterval = 2000

setInterval(function () {
const fpsValue = (1000 / (calcInterval / frameCount)).toFixed(1)
element.innerHTML = `${fpsValue} fps`
frameCount = 0
}, calcInterval);

参考文章

创建library

详解webpack.output.libraryTarget

写评论
全部评论
暂无评论