使用运动模糊进行 Actionscript 补间
所以我在一个页面上有几个项目,每个项目都根据鼠标事件进行补间或补间。到目前为止,我可以在它们出/入时对它们进行缓动,但我如何设置补间,以便它在进出时变得模糊(运动模糊),就像运动预设中的那样。我想完成相同的运动预设设置,但使用 Actionscript。
如有任何帮助,我们将不胜感激,谢谢。
So i have several items on a page, each of which tweens out or in depending on a mouse event. So far i can do Easing on them when they are going out/in but how do i also set up a tween so that it blurs as the come in and out (motion blur) like the ones in the motion presets. I want to accomplish the same motion preset settings but with Actionscript.
Any help is appreciated, thank you.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以查看几年前我在博客中写的以下文章:
向 APE(AS 物理引擎)添加定向运动模糊
那时候,为了模拟定向运动模糊,您需要做一些涉及旋转的小技巧。
本文还包括一个独立的 Flex 示例,演示如何向补间添加方向运动模糊。它还解释了我提到的实现和技巧原则上是如何工作的。
下载定向运动模糊示例
You can check out the following article, I wrote in my blog few years ago:
Adding Directional Motion Blur to APE (AS Physics Engine)
Back in those days in order to simulate directional motion blur you needed to make a little trick involving rotation.
The article also includes an isolated Flex-sample which demonstrates how to add directional motion blur to a tween. Also it explains how the implementation and the trick I've mentioned works in principle.
Download Directional Motion Blur Sample
AS3没有“运动模糊”。但是您可以只使用正常的模糊,尽管它看起来不真实。
对于补间滤镜,我建议使用 TweenLite。转至 TweenLite 主页 (http://www.greensock.com/tweenlite/) 并向下滚动到 TweenLite/Max 插件资源管理器。单击“blurFilter”的示例按钮来查看它是如何完成的。
要进行更真实的运动模糊,您需要复制正在移动的实例并让它们在轨迹中相互跟随。然后,它们距离原始实例越远,您就会对它们进行更多的模糊处理。
There is no "motion blur" is AS3. But you could just use the normal blur, although it wont look realistic.
For tweening filters I would recomend using TweenLite. Go to the TweenLite home page (http://www.greensock.com/tweenlite/) and scroll down to the TweenLite/Max Plugin Explorer. Click on the example button for blurFilter to see how it's done.
To do a more realistic motion blur, you would need to duplicate the instance that is moving and have them follow each other in a trail. You would then blur each one a bit more, the further they are from the original instance.
这可能是详细解释在对象移动方向上进行运动模糊背后的计算的最佳文章。
http://labs.byhook.com/2010/ 02/11/simulated-motion-blur-in-flash/
它涵盖了线性、曲线和方向运动模糊。本文中的线性和曲线不一定“模糊”,而是沿着先前和当前路径“跟踪”精灵。
方向模糊看起来是最令人愉悦的,尽管精灵的急转弯可能会有明显的模糊角度。
一些开发人员声称只需修改 BlurFilter 的 BluX 和 BluY 值即可实现这种运动模糊,这对于水平/垂直运动(分别)来说很好。但是对角线中的任何东西,这看起来都会有点偏离,因为它只会导致高斯模糊(在 45 度时,基本上它在模糊 X 和模糊 Y 中具有相同的值,没有方向感)。
另一种可能实现这一点的方法是使用着色器。这需要一些 PixelBender 知识 - 然后您将创建一个可以获取源图像、角度和数量参数的滤镜(这样您就可以根据移动的距离制作更长的戏剧性模糊)。然后,您可以将此信息提供给着色器过滤器,这应该会达到相同的结果(甚至可能比仅在 AS3 中严格执行更快)。
新的 Flash Player 具有一些 3D 功能和硬件加速,因此可能值得检查此过滤器是否已经可用或由其他人创建! :)
This is probably the best article that explains in details the calculations behind making a motion-blur in the direction your object is going.
http://labs.byhook.com/2010/02/11/simulated-motion-blur-in-flash/
It covers Linear, Curve, and Directional motion blur. Linear and Curve in this article don't necessarly "blur" but instead "trails" the sprite along the previous and current path.
Directional blur looks the most pleasant, although the sharp turns of your sprite may have a noticeable blurred angle.
Some developers claim to achieve this motion blur by simply modifying a BlurFilter's blurX and blurY values, which is fine with horizonal / vertical movement (respectively). But anything in diagonals, this will look quite a bit off as it will just result a Gaussian blur (at 45degrees, basically it would have equal values in blurX and blurY, no sense of direction).
Another way this might possibly be achieved is with a Shader. This would require some knowledge of PixelBender - you would then create a filter that can take the source image, an angle and an amount parameter (so you can make longer dramatic blurs depending on the distance you move). You would then feed this information to your Shader filter and that should achieve the same result (maybe even faster than strictly doing it only in AS3).
The new Flash Player has some 3D capabilities and hardware acceleration, so it might be worth checking if this filter is already available or created by someone else! :)