动画线移动到屏幕/用户|创建一个"隧道效果"

时间:2015-12-18 16:41:14

标签: javascript animation canvas

这个问题涉及设计和编程性质,因为我有两个问题涉及这些方面。我在这里发布是因为我想制作一个我不知道如何展示动画的动画!如果您认为这个问题出错了,或者您需要任何其他信息,请告诉我

我在想象如何创造一种能够产生“无尽的隧道”的感觉方面遇到了一些麻烦。或者"掉下烟斗"这是通过生成向屏幕移动的"线来完成的。圆形和线形。我看过一些可以创建这种效果的视频,但我不知道如何在JavaScript中重新创建它。

有关可视化示例,请参阅此video

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

在视频中你可以看到圆形形状和线性形状,我可以想象我可以轻松地放大圆形形状,从而创造出它们向屏幕移动的错觉,这没有问题,但我根本没有想法线性的是如何工作的。

我尝试在画布上画画并为绘制的线条制作动画,但它看起来很有前景,但据说没有具体的想法。

我会很感激任何有关正确方向的提示或任何有关创建此效果的动画方法。

1 个答案:

答案 0 :(得分:0)

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

如果您想 CSS / SVG 动画属性,请查看此示例:http://jsfiddle.net/zungoro/zr6Dd/

如果你想使用HTML5 画布,你需要绘制(诸如直线和圆圈之类的原语),这些是可以实现的一个很好的例子:{{ 3}}和http://www.chiptune.com/starfield/starfield.html

如果您想要逼真的3D ,可以使用 WebGL ,请参阅以下示例:http://js1k.com/2013-spring/demo/1443(此处为http://jeromeetienne.github.io/tunnelgl/教程)和{{3} }

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