【发布时间】:2015-12-18 16:41:13
【问题描述】:
这个问题具有设计和编程性质,因为我有两个部分解决了这些领域的问题。我在这里发布它是因为我想创建一个我既不知道如何显示也不知道如何制作动画的 JS 动画! 如果您认为这个问题发错了地方,或者您需要任何其他信息,请告诉我.
我很难想象如何创建一种效果,通过生成“向屏幕移动的线条”来产生“在无尽的隧道中”或“从管道上掉下来”的感觉圆形和线性。我看过一些视频可以完全创建这种效果,但我不知道如何在 JavaScript 中重新创建。
有关视觉示例,请参阅video。
我对这些更复杂的动画很陌生,我尝试通过关键帧/过渡 + css mainupluation 缩放和移动画布元素来解决这个问题(这是我解决简单动画(如移动或褪色元素)的常用方法等等。) 已经,但我无法理解我必须如何调整或移动我的内容以使其看起来像在视频中,我只是无法弄清楚哪些属性会改变它看起来像那样。
在视频中,您可以看到圆形和线性形状,我可以想象我可以轻松放大圆形,从而产生它们向屏幕移动的错觉,这没问题,但我根本没有了解线性的工作原理。
我尝试在画布上绘图并为绘制的线条设置动画,它看起来很有希望,但如上所述没有具体的想法。
我将不胜感激任何正确方向的提示或任何关于使用动画来创建此效果的方法。
【问题讨论】:
-
这是一个编程QA网站。一旦你已经尝试过一些东西,你通常会来这里询问细节。尝试其他论坛或先阅读更多关于 JS 动画的内容。
-
何塞普您好,感谢您的反馈!正如我所看到的,您认为这个问题不适合我希望的问题。我的问题是,我无法想象我必须为哪些属性设置动画才能创建效果。例如。如果我有我必须在画布上绘制的信息,然后以给定的方式调整它的大小并将其移动到某个方向,那就没问题了。我感到有点无助,因为找到解决方案对我来说非常困难,我确实尝试过在其他地方搜索但没有找到合适的。
-
有多种可能的方法,但从您的回复来看,您将画布方法(将事物绘制到(圆和线))与 SVG/CSS 方法混合在一起,其中您拥有具有动画属性的对象。如果你说的是 3D 效果,还有整个 WebGL 的东西。
-
您好 Joseph,我想我无法正确传达我的问题,所以我向我的一个朋友寻求帮助。一切都通过画布操作修复,我缺少的是这种效果是通过以某个角度产生线条而产生的知识,并且随着它们移动得更远,它们会改变它们的长度和速度。案件结案。
-
请参考下面我的回答中的第二个示例。
标签: javascript animation canvas