时间戳

首页 > 解决方案 > 使用 jQuery 弹跳球/颜色变化动画

jquery - 使用 jQuery 弹跳球/颜色变化动画

问题描述

我想使用 jQuery 创建一个弹跳球动画，并且我想在每次弹跳后更改颜色。

这是我的动画，但由于某种原因它不起作用，因为我只是一个初学者。

$("#btn3").click(function() {
  $("#bluecircle")
    .animate({
      left: "400px",
      bottom: "-60px",
      borderRadius: "50%",
      backgroundColor: "red"
    }, 850, "easeInSine")
    .animate({
      marginLeft: "800px",
      borderRadius: "50%",
      marginTop: "50px"
    }, 850, "easeInOutSine")
    .animate({
      marginLeft: "1200px",
      borderRadius: "50%",
      marginTop: "-50px"
    }, 850, "easeInOutSine")
    .animate({
      marginLeft: "800px",
      borderRadius: "50%",
      marginTop: "50px"
    }, 850, "easeInOutSine")
    .animate({
      marginLeft: "400px",
      borderRadius: "50%",
      marginTop: "-50px"
    }, 850, "easeInOutSine")
    .animate({
      marginLeft: "0px",
      borderRadius: "50%",
      marginTop: "50px"
    }, 850, "easeInOutSine");
})
#bluecircle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="content" id="content3"> 
  <button id="btn3">Animate Blue Circle</button>
  <div id="bluecircle"></div>
</div>

标签： jquery

解决方案

首先：您添加border-radius到动画中，但它始终保持50%. 因此，您可以在动画中省略它。此外，您在第一个动画中使用底部和左侧，在其他动画中使用边距。我建议只使用两者之一。

jQuery

对于background-color您需要的动画jQuery.ui。为了仅在每次反弹后对其进行动画处理，您必须background-color每秒添加一次animate()（margin-top减少）。

要获得反弹效果，您只需将缓动添加到margin-top. 其他属性应使用 动画linear。此外，您需要两种不同的弹跳缓动：easeIn...增加margin-top和easeOut...减少。顺便...Cubic看起来更自然一些...Sine，例如easeInCubic。

工作示例：为了适合堆栈片段，我把它做得更小，因为它看起来更自然，所以我让它更快一点。

我在这个例子中使用了左下角。

$("#btn3").click(function() {

  $("#bluecircle")
    .animate({
      left: "150px",
      bottom: [ "-50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      left: "300px",
      bottom: [ "50px", "easeOutCubic" ],
      backgroundColor: [ "red", "easeOutCubic" ]
    }, 500, "linear")
    .animate({
      left: "450px",
      bottom: [ "-50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      left: "300px",
      bottom: [ "50px", "easeOutCubic" ],
      backgroundColor: [ "blue", "easeOutCubic" ]
    }, 500, "linear")
    .animate({
      left: "150px",
      bottom: [ "-50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      left: "0px",
      bottom: [ "0px", "easeOutCubic" ],
      backgroundColor: [ "red", "easeOutCubic" ]
    }, 500, "linear");
    
});
#bluecircle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="content" id="content3"> 
  <button id="btn3">Animate Blue Circle</button>
  <div id="bluecircle"></div>
</div>

但是您可以通过保证金获得完全相同的结果。

工作示例：

$("#btn3").click(function() {

  $("#bluecircle")
    .animate({
      marginLeft: "150px",
      marginTop: [ "50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      marginLeft: "300px",
      marginTop: [ "-50px", "easeOutCubic" ],
      backgroundColor: [ "red", "easeOutCubic" ]
    }, 500, "linear")
    .animate({
      marginLeft: "450px",
      marginTop: [ "50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      marginLeft: "300px",
      marginTop: [ "-50px", "easeOutCubic" ],
      backgroundColor: [ "blue", "easeOutCubic" ]
    }, 500, "linear")
    .animate({
      marginLeft: "150px",
      marginTop: [ "50px", "easeInCubic" ]
    }, 500, "linear")
    .animate({
      marginLeft: "0px",
      marginTop: [ "0px", "easeOutCubic" ],
      backgroundColor: [ "red", "easeOutCubic" ]
    }, 500, "linear");
    
});
#bluecircle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js" integrity="sha512-0QbL0ph8Tc8g5bLhfVzSqxe9GERORsKhIn1IrpxDAgUsbBGz/V7iSav2zzW325XGd1OMLdL4UiqRJj702IeqnQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="content" id="content3"> 
  <button id="btn3">Animate Blue Circle</button>
  <div id="bluecircle"></div>
</div>

CSS 关键帧

而不是 jQuery，animate()我建议对keyframe特定类使用 CSS 动画，并在按钮单击时切换该类。优点是您不需要任何库，并且可以为动画属性设置不同的百分比，例如颜色变化更平滑。

工作示例： 我在此示例中使用了左侧和底部。注意颜色的不同百分比。

document.querySelector("#btn3").addEventListener('click', function() {
  document.querySelector("#bluecircle").classList.add('animating');
});
#bluecircle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
}

.animating {
  animation: left 3s, bottom 3s, color 3s;
  animation-fill-mode: forwards;
}

@keyframes left {
  0% {
    left: 0px;
    animation-timing-function: linear;
  }
  16.6% {
    left: 150px;
    animation-timing-function: linear;
  }
  33.3% {
    left: 300px;
    animation-timing-function: linear;
  }
  50% {
    left: 450px;
    animation-timing-function: linear;
  }
  66.6% {
    left: 300px;
    animation-timing-function: linear;
  }
  83.3% {
    left: 150px;
    animation-timing-function: linear;
  }
  100% {
    left: 0px;
    animation-timing-function: linear;
  }
}

@keyframes bottom {
  0% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  16.6% {
    bottom: -50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  33.3% {
    bottom: 50px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  50% {
    bottom: -50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  66.6% {
    bottom: 50px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  83.3% {
    bottom: -50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  100% {
    bottom: 0px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
}

@keyframes color {
  0% {
    background-color: blue;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  33.3% {
    background-color: red;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  66.6% {
    background-color: blue;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  100% {
    background-color: red;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
}
<div class="content" id="content3">
  <button id="btn3">Animate Blue Circle</button>
  <div id="bluecircle"></div>
</div>

但是您可以通过保证金获得完全相同的结果。

工作示例：

document.querySelector("#btn3").addEventListener('click', function() {
  document.querySelector("#bluecircle").classList.add('animating');
});
#bluecircle {
  height: 150px;
  width: 150px;
  background-color: blue;
  border-radius: 50%;
  position: relative;
}

.animating {
  animation: left 3s, top 3s, color 3s;
  animation-fill-mode: forwards;
}

@keyframes left {
  0% {
    margin-left: 0px;
    animation-timing-function: linear;
  }
  16.6% {
    margin-left: 150px;
    animation-timing-function: linear;
  }
  33.3% {
    margin-left: 300px;
    animation-timing-function: linear;
  }
  50% {
    margin-left: 450px;
    animation-timing-function: linear;
  }
  66.6% {
    margin-left: 300px;
    animation-timing-function: linear;
  }
  83.3% {
    margin-left: 150px;
    animation-timing-function: linear;
  }
  100% {
    margin-left: 0px;
    animation-timing-function: linear;
  }
}

@keyframes top {
  0% {
    margin-top: 0px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  16.6% {
    margin-top: 50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  33.3% {
    margin-top: -50px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  50% {
    margin-top: 50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  66.6% {
    margin-top: -50px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  83.3% {
    margin-top: 50px;
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }
  100% {
    margin-top: 0px;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
}

@keyframes color {
  0% {
    background-color: blue;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  33.3% {
    background-color: red;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  66.6% {
    background-color: blue;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
  100% {
    background-color: red;
    animation-timing-function: cubic-bezier(.550, .055, .675, .190);
  }
}
<div class="content" id="content3">
  <button id="btn3">Animate Blue Circle</button>
  <div id="bluecircle"></div>
</div>

推荐阅读