代码之家 › 专栏 › 技术社区 › Tonald Drump

转换CSS转换时序函数

timing transition math animation css

Tonald Drump · 技术社区 · 7 年前

我在一个div(使用CSS转换)中加入了自定义计时功能。 http://cubic-bezier.com/#1,0,1,1 )计时功能基本上是一个更极端的版本。

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

1 回复 | 直到 7 年前

Fabrizio Calderan 7 年前

首先找到一个近似你的曲线 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);

(当然,你可能会找到一个更好的方程式,最适合你的需要)

推荐文章

Muhammad Umer · 为什么这个随机数猜谜游戏模拟产生5.8

6 月前

Matthew Thomas · 在每个决策中给出多个选择的所有可能的决策路径/结果

6 月前