问题标签 [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 回答
40 浏览

javascript - 仅使用 Javascript 模仿 @keyframes 规则

我正在尝试创建一个使用百分比来获取数字的函数。我们的想法是有这样的东西: 0%: 100px 50%: 200px 75%: 210px

因此,当我以 25% 的百分比运行我的函数时,它会将 0 和 50 混合在一起,高于 50% 时也是如此。

听起来有点复杂,总体思路是只使用 JS 创建一些东西,这将简化从 0 到 100% 的数字

我尝试过使用常规百分比计算,但它实际上不适用于 3 个或更多变量。

0 投票
2 回答
164 浏览

javascript - 是否有关于线性()函数在 After Effects 中的作用的编程/数学术语?

Adobe After Effects(一个动画/合成应用程序)有一种基于 JavaScript 的脚本语言(表达式),它带有一堆基于 JS 构建的 After Effects 特定功能。功能linear()就是其中之一。它考虑一个对象属性的动画变化(例如,滑块的 X 位置)并将其链接到另一个属性(例如,场景中某个其他对象的旋转),以便第一个动画属性控制/动画第二个财产。

如果该解释令人困惑,请参阅此视频中的 11:33: https ://www.youtube.com/watch?v=gK1Ejt7qND0&t=693s

linear()函数调用如下所示:

我不知道实际的内部参数名称是什么,但这就是他们所做的:

ref== “控制器”属性(在我之前的示例中,对象的 X 位置)。通常是动画的,随时间变化。

refStart/ refEnd== ref 属性的上下界

outStart/ outEnd== 目标属性的下限和上限(在我之前的示例中,另一个对象的旋转)

这个函数的作用是否有通用编程术语?还是数学术语?据我所知,这是涉及“插值”的东西,也许是线性插值,但我不清楚。

是否有包含此功能等价物的通用编程/数学库?After Effects 还简化了linear()ease()easeIn()easeOut(). 据我所知,这些在编程中可能被称为“缓动函数”,但不确定。

奖励:我尝试从头开始对 AE 的 linear() 进行逆向工程。相当准系统,不做任何类型检查或错误,但除此之外它似乎在我在 AE 中的测试中工作相同:

0 投票
1 回答
28 浏览

jquery - 如何在这个 jQuery 代码段中添加自定义的缓动函数而不获取所有的 jQueryUI?

linear我看到有人使用一种算法来模拟仅使用参数的easeOutExpo 效果。下面这段代码的缺点是它需要计算: step_value += (target_value - step_value)/25. 在代码中看起来很奇怪。

在这种情况下,如何将缓动函数直接分配给 jQuery?在这种情况下是否可以只应用缓动函数而不在代码中引入 jQuery UI 或任何其他繁重的框架?

0 投票
1 回答
253 浏览

animation - 简化不适用于 svg.js v3 Rotate 的函数

包装信息

问题

有人可以澄清如何使用 svg.js v3 库通过缓动函数正确地为旋转设置动画吗?

https://svgjs.dev/docs/3.0/animating/中的文档没有给出示例,我尝试了许多不同的方法来让它工作,但所有尝试都会导致默认行为,'>'(又名轻松-out 函数)。插件文档也不冗长(https://svgjs.dev/docs/3.0/plugins/),并且没有提供如何使用插件(例如 svg.easing.js 库)的指导。安装该软件包也不会改变结果。

我的尝试

以上都没有按预期工作。我已经在 a <g>and<path>元素上使用了这些,并且两者都导致了相同的行为,只是缓出(而不是缓入和缓出 - 甚至只是缓入)。

任何帮助都非常感谢,因为这个库的使用肯定对所有其他方面都非常有帮助!

0 投票
1 回答
36 浏览

python - Python Compact 函数转换为字符串

我有这样的功能:

我想把它全部压缩成 1 个字符串,这样我就可以使用该eval()函数来获取任何值的输出t。我有一个更简单的功能示例:

会成为:

这样,我可以使用这个字符串并t通过简单地执行以下操作来评估函数的任何值:

现在开始我的问题,它实际上不必是 1 行,这就是我一直在想的:

0 投票
0 回答
16 浏览

javascript - 我在我的轮子类中对 center 方法进行了转换,并尝试向它添加 easeInOut 函数,以便在它离中心更远时更快

需要添加这样的功能(easeInOutQuad),但我不知道如何。当我调用此函数时,会将元素转换为中心,但希望在函数中添加轻松,如果元素的位置远离中心,则可以轻松进出

0 投票
0 回答
53 浏览

c# - 缓动功能而不从 Freezable 继承?

我正在尝试实现一个自定义IEasingFunction,它基本上是另一个的包装器,IEasingFunction但它在动画的开头和结尾添加了一个暂停。我不希望它继承,EasingFunctionBase因为在 PausingEasingFunction 上有一个 EasingMode 是没有意义的。无论您使用哪种模式,暂停都是相同的,并且被包装的模式可以自行指定其模式。

这是它的外观:PausingEasingFunction.cs

问题是,当我尝试使用以下 xaml 在动画中使用它时(local:指的是 xmlns 指向包含的 clr 命名空间PausingEasingFunction):

抛出 InvalidOperationException,告诉我无法冻结 Freezable。但是,如果我将PausingEasingFunction.cs更改为继承,Freezable而不是通过DependencyObject这种方式实现 CreateInstanceCore:

不再抛出异常。经过一番调查,我发现 WPF 仍然试图冻结东西,即使它们有 CanFreeze = false 但我不确定这是否真的是问题所在......

这是一个WPF错误吗?难道我做错了什么?或者为什么我被迫从 Freezable 继承?