javascript - 使用 Javascript 和简单的数学沿着曲线制作动画

标签 javascript html animation bezier curve

我觉得解决方案非常简单,但老实说,我在高中时多次数学不及格,所以我现在连基本概念都勉强掌握。

这个想法非常简单..我想让一堆图形对象沿着随机弯曲路径从 300x300px div 的一侧到另一侧进行补间动画,就好像它们从左上角被抛掷或掉落到顶部一样。右下角(反之亦然,来回)。

我知道我需要使用某种形式的三 Angular 学来解决这个问题(sin、cos、tan??)。我也已经知道如何获得我的两个点(随机化 Y 点,然后随机将 x 点放在 300px 宽度的正侧或负侧)。但我必须实际计算沿曲线的步骤的部分超出了我的能力。

这是一个基本上是我正在尝试的蹩脚图表。我搜索了谷歌,但所有的例子都过于复杂或过于抽象。我只是想学习如何在两点之间绘制一条曲线..就是这样!

crappy diagram of what I'm attempting

如此简单的问题:如何使用普通 JavaScript(请不要使用 JQuery)在两点之间随机化弯曲动画(或沿曲线绘制点)。

最佳答案

首先,如果您想快速了解 JavaScript 动画的数学原理,您可以考虑访问此 link

关于javascript - 使用 Javascript 和简单的数学沿着曲线制作动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45065580/

相关文章:

iphone - 如何在 iPhone 的 HTML5 网络应用程序中实现固定的标题和动画(如幻灯片)(如 Google Music 所做的那样)?

javascript - 按属性值对对象数组进行排序

javascript - 始终保持选定的文本浏览器突出显示

javascript - jQuery UI 自动完成功能只能运行一次

javascript - 使用 jQuery 进行渐变填充?

javascript - iPhone 中的融合图

javascript - jquery 动画和 css 动画之间的滞后

javascript - MongoDB 从控制台运行 javaScript 文件并输出

javascript - 使用自定义复选框,在其更改的事件上调用函数

ios - 具有快速动画的自定义 UIButton 类