Использование отказов анимации на масштабируемом элементе - PullRequest
Новая
       30

Использование отказов анимации на масштабируемом элементе

0 голосов
/ 19 января 2019

Как лучше всего масштабировать что-то, а затем выполнить анимацию отскока при этом коэффициенте масштабирования, прежде чем вернуться к исходному коэффициенту масштабирования.Я понимаю, что мог бы сделать что-то вроде масштабирования до 2,2, затем до 1,8, затем до 2,0, но я ищу способ, при котором вам просто нужно выполнить анимацию отскока для масштабного коэффициента, потому что мой масштабный коэффициент изменится.Вот мой пример.По сути, я хочу объединить эти два для работы, как я сказал, но, как вы можете видеть, анимация отскока выполняется на основе размера div перед масштабированием.PS Я хочу, чтобы это было сделано одним действием, две кнопки были только для примера. 

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>

1 Ответ

0 голосов
/ 19 января 2019

Только серия анимаций jquery, которые изменяются на определенное количество пикселей, должны сделать свое дело.Вы всегда можете использовать что-то вроде parseInt($('#test').css('width')) в математике для определения того, сколько нужно изменить, если вы хотите, чтобы масштабированные объекты отскакивали больше / меньше 

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>

Здесь они объединены в одну с анимацией для роста / сжатия: 

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>
...