高手慎入,此文纯粹给自己扫盲滴!
背景:
慕课网“径向动画菜单”演示示例
课程目的:以圆形的轨迹显示导航菜单
效果如图:
原理:
本来可以直接使用这个公式,js循环处理即可。但O又抽风了,自己手动画一个图,然后就不淡定了:(此图片纯属个人错误分析,请忘了他吧!)
坐标求解方式不一致?为什么会想到这样低级的错误?
因为没有考虑到角的方向!
做完辅助线之后,不自觉地认为锐角∠BAP,就是所求的弧度。其实不然,因为平面的坐标系不一样:
数学理论中默认右上为平面的正方向;而在浏览器中右下才是平面的正方向!
复习下数学知识:
(1)角的方向
[R: radiansfor the most common angles in the unit circle measured in thecounterclockwise direction ]
即从X轴正方向按照逆时针方向旋转到终边所经过的角度
示例:
(2)象限
[Wiki:These are often numbered from 1st to 4th anddenoted by Roman numerals: I (where thesigns of the two coordinates are (+,+)), II (−,+), III (−,−), and IV (+,−).]
[R: 象限是根据x轴和y轴来定的。两个正的是第一象限,x正y负是第二象限,两个都负是第三象限,y正x负是第四象限。 ]
示例:
(3)三角函数的诱导公式
总结:
浏览器中平面的正方向,只是Y轴翻转了180° 而已,正好可以看做是地球的两极: 自转方向--北逆南顺。
而锐角∠BAP与旋转方向相反,是为负角。
所以: y = y0 – rsin(-θ) = y0 + rsinθ
修改下效果图,使结论更加明确:
参考资料:
http://www.imooc.com/video/7014
http://stackoverflow.com/questions/5300938/calculating-the-position-of-points-in-a-circle
http://en.wikipedia.org/wiki/Radian
http://en.wikipedia.org/wiki/Sine
http://math.rice.edu/~pcmi/sphere/drg_txt.html
http://designshack.net/articles/css/7-awesome-emmet-html-time-saving-tips/