问题标签 [easing-functions]

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 回答
560 浏览

javascript - 淡化 jQuery Easing 的反弹

我正在使用jQuery Easing 插件并使用反弹缓动效果。我喜欢它,但它是如此令人难以置信的激烈。我需要将其调低(可能会消除反弹并使曲线不那么剧烈。

我找到了这篇文章,但我实际上不是数学专业的......有人可以用英语帮助我吗?我什至不需要完全掌握它,只要有人为我提供一个功能,我就可以了。

我知道我应该粘贴我尝试过的代码,但我什至不知道该尝试什么,所以我想我会发布 jQuery Easing 插件提供的缓动功能。

0 投票
1 回答
99 浏览

javascript - 我的动画的缓动功能不起作用

我数学不是最好的,我有点想猜测如何为我的动画实现这个。但目前它不起作用,我相信我误解了如何为我的动画做缓动功能。

我有一个表示平面的对象,在我的画布上具有以下属性:

所以我然后结合数学来尝试让飞机降落在带有缓动功能的跑道上,这样即使它不是像这样的现实世界物理,它在视觉上看起来也不错:

问题是这架飞机在驶向目的地的跑道上并没有减速。它只是保持非常缓慢。

我是否将我的数学与缓动函数的工作方式混淆了?

0 投票
1 回答
939 浏览

createjs - 如何将 Greensock 的 CustomEase 函数转换为可在 CreateJS 的 Tween 系统中使用?

我目前正在开发一个不包含 GSAP(Greensock 的 JS Tweening 库)的项目,但是由于使用它的可视化编辑器创建自己的自定义缓动函数非常容易 - 我想知道是否有办法分解所需的ease-function 以便可以在 CreateJS Tween 中重用?

例子:

这样它就变成了这样的东西:

下面是这种特殊缓动方法的图表。在此处输入图像描述

0 投票
1 回答
509 浏览

javascript - 如何在动画期间添加缓动函数以增加变量值

我正在寻找一些数学天才来帮助我解决这个问题:

我有一个非常简单的关键帧 js 动画:

除了步进关键帧之外,我还添加了一些不透明度,直到它达到值 1。这非常有效且非常平滑。到目前为止,一切都很好。我想添加一些easeOutSine 来增加不透明度值。我知道通过使用此功能可以做到这一点:

但我需要一些帮助如何将两者结合起来。我怎样才能做到这一点?有人在我之前做过这个吗?非常感谢!

加拉瓦尼

0 投票
1 回答
2008 浏览

javascript - D3 圆半径的弹性缓动过渡导致设置负半径

ease("elastic", a, p)在 d3js 中使用该函数时,我遇到了一个非常奇怪的问题。我正在转换圆的半径,并且控制台中出现大量错误,这大大减慢了我的网页速度。错误表明我正在设置负半径 - 经过一些调试(从控制台记录所有内容到与以前代码的差异),我发现这是由elastic缓动引起的。这是我的代码:

这是我得到的错误的一个例子:

如果我换行:

至:

...它不会在控制台中吐出任何错误。

这里还有一个截图: d3-弹性错误

如果你能给我一些关于如何解决这个问题的指导,那就太好了。提前致谢!

0 投票
1 回答
852 浏览

javascript - JavaScript 中的缓动函数 - 将值更改设置为 0

如果值变化为 0,easeInQuad则始终返回 20,easeOutElastic也返回错误值。

值的变化不能为 0 吗?jQuery如何处理animate({top: 0}),设置0到0.0001?


我误解了价值变化的含义。如果我想要最终值0,参数c应该是-20

0 投票
1 回答
254 浏览

ios - 向 UIView animateKeyframesWithDuration 添加缓动

我在用着

我有 3 个动画部分使用

但是,在我想缓和的关键帧之一上。

如何为此添加缓动功能?

0 投票
0 回答
28 浏览

javascript - 使用 robert penners 缓动 dom 元素

我很难理解这是如何工作的。我已阅读 robert penners 网站上的教程,其中解释了不同的参数:

t:时间 b:起始值 c:更改 d:持续时间

我已经指定了值,但它似乎不起作用,这是为什么呢?我似乎没有得到弹性效果,但更多的是在一开始的某个地方停下来。

https://jsfiddle.net/m1qzqvu8/4/

0 投票
1 回答
45 浏览

javascript - 如何使用easeOutSine 获取具有CSS 过渡的元素需要覆盖一定距离的时间?

好吧,我猜这是给数学爱好者的。我对缓动函数有一些基本知识,但需要一些帮助。

我有一个使用“easeOutSine”函数通过 CSS 转换(translateX)翻译的元素。

它在 1500 毫秒内覆盖距离 A。我需要找出它需要多少时间才能覆盖距离 B(介于两者之间)

“easeOutSine”的功能是:

显然 A 和 B 对我来说是已知的值。但我需要知道将它们放在参数中的哪个位置或如何处理这个问题。首先十分感谢!

编辑:

示例:假设元素在这 1500 毫秒内移动了 1000 像素。当它处于 360 像素时,究竟过了多少时间?很容易找出它何时线性移动,但我无法使用easeOutSine 函数超越它。(当它到达这个位置时,我想将一个类附加到另一个元素)

0 投票
1 回答
761 浏览

javascript - D3.js 使用自定义缓动插值进行缩放

我想修改一个数字数组并将其输出到一个新范围,d3.scale但使用自定义插值函数。插值函数应该是过渡中使用的缓动函数之一,例如easeInOutQuad

所以我的输入数组[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]会变得越来越少,就像[0, 2, 5, 10, 20, 40, 70, 90, 95, 98, 100]数字在数组开始时增加得更慢,然后逐渐加快到中间,然后再到最后变慢。

到目前为止我的代码:

感谢您提供有关如何将这种缓动功能与d3.interpolate.