将收获
•防抖函数的应用•用css实现九宫格布局•生成n维环形坐标的算法•如何实现环形随机轨道运动函数•实现加速度动画•性能分析与优化
设计思路
?...为了进一步提高性能,本文介绍的方法,将使用坐标法,将操作dom的成本降低,完全由js实现滑块的路径的计算,滑块元素采用绝对定位,让其脱离文档流,避免其他元素的重绘等等,最后点击按钮我们会使用防抖函数来避免频繁执行函数...九宫格布局实现
为了让大家更加熟悉dom结构,这里我就不用js动态生成了.如下html结构:
圣诞抽抽乐...,当然以上函数只是基本的动画, 还没有实现在随机位置停止, 以及滑块的加速度运动,这块需要一定的技巧和js基础知识比如闭包.
3.1 加速度运动
加速度运动其实很简单,比如每转过一圈将setTimeout...路径的长度
* @param {number} random 中奖坐标
*/
function run(el, path, n = 1, speed = 60, i = 0, len = path.length