d3.js是否具有反向缓动功能? [英] Does d3.js have reverse ease functions?
问题描述
使用d3.js,我们可以在标准时间t之外获得轻松的时间,通常在[0,1]范围内
With d3.js we can achieve eased time out of normalized time t, typically in the range [0,1]
例如:
d3.easeCubic(0.25) = 0.0625
如何扭转这种情况,如何在已知y的情况下找到x?
How can we reverse that, how can we find x given known y ?
d3.easeCubic(X) = 0.0625,
X ???
这里的答案是立方根,但还是.
The answer here is cubic root, but still.
问题在于可重用性,easy函数可以更改为d3.easeExpIn
或`d3.easeCircleOut,或其他任何函数,您是否需要自己发明反向函数,还是隐藏在任何地方?
The problem is in reusability, ease function can change to d3.easeExpIn
, or `d3.easeCircleOut, or any other, do you need to invent reverse functions on your own, or are they hidden anywhere ?
推荐答案
首先,您的数学错误. d3.easeCubic(0.25)
将给您0.0625
:
Firstly, your math is wrong. d3.easeCubic(0.25)
will give you 0.0625
:
var easy = d3.easeCubic(0.25);
console.log(easy);
<script src="https://d3js.org/d3.v4.min.js"></script>
现在,回到您的问题:
如何扭转这种情况,如何在已知y的情况下找到x?
How can we reverse that, how can we find x given known y?
没有本机解决方案,但是我们可以创建自己的函数以在给定已知Y的情况下找到X.当然,问题在于我们必须针对每种特定的缓动反转数学.关于d3.easeCubic
,与d3.easeCubicInOut
相同,让我们尝试为该特定的宽松创建一个 inverted 函数.
There is no native solution, but we can create our own function to find X given a known Y. The problem, of course, is that we have to invert the math for each specific easing... But, since you asked about d3.easeCubic
, which is the same of d3.easeCubicInOut
, let's try to create an inverted function for that particular easing.
第一步,让我们看一下源代码:
First step, let's have a look at the source code:
export function cubicInOut(t) {
return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
}
您可以轻松地看到这是正确的功能,为我们提供与第一个代码段相同的值:
You can easily see that this is the correct function, giving us the same value as the first snippet:
function cubicInOut(t) {
return ((t *= 2) <= 1 ? t * t * t : (t -= 2) * t * t + 2) / 2;
}
console.log(cubicInOut(0.25))
现在,让我们尝试将其反转.
Now, let's try to invert it.
这里的数学有点复杂,但是对于小于1的值,这是函数:
The math here is somehow complicated, but for values less than 1, here is the function:
function inverseEaseCubic(t){
return Math.cbrt(t * 2) / 2;
}
这是演示.我们将0.0625
传递给该函数,它返回0.25
:
And here is the demo. We pass 0.0625
to the function, and it returns 0.25
:
function inverseEaseCubic(t){
return Math.cbrt(t * 2) / 2;
}
console.log(inverseEaseCubic(0.0625))
如果要处理大于1的数字,这是完整的功能:
If you want to deal with numbers bigger than 1, this is the complete function:
function InverseEaseCubic(t){
return t <= 1 ? Math.cbrt(t * 2) / 2 : (Math.cbrt(2 * t - 2) + 2) / 2;
}
PS::在他的评论,@ altocumulus只是提醒我们,有时不可能来找到该值.这是一个非常简单的例子.假设此功能:
PS: In his comment, @altocumulus just reminded us that, sometimes, it's even impossible to find the value. Here is a very simple example. Suppose this function:
function exponentiation(a){
return a*a;
}
现在想象一下,当使用未知参数调用该函数时,该函数返回了4
.有什么说法?我们能找出来吗?无法确定,因为像这样的二阶方程具有2个根:
Now imagine that, when called with an unknown argument, the function returned 4
. What's the argument? Can we find out? Impossible to determine, because second degree equations, like this one, have 2 roots:
console.log(exponentiation(2))//returns 4
console.log(exponentiation(-2))//also returns 4
这篇关于d3.js是否具有反向缓动功能?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!