问题标签 [tweenjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
94 浏览

createjs - 创建js。线跟随元素小提琴

我创建了这个jsfiddle

一条连接两个元素的线,我希望这条线无论走到哪里都与这两个元素保持连接。

我有点成功,但有一个非常明显的错误。它不断绘制新线,而不是重新绘制现有线。请帮助我如何让它更新行位置。

0 投票
1 回答
1177 浏览

javascript - 如何使用 CreateJS 创建淡入淡出

我是 createJs 的新手,希望对我遇到的问题有所帮助。我试图实现的是淡入和淡出动画,但我似乎无法做到正确,甚至不知道我正在做的事情是否朝着正确的方向发展。这是代码:

https://jsfiddle.net/kw4ubpxf/

我需要汽车图像淡入,停留 5 秒然后淡出。任何帮助将不胜感激。

0 投票
1 回答
376 浏览

javascript - 吐温.js | 即使循环播放,我的补间也没有更新

所以,我正在创建一个游戏,其中我有一艘带有枪的船,可以发射子弹。

我希望船的枪在我射击时弹回,所以看起来枪实际上是在射击子弹。到目前为止一切都很好,枪只是相对于身体移动,到目前为止没有任何东西陷入无限循环。

我的船是由我编写的完美运行的构造函数制成的,因此为了创建补间,而不是在构造函数中创建我无法重用的变量,我制作了补间对象的实际属性。

这是代码的样子:

'this' 是我们正在构建的对象,为了启动推拉枪的函数,我有一个我刚刚调用的函数:

我看不出这里有什么问题。

单击链接可查看完整代码。

有任何想法吗?

0 投票
1 回答
509 浏览

javascript - 如何使用 TweenJS 为 EaselJS 渐变设置动画?

我有一个像这样的渐变:

我将如何为渐变设置动画,使其看起来在移动?(即如果这是 CSS 制作的,background-position会慢慢改变)

0 投票
1 回答
808 浏览

vue.js - Using Vue with Tween JS makes tween sometimes reset

I'm trying to animate a counter that I've made with Vue.js.

The value is being animated by Tween.js and then formatted with Numeral js but I'm having an issue.

I'd like to increment by a random amount, and when I increment, animate the number from whatever it is currently showing to the new total.

I have num which holds the final value of the counter, and displayNum which holds the animating value.

The issue is that my current code (if you hammer the increment button) sometimes starts animating the number from 0, rather than the current total. Especially when you get to over 1,000.

How can I stop this behaviour?

At present, whenever you click increment it takes the currently displayed number and starts a new tween to the target number.

0 投票
1 回答
197 浏览

javascript - tween.addEventListener 在第二次调用时不是函数

我创建了一个像这样的补间动画:

执行此代码时,它给了我一个错误,addEventListener 不是函数,在第 7 行,因此未注册更新事件,因此动画不会运行我的更新代码。但是,当动画结束时,它会在“完成”时运行代码。

但是,如果我做以下任何事情:

.

它总是会在最后一个“addEventListener”中出错。因此,如果我先添加“更新”,动画将正常工作,但不会执行完成代码。

根据文档,“更新”和“完成”都是事件。

为什么我只能添加一个事件?

0 投票
1 回答
283 浏览

javascript - TweenJS 旋转平滑错误

我今天在使用 TweenJS 时发现了错误,在从 socket.io 服务器为我的基于刻度的响应设置动画时出现了问题。我每 1/10 秒(每秒 10 个滴答声)获得一次位置和旋转,并通过 TweenJS.to()函数平滑这个运动。

位置就像一个魅力,但是当我在 0/360 度左右切换时,旋转是错误的。

例如rotation: 350°,服务器发送和下一个刻度服务器发送rotation: 10°,但我不想动画整个 340°,只是 20°。所以我想以最短的方式从/到动画。插件无法正常工作。

小提琴:http: //jsfiddle.net/bateriecz/wmj52eqd

编辑:我发现,TweenJS 默认设置为最短路径,但不适用于我

0 投票
0 回答
468 浏览

javascript - 类型错误:createjs.Ticker.removeEventListener(...) 未定义

我使用库 easyjs 和 tweenjs 遵循代码。似乎在调用该函数后hsdissolve()它只包含了 tweenjs 库。

整个代码:

hsdissolve 部分似乎没有完成所有内容,但我无法记录任何内容。

它可以在以下网址上复制: http: //exodus-glitch.tk/easel/

有人可以告诉我我做错了什么吗?

0 投票
1 回答
134 浏览

javascript - Tween JS 导致 WebGL 上下文丢失

我正在使用 Tween.js 在 Three.js 渲染周期内更新李萨如曲线。这在大多数情况下都有效,但是,在大约 70 次迭代之后,WebGL 似乎与错误一起崩溃:CONTEXT_LOST_WEBGL: loseContext: context lost. 这种缺乏稳定性令人不安,特别是因为它似乎有时需要我重新启动浏览器才能让 WebGL 再次工作(不仅在这个页面上,而且在其他使用 WebGL 的页面上也是如此)。

lissajous 曲线不是很高的顶点并且不使用纹理(这似乎是其他 WebGL 上下文丢失的原因),所以我很确定这一定是由于我实现 Tween.js 处理图形之间的插值(特别是.onComplete回调)。

任何人都可以提供任何关于为什么会发生这种情况的指示吗?根据 WebGL 文档,我的替代方案是HandleContextLoss 。

0 投票
2 回答
631 浏览

javascript - Tween.js 重复

在 tween.js 中是否有内置方法可以知道补间何时重新启动?或者也许是一种知道您当前正在重复哪个#repeat 的方式?