如何使动画线性传递?在开始和结束时不会放慢速度

How to make that animation passed linearly? without slowing down at the start and the finish?

本文关键字：结束 速度 开始 线性 动画 何使      更新时间：2023-09-26

我需要让图片顺利爬行，而不会在开始和结束时放慢速度。

     setInterval(function runIt() {
       $(".bffffg").animate({
         backgroundPositionX: 300
       }, 8000);
       $(".bffffg").animate({
         backgroundPositionX: 0
       }, 0);
     }, 1);
 .bffffg {
   display: block;
   position: absolute;
   width: 100%;
   height: 100%;
   background: url(http://www.dejurka.ru/wp-content/uploads/2015/06/watercolor-patterns4.jpg);
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="bffffg"></div>

  • 如何将线性效果应用于动画？
  • 甚至对它应用不同的效果？

如果您正在寻找设置缓动参数，则可以将其作为单独的参数传递，如下所示：

$('your-selector').animate({
    'your-property': 'value'
}, 8000, 'linear');

。或者使用选项对象，如下所示：

$('your-selector').animate({
    'your-property': 'value'
}, {
    duration: 8000,
    easing: 'linear'
});

这是 jQuery .animate（） 的 DOC :)

相关文章：