在缩放的元素上使用跳动动画 [英] Using bounce animation on a scaled element

问题描述

什么是最好的方式来进行缩放，然后以该缩放比例执行弹跳动画，然后返回原始缩放比例。我意识到我可以做一些类似的事情，例如将其缩放到2.2、1.8、2.0，但是我正在寻找一种方法，您只需对缩放因子执行弹跳动画，因为缩放因子会发生变化。这是我的例子。基本上，我想将两者结合起来像我说的那样工作，但是如您所见，反弹动画的执行基于缩放之前的div大小。 PS，我希望在一个动作中完成此操作，两个按钮仅作为示例。

What is the best way to have something scale and then perform a bounce animation at that scale factor before going back to the original scale factor. I realize I could do something like scaling it to 2.2, then 1.8, then 2.0, but I'm looking for a way where you just have to perform the bounce animation on the scale factor because my scale factor will change. Here is my example. Basically I want to combine the two to work like I said but as you can see the bounce animation performs based off the div size prior to scaling. P.S I want this done in one action, the two buttons were just for the example.

function myFunction() {
            var image = document.getElementById('test');
            image.style.WebkitTransform = ('scale(2,2)');
        }
        
        function myFunction2() {
            var image = document.getElementById('test');
            image.classList.remove('bounce');
            image.offsetWidth = image.offsetWidth;
            image.classList.add('bounce') ;
        }

div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        transition-duration: 1s;
        
    }
            
    .bounce {
        animation: bounce 450ms;
        animation-timing-function: linear;
    }

@keyframes bounce{
  25%{transform: scale(1.15);}
  50%{transform: scale(0.9);}
  75%{transform: scale(1.1);}
  100%{transform: scale(1.0);}
}

<div id='test'> </div> 

<button class = 'butt' onclick = 'myFunction()'>FIRST</button>
<button class = 'butt' onclick = 'myFunction2()'>SECOND</button>

推荐答案

只是一系列的jquery动画，其变化一定数量的像素应该可以解决问题。您始终可以在数学中使用诸如 parseInt（$（'＃test'）。css（'width'））之类的内容来进行放大操作要反弹的对象更多/更少

Just a series of jquery animations that change by a set number of pixels should do the trick. You could always use something like parseInt($('#test').css('width')) in the math for how much to change if you want scaled-up objects to bounce more/less

function scaleUp() {
    var image = document.getElementById('test');
    image.style.WebkitTransform = ('scale(2,2)');
}

function bounce() {
  $('#test').animate({
      'width': "-=20",
      'height': "-=20"
  }, 150);
  $('#test').animate({
      'width': "+=30",
      'height': "+=30",
  }, 150);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20",
  }, 150);
  $('#test').animate({
      'width': "+=10",
      'height': "+=10",
  }, 150);
}

div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        
    }
            

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div> 

<button class = 'butt' onclick = 'bounce()'>Bouncey</button>
<button class = 'butt' onclick = 'scaleUp()'>Scale up bouncey</button>

这里是将它们与动画结合在一起以进行缩放的方法：

Here's them combined into one with an animation for growing / shrinking:

function scaleUp() {
    var image = document.getElementById('test');
    image.style.WebkitTransform = ('scale(2,2)');
}

function bounce() {
  const width = parseInt($('#test').css('width'));
  const height = parseInt($('#test').css('height'));
  $('#test').animate({
      'width': parseInt($('#test').css('width'))*2.2,
      'height': parseInt($('#test').css('height'))*2.2
  }, 300);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20"
  }, 150);
  $('#test').animate({
      'width': "+=30",
      'height': "+=30",
  }, 150);
  $('#test').animate({
      'width': "-=20",
      'height': "-=20",
  }, 150);
  $('#test').animate({
      'width': "+=10",
      'height': "+=10",
  }, 150);
  $('#test').animate({
      'width': width,
      'height': height
  }, 300);
}

div#test  {
        position:relative;
        display: block;
        width: 50px;
        height: 50px;
        background-color: blue;
        margin: 50px auto;
        
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='test'> </div> 

<button class = 'butt' onclick = 'bounce()'>Bouncey</button>

这篇关于在缩放的元素上使用跳动动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！