Javascript 在网页上自动移动对象

我想创建一个网页，在页面上以指定模式移动对象

例如，用户单击一个“Go”按钮，一个对象沿着屏幕以图8的模式移动30秒

---

我不是在找人帮我写代码，我只是找不到任何地方可以开始——不管是在CSS、JS还是C#中。

解决方案一——使用CSS3的

@关键帧

和

动画

赞成：很少编码。您将使用关键帧指定

transform

或

transform3d

来精确指定对象在给定时间的位置，并将其关闭到比赛中。CSS可以为您安排时间和放松。这可以是您喜欢的细粒度，并且在不做太多更改的情况下，还可以影响其他事情，如缩放、旋转和不透明度

对于您的特定用例，这几乎肯定是您想要做的。请记住，您将通过javascript启动动画

缺点：这真的是为预先录制的动画。如果您希望动画跟随光标，或中途停止，这不是您想要的

解决方案二——使用javascript直接操作

顶部

和

左侧

或

转换

和

转换3D

。您将在由

requestAnimationFrame

设置的函数中执行此操作。在该函数结束时，您将再次调用

requestionAnimationFrame

。每次通过该方法，您都将更新对象当时应该位于的位置

优点：细粒度控制。它可以动态响应正在发生的事件，并在动画中更改其进程。如果写得正确，它显然比CSS解决方案性能更好（尽管您的场景可能不够复杂，无法注意到这一好处）

缺点：控制带来责任。管理一个场景可能会很复杂，如果让一个对象以图8的模式移动，可能会有些过火。但它确实开辟了新的前景

解决方案三——使用一个为您处理这些内容的库

如果这是我们将要做的很多事情，那么有一些很好的复杂动画工具包，例如。我肯定会看看现有的动画工具包，因为它们将真正帮助您的代码在许多不同的平台上工作。它们还将有助于解决不可避免的性能瓶颈

赞成：让其他人来管理动画的复杂性。他们已经解决了你可能解决的问题

---

犯人：过度杀戮是件有趣的事。让你的第三方库的存在来代替你自己做这件事的单调乏味，而不是简单地代替你自己如何做的知识的缺乏。

因为它是在客户端（在浏览器中）和一个特定的东西（不是标准的CSS动画），你不能避免使用JS。如果您还需要在服务器端计算一些东西，那么下面是JS+C#。动画本身实际上可以通过CSS实现，您只需要JavaScript来启动它。纯CSS示例：