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曲线的曲线。使用给定的点和一些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);

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

）

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

1 个答案: