本文介绍了在缩放对象上反弹动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

拥有对象比例并在返回原始比例因子之前以该比例因子执行弹跳动画的最佳方法是什么。我意识到我可以做一些类似的事情,例如将其缩放到2.2、1.8、2.0,但是我正在寻找一种方法,您只需对缩放因子执行弹跳动画,因为缩放因子会发生变化。



这是我的示例。基本上,我想将两者结合起来像我所说的那样工作,但是正如您所看到的,弹跳动画是在缩放之前根据图像大小执行的。



像示例一样,我需要图像的所有侧面均等地反弹。



  function myFunction(){var image = document.getElementById('test'); image.style.WebkitTransform =('scale(2,2)'); image.classList.remove('bounce'); image.offsetWidth = image.offsetWidth; image.classList.add(’bounce’); }  
  div#test {position:relative;显示:块;宽度:50像素;高度:50px;背景颜色:蓝色;边距:50px自动;过渡时间:1s; } .bounce {动画:反弹450毫秒;动画定时功能:线性; } @关键帧反弹{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>  

解决方案

将每个转换分配到不同的包装元素上。

这样,您可以实现多个转换级别,这些转换都相对于其父级



然后,您只需将动画设置为在等于过渡持续时间的延迟后触发:



  btn.onclick = e => {//为了有两个方向,我们需要在这里稍加冗长... const test = document.querySelector(’。test’); const classList = test.classList; const state = classList.contains(放大); //首先删除以前的classList.remove('zoomed-'+(状态?‘in’:’out’)); //强制回流test.offsetWidth; //设置一个新的classList.add('zoomed-'+(state?'out':'in'));};  
  div.test {位置:相对;显示:inline-block; margin:50px 50px;} div.test div {width:100%;高度:100%;转换:transform 1s;} div.test.zoomed-in .scaler {transform:scale(2);} div.test.zoomed-in .bouncer,div.test.zoomed-out .bouncer {动画:bounce .25s 1s ; / *过渡的持续时间延迟* /} div.test .inner {background-color:blue;宽度:50像素;高度:50像素;} @关键帧跳动{0%{变换:scale(1.15); } 33%{transform:scale(0.9); } 66%{transform:scale(1.1); } 100%{transform:scale(1.0); }}  
 < div class = test> < div class = scaler> < div class = bouncer> < div class = inner>< / div> < / div> < / div>< / div>< button id = btn>切换缩放< / button>  


What is the best way to have an object 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 image size prior to scaling.

I need all sides of the image to bounce equally, like the example.

function myFunction() {
            var image = document.getElementById('test');
            image.style.WebkitTransform = ('scale(2,2)');
            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>

解决方案

Dispatch each transform on a different wrapping element.
This way you can achieve several level of transforms, all relative to their parent wrapper.

Then you just need to set your animation to fire after a delay equal to the transition's duration:

btn.onclick = e => {
  // in order to have two directions, we need to be a bit verbose in here...
  const test = document.querySelector('.test');
  const classList = test.classList;
  const state = classList.contains('zoomed-in');
  // first remove previous
  classList.remove('zoomed-' + (state ? 'in' : 'out'));
  // force reflow
  test.offsetWidth;
  // set new one
  classList.add('zoomed-' + (state ? 'out' : 'in'));
};
div.test {
  position: relative;
  display: inline-block;
  margin: 50px 50px;
}
div.test div{
  width: 100%;
  height: 100%;
  transition: transform 1s;
}
div.test.zoomed-in .scaler {
  transform: scale(2);
}
div.test.zoomed-in .bouncer,
div.test.zoomed-out .bouncer {
  animation: bounce .25s 1s;/* transition's duration delay */
}



div.test .inner {
  background-color: blue;
  width: 50px;
  height: 50px;
}


@keyframes bounce {
  0% {
    transform: scale(1.15);
  }
  33% {
    transform: scale(0.9);
  }
  66% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.0);
  }
}
<div class="test">
  <div class="scaler">
    <div class="bouncer">
      <div class="inner"></div>
    </div>
  </div>
</div>

<button id="btn">toggle zoom</button>

这篇关于在缩放对象上反弹动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 16:38
查看更多