将 CSS transition-timing-function 翻译成滑动答案

【问题标题】：Translate CSS transition-timing-function to swiping将 CSS transition-timing-function 翻译成滑动
【发布时间】：2018-06-22 08:20:18
【问题描述】：

我正在使用自定义计时功能 (http://cubic-bezier.com/#1,0,1,1) 淡入 div（使用 CSS 转换）。计时功能基本上是“ease-in”的一个更极端的版本。

div {
    opacity: 0;
    transition: opacity 1s;

.in {
    opacity: 1;
    transition-timing-function: cubic-bezier(1, 0, 1, 1);
}

除此之外，我希望能够通过在屏幕上滑动来淡入 div。我正在使用以下 Jquery 根据用户滑动的距离来设置不透明度：

documentWidth = $(document).width();

$(document).on('touchmove', function(e) {

    // How much of the animation is completed (in %)
    completion = e.changedTouches[0].pageX / documentWidth;

    $('div').css('opacity', completion);
})

不，这是线性的！有没有聪明的数学家可以弄清楚如何重新陈述最后一行来表示我的计时函数？

因此，例如，如果completion 为 25%，则不透明度应为 2% 左右。在 50% 时，应该在 11% 左右，在 75% 时应该在 31% 左右。

【问题讨论】：

您为什么不使用animation 而不是transition，然后在其中相应地定义您的参数。

标签： css animation math transition timing

【解决方案1】：

首先找到一条与您的cubic-bezier 曲线近似的曲线。有了给定的点和一些online tools，就可以用这个方程画一条曲线：

y = 464085.7 + (0.0174619 - 464085.7)/(1 + (x/22.88957)^4.174069)

在您的情况下，x 代表您的 completion 变量和 y 生成的不透明度。

那么你的代码就变成了

let completion = e.changedTouches[0].pageX / documentWidth;
let exponential = Math.pow((completion / 22.88957), 4.174069);
let opacity = 464085.7 + (0.0174619 - 464085.7)/(1 + exponential);

$('div').css('opacity', opacity);

（当然，您可能会找到最适合您需要的更好的方程式）

【讨论】：

这是一个很棒的工具。谢谢！