【问题标题】:Animate lines to move towards the screen / user | Create a "tunnel effect" [closed]动画线移动到屏幕/用户 |创建“隧道效应”[关闭]
【发布时间】:2015-12-18 16:41:13
【问题描述】:

这个问题具有设计和编程性质,因为我有两个部分解决了这些领域的问题。我在这里发布它是因为我想创建一个我既不知道如何显示也不知道如何制作动画的 JS 动画! 如果您认为这个问题发错了地方,或者您需要任何其他信息,请告诉我.

我很难想象如何创建一种效果,通过生成“向屏幕移动的线条”来产生“在无尽的隧道中”或“从管道上掉下来”的感觉圆形和线性。我看过一些视频可以完全创建这种效果,但我不知道如何在 JavaScript 中重新创建。

有关视觉示例,请参阅video

我对这些更复杂的动画很陌生,我尝试通过关键帧/过渡 + css mainupluation 缩放和移动画布元素来解决这个问题(这是我解决简单动画(如移动或褪色元素)的常用方法等等。) 已经,但我无法理解我必须如何调整或移动我的内容以使其看起来像在视频中,我只是无法弄清楚哪些属性会改变它看起来像那样。

在视频中,您可以看到圆形和线性形状,我可以想象我可以轻松放大圆形,从而产生它们向屏幕移动的错觉,这没问题,但我根本没有了解线性的工作原理。

我尝试在画布上绘图并为绘制的线条设置动画,它看起来很有希望,但如上所述没有具体的想法。

我将不胜感激任何正确方向的提示或任何关于使用动画来创建此效果的方法。

【问题讨论】:

  • 这是一个编程QA网站。一旦你已经尝试过一些东西,你通常会来这里询问细节。尝试其他论坛或先阅读更多关于 JS 动画的内容。
  • 何塞普您好,感谢您的反馈!正如我所看到的,您认为这个问题不适合我希望的问题。我的问题是,我无法想象我必须为哪些属性设置动画才能创建效果。例如。如果我有我必须在画布上绘制的信息,然后以给定的方式调整它的大小并将其移动到某个方向,那就没问题了。我感到有点无助,因为找到解决方案对我来说非常困难,我确实尝试过在其他地方搜索但没有找到合适的。
  • 有多种可能的方法,但从您的回复来看,您将画布方法(将事物绘制到(圆和线))与 SVG/CSS 方法混合在一起,其中您拥有具有动画属性的对象。如果你说的是 3D 效果,还有整个 WebGL 的东西。
  • 您好 Joseph,我想我无法正确传达我的问题,所以我向我的一个朋友寻求帮助。一切都通过画布操作修复,我缺少的是这种效果是通过以某个角度产生线条而产生的知识,并且随着它们移动得更远,它们会改变它们的长度和速度。案件结案。
  • 请参考下面我的回答中的第二个示例。

标签: javascript animation canvas


【解决方案1】:

在您回复我的评论后,我相信您混淆了概念和技术。首先设置一种方法,然后再详细了解它的工作原理。

如果您想在 动画属性 中使用 CSS/SVG,请查看以下示例:http://jsfiddle.net/zungoro/zr6Dd/

如果你想使用 HTML5 canvas,你需要 draw(线和圆等基元),这些是可以完成的一个很好的例子:@987654322 @和http://js1k.com/2013-spring/demo/1443

如果您想要逼真的 3D,可以使用 WebGL,请参阅以下示例:http://jeromeetienne.github.io/tunnelgl/(此处为教程http://learningthreejs.com/blog/2012/01/11/tunnel-effect/)和http://www.brainjam.ca/stackoverflow/webglspiral.html

enter code hereStackoverrflow doesn't let me link to JSfiddle w/o code.

【讨论】:

  • 感谢您的宝贵时间 Josep,chiptune 上的示例与我们创建的非常相似!我会接受这是正确的答案,因为我看到你理解了我想知道的,就在我自己完成后不久!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-09-16
相关资源
最近更新 更多