将 CSS 过渡计时功能转换为滑动

Question

我在带有自定义计时函数(http://cubic-bezier.com/#1,0,1,1(的div(使用CSS过渡(中淡入淡出。定时功能基本上是"缓入"的更极端版本。

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%左右。

Answer 1

首先找到一条近似cubic-bezier曲线的曲线。使用给定的点和一些在线工具，可以使用以下等式绘制曲线：

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);

(当然，您可能会找到最适合您需求的更好方程式(