diff --git "a/\345\205\263\344\272\216\345\260\217\347\220\203\345\212\250\347\224\273\347\232\204\344\270\200\344\272\233\351\227\256\351\242\230\350\247\243\351\207\212.md" "b/\345\205\263\344\272\216\345\260\217\347\220\203\345\212\250\347\224\273\347\232\204\344\270\200\344\272\233\351\227\256\351\242\230\350\247\243\351\207\212.md" new file mode 100644 index 0000000..14f8282 --- /dev/null +++ "b/\345\205\263\344\272\216\345\260\217\347\220\203\345\212\250\347\224\273\347\232\204\344\270\200\344\272\233\351\227\256\351\242\230\350\247\243\351\207\212.md" @@ -0,0 +1,21 @@ +# 关于小球动画的一些问题解释 + +> 有很多人在问关于小球动画的问题,这里我集中解释一下,如果有其他疑问可以给我留言 + +## offsetHieght触发重绘 + +因为浏览器引擎对重拍和重绘做了优化 比如说对元素的改变达到了一定的次数才会发生,那想要立即获得准确的DOM元素,就要手动的触发浏览器重绘,有很多方法都可以触发,比如:offsetHieght、offsetTop、offsetLeft、 offsetWidth、scrollTop、scrollLeft、scrollWidth等等都是可以的 + +## dropballs是干什么用的 + +dropballs是用来存已经显示过动画的小球,这样就可以直接unshift取到值。当然也可以不用这个,直接for循环balls数组判断状态为falsh的数组再改变状态 + +## balls数组里面为什么要存五个小球 + +有人说这里一个小球就够了,我记不清是谁了,在这里解释一下。存多个小球是为了在有连续点击的情况下小球动画也可以显示多个,也就是说可以同时飞多个小球 这里的小球飞入动画时间是400ms 如果只有一个小球 那么只能在第一个小球动画飞入之后也就是400ms之后才能显示另一个小球 但是400ms的时间足够我们点击多次了 这样就会造成视觉上的误差 + +## 小球动画是怎么做的 + +使用css3属性贝塞尔曲线,这个在网上可以在线调试。 + +购物车的坐标点是固定的,可以根据css的px值计算获得。