gpt4 book ai didi

javascript - 使用 Spring 缓动重新创建弹跳缓动

转载 作者:搜寻专家 更新时间:2023-11-01 04:31:33 25 4
gpt4 key购买 nike

查看我阅读的 velocity.js 变更日志:

... 2) The back, bounce, and elastic easings have been removed. Use spring physics instead. ...

我想知道是否有任何简单的方法可以使用接受自定义参数的 spring 缓动来重新创建 jQuery animate 可用的 easeOutBounce 效果?

默认情况下,您可以使用 spring 缓动,如下所示:

$('.ball').velocity({ top: ['200px', 'spring']}, { duration: 2000 });

通过指定 [tension, friction] 而不是仅传递 easing 关键字 spring,可以自定义 Spring 缓动。所以你可以这样做:

$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });

我无法理解为了实现 easeOutBounce easing 要使用哪些摩擦值和张力值.我试图让球在达到 200 像素时反弹 - 但它充当“松散” Spring ,低于地线而不是反弹。

这是否可以仅使用 velocity.js 以简单的方式完成,这样我就不需要自己实现自定义缓动功能?

$('button').on('click', function(){
$('.ball').css('top', '120px');
$('.ball').velocity({ top: ['200px', [500, 0]]}, { duration: 2000 });
});
.display {
width: 240px;
height: 280px;
position: relative;
border: 1px solid #000;
}
.ball {
position: absolute;
top: 120px;
left: 40px;
width: 20px;
height: 20px;
}
.ball:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: red;
}
.ground {
position: absolute;
top: 220px;
left: 0;
width: 100%;
height: 1px;
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.1.0/velocity.min.js"></script>

<button>Throw ball</button>
<div class="display">
<div class="ball"></div>
<div class="ground"></div>
</div>

最佳答案

作为帮助在 Velocity 中创建缓动的人,我知道用它创建弹跳和弹性缓动是不可能的。但是如果你问 Julian(Velocity 的创造者),他可能会说 Spring 宽松比反弹更好。

话虽如此,您最好的选择是自己在 Velocity 上注册这些缓动。查看 this thread 底部的解释.

关于javascript - 使用 Spring 缓动重新创建弹跳缓动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26100491/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com