作者最近更改了Macbook笔记本?我发现,当鼠标徘徊在其程序码头上时,有一个非常丝般的变焦动画。你在屏幕前!
真正的MacBook笔记本放大动画:
模仿缩放动画:
实施的关键是使用毕达哥拉斯定理的计算,因此我们需要审查初中的数学。
毕达哥拉斯定理:平面上右三角形的两个右角长度的正方形和正方形等于斜边长的平方
简化为公式:
$ $ a^{2}+b^{2} = c^{2} $ o
只需查看毕达哥拉斯定理,然后将其与我们放大动画的公式相对应。
在上图中,假设三角▲是鼠标,则圆形○是计算机桌面程序中的应用图标。C厕所的长度是鼠标和应用程序图标之间的距离。鼠标移动时,程序对接中的每个应用程序和鼠标将动态变化;当距离时,应用程序图标的大小越大,反之亦然。
C的边线长度:
$ $ c = sqrt {a^{2}+b^{2}} $ o
使用表情符号表情符号,而不是以下应用图标
初始化状态Giveter字体尺寸为40px
获取全局监视鼠标中的移动事件DOM
每次鼠标移动时,循环都会计算每个元素和鼠标之间的距离
上述代码中的计算结果将具有负数,并且不会影响它。正方形后不会有负数。
最后,我们需要的是一个比例,而不是特定值,因此将其分配为一个值:
如前所述,距离越大,应该设置图标的越小,因此需要它。在实际应用中,该图标不能像用户一样小,并且具有最小值。
在初始化期间,给定的字体尺寸为40px。在那个时候,我们让表情符号Express
没有很多完整的计算。这是一个简单的粘性:
圆顶链接:Mac程序模仿Dock动画
这并不容易!如果我的文章对您有帮助,那么您是我的最大支持^_^。
原始:https://juejin.cn/post/7098327859122405383