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屋！