具体实现
由于目前已有很多方案可以实现九宫格抽奖动画,比如使用动态active实现边框动画,用随机算法和定时器设置在何处停止等等....为了进一步提高性能,本文介绍的方法,将使用坐标法,将操作dom的成本降低,完全由js实现滑块的路径的计算,滑块元素采用绝对定位,让其脱离文档流,避免其他元素的重绘等等,最后点击按钮我们会使用防抖函数来避免频繁执行函数...,cell设计的目的就位为了和现实的元素相结合,我们可以手动设置单元格的宽度来实现不同大小的n维环形坐标集.
3.实现环形随机轨道运动函数
由抽奖动画分析可知,我们滑块运动的轨迹,其实就是环形坐标集合,...[0]}px, ${path[i][1]}px)`)
run(el, path, n, ++i, len)
}
}, 300)
}
这样就能实现我们的滑块按照九宫格边框运动的动画了...,当然以上函数只是基本的动画, 还没有实现在随机位置停止, 以及滑块的加速度运动,这块需要一定的技巧和js基础知识比如闭包.
3.1 加速度运动
加速度运动其实很简单,比如每转过一圈将setTimeout
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
