问题标签 [gsap]

如何使用 TweenLite [actionscript 3 library] 使对象以圆周运动从 (startX,startY) 移动到 (destinationX,destinationY) 并有一些像差？

I'm still relatively new to OpenGL/OpenCV, so I'm still unfamiliar with the multitudes of libraries available for use, particularly for animation. Where I'm from (the Flash world), we have access to several 3rd-party tweening engines that make life very easy for us when we want to programmatically move things around the stage without relying on the (vastly inferior) built-in Adobe tween APIs. One of the most popular is Greensock's TweenMax.

我在解决 Javascript 动画滚动问题时遇到了一些麻烦。

我正在使用构建在 Greensock JS 补间库之上的 SuperScrollorama Jquery 插件。

我所追求的基本效果是“固定”一个部分，然后使用垂直滚动来展开一些内容，然后在内容完全展开后“取消固定”该部分，这样用户就可以滚动 - 即http:// blueribbondesign.com.au/example/

但是，当我尝试将相同的效果一个接一个地应用于多个部分时，一切都被破坏了：固定元素下方的“未固定”内容被推离屏幕，并且在执行动画时似乎错误计算了元素的高度反向（即向上滚动页面）。- 即http://blueribbondesign.com.au/example2/

我一直在无休止地摆弄“position:fixed”和“pin-spacer”div，并尝试将 Superscrollorama 插件附加到各种包含元素，但仍然无法弄清楚如何让它工作。

非常感谢来自网络优秀众包思想的任何帮助，

干杯，

田纳西州。

我是相对较新的 javascript，但我对其他语言很满意。我正在尝试使用 Greensock 时间线来构建模块化序列以减少代码重复。我正在尝试拥有一个可供我所有功能访问的单例时间线。我尝试只使用全局变量并将 to() 方法附加到它。这适用于 chrome 和 iexplorer，但不适用于 Firefox。我在 Firefox 错误控制台中收到“this.timeline is null”错误。然后我尝试了这个：

这产生了我想要的单例，但我只在 FF 中得到同样的错误。下面的代码在 chrome 和 iexplorer 中都可以正常工作：

开发者.html：

foo.js：

因此，这将使#bar 和#canv 同时进入（如果我调用do2(0); 那么#canv 将在#bar 完成后进入）。

您对我做错了什么或为什么 FF 以不同方式处理代码有任何见解吗？

谢谢你的帮助。

编辑1

浏览器版本：Chrome(19.0.1084.56) Internet Explorer(9.0.8112.16421) Firefox(13.0)

编辑2

该错误从 TweenMax.min.js 文件内部生成。

编辑3

在尝试使用全局时间线和单例之前，我通过将 TimelineMax 引用传递给每个函数并返回更新的 TimelineMax 来实现所需的功能。所以，我的代码看起来有点像这样：

foo.js

这在 Firefox 中似乎运行良好，但使用时间线对象玩烫手山芋有点乏味。这是首选方法吗？我在哪里可以找到格式良好的 javascript 编码标准和最佳实践？

编辑4

这是完整的非工作代码。它在 chrome 和 ie 中都按预期工作，但我收到来自 TweenMax.js 库的 FF 错误。

dev_page2.html：

dev2.js：

I am working on a project with two images, a background(B) and a foreground(F).

My goal is to have (F) "burn away" to reveal (B). At the moment I am trying to do this with a circle shaped mask. I can get my mask to appear statically, but no matter what I try I cannot get the mask to grow to reveal more of (B). Any ideas? This is the code I have right now

Any suggestions or alternate methods?

Thank you!

我有一个严重的问题，因为从创建问题到发现问题之间有 6 个月的间隔。早在年初，我就被要求在仅 Flash 的网站中添加一些图形并更改一些文本。该站点非常复杂，我当然没有/我没有达到从头开始创建此类代码的水平，但我确实有一些使用 Flash 的经验，并且似乎能够添加图形并更新一些内部文本。在添加图形的过程中，我不得不放大包含所有元素的 main_mc，包括新的元素。当时我不知道，但现在发现，更改 main_mc 符号的属性似乎禁用了在单独的 Main.ac 文件中创建的复杂补间操作。我没有碰主要。

这是我认为与此相关的类文件中的代码：

冒着给我自己和我的客户带来一些公众尴尬的风险，但因为我真的可以使用帮助，这里是现场网站：（删除）

导航到（英文）服务 -> 示例。您可以单击按钮，例如 Legal，它将深入到示例主题。在旧的工作版本中，您将单击最后一个主题，例如诉讼，屏幕将动画到舞台右侧，您将看到一个看起来像是从打印机出来的英文文档的图像。然后用户可以点击翻译按钮，然后会出现第二张德语图像。单击“再次选择”将使您从舞台左转回到主屏幕。当然，这是行不通的。

我已经在开发位置放置了一个工作版本：（已删除）

我可能会在一天左右的时间内删除开发副本。

我真的很感谢一些帮助解决这个问题。

[编辑] 我可能应该补充一点，旧的 main_mc 是 2359x1692，而新的 main_mc 是 2967.65x1939.35。舞台上的位置是相同的：-800 x 0。不完全确定新尺寸是如何达到 6 个月前的，但需要放大以适应额外的图形元素。客户需要原始开发人员提供的大面积区域才能在宽屏显示器上看起来不错。

谢谢。

我有这个代码：

如何循环这两个补间？当第二个动画完成时，它会停止。是否可以在无限循环中一个接一个地运行时间线？

肿瘤坏死因子

我正在使用 Greensock 的 TweenLite (AS3) 来放大和缩小图片。在角落附近缩小时会变得很棘手。我想知道是否有办法在补间期间限制宽度/高度/x/y，使其永远不会超出范围。

目前，我有一个在补间完成时调用的“修复器”方法，但这并不理想。

我做了一个演示来说明我的意思，试着在角落附近缩小。（鼠标滚动缩放，点击平移...）

http://cloudchamber.knapnokgames.com/CCMedia/CCImageViewer/CCImageViewer.html

更新：这是补间代码：

X 和 Y 计算可能不是最好的，但它们有效。他们花了我一段时间才弄清楚；）

大多数社交游戏（如 CastleVille (c) Zynga 或 Magic Land (c) Wooga）都有硬币、星星等奖励给玩家一些简单的动作，比如砍树。

doobers 似乎执行了几个补间：

1. 首先，他们扑通一声跳了出来。它们的尺寸也会反弹。
2. 之后，他们以贝塞尔曲线飞到得分栏。

我为我的问题准备了一个非常简单的测试用例和屏幕截图。测试用例在 Flex 中，因为这是我最近一直在使用的，但我的问题更笼统（ActionScript，Tween）。我正在使用com.greensock.TweenMax库。

我的问题：我已经弄清楚如何做第二个贝塞尔部分。但我不知道，第一个弹跳部分怎么做？

MyApp.mxml（不一定是 Flex，可以是 Flash）：

星.fxg：

另外我想知道，如何在最后添加“宝丽来相机闪光灯”效果？

更新：

在 LondonDrugs_MediaServices 的帮助下（谢谢！）doobers 现在挤压和跳跃（代码如下），但我仍然有 3 个未解决的问题：

1. 如何在鼠标悬停事件上运行 flyTween？
2. 如何在最后添加“宝丽来闪电战”补间？
3. 不知道如何在最后删除鼠标悬停处理程序 - 因为它是一个匿名闭包

我还在GreenSock 论坛上发布了我的问题。

谢谢你的任何提示

UPDATE2：谢谢LondonDrugs_MediaServices，这里再次更新了截图+代码。

和 doobers 一起玩已经很有趣了，但是仍然有 2 个小问题：

1. 我真的必须杀死（延迟的）补间蝇吗？我不能在鼠标悬停时以某种方式修改它的延迟（将其设置为 0）吗？
2. 最后有那种“相机闪光”效果会很好。我只是不记得它是如何完成的——一些标准的 Flash MX 效果......

MyApp.mxml：

我一直在试验Greensock 的 TweenMax JS和Three.js。由于两个库都使用 requestAnimationFrame (rAF)，我需要决定哪个库应该处理这个问题。

如果我使用内置的 rAF Three.js，它的运行速度约为 30fps，并且非常流畅。

如果我使用TweenMax例如：TweenMax.ticker.addEventListener('tick', animate);它运行大约 55-60fps 但有点波涛汹涌。

我可以更改与 Three.js rAF 版本类似的预期运行的TweenMaxfps TweenMax.ticker.fps(30);。

我的问题是哪种方法更受青睐，并且哪种方法被认为是最佳实践？另外，如果我选择 Three.js，我是否能够在其 rAF 实现中更改 fps？

最后，您将如何决定 fps 以适应更广泛的受众？限制为 30fps 似乎没问题，但有点武断，一些用户的速率可能比我允许的高得多。

更新 ：

根据 mrdoob 和 jack 的反馈，我已经尝试过在 three.js 中的 rAF 和使用 TweenMax 的 rAF，并打开和关闭了抗锯齿。

抗锯齿：

http://jsfiddle.net/cR7Lx/21/

http://jsfiddle.net/cR7Lx/23/

http://jsfiddle.net/cR7Lx/24/

抗锯齿关闭：

可以与知道 requestAnimationFrame 如何在后台工作的人一起帮助解释差异，现在我将使用 TweenMax 30fps 或 Three.js 两者都启用抗锯齿。