在未知关键帧上平滑停止CSS旋转动画 [英] Stop CSS rotate animation smoothly on unknown keyframe

问题描述

我有一个使用CSS旋转动画的图像。
我想停止它顺利（当它点击另一个元素，但没有得到跳跃的停止感觉，它回到原来的位置）。
看起来预期的行为只发生在动画的第一次迭代，而不是在即将到来的（这是在前2秒内点击慢按钮）

以下是示例代码
https://jsfiddle.net/pbarrientos/ 5v3xwak6 /

我已经尝试添加animation-iteration-count：1;
和添加/删除类。

  var css = {
'-webkit-animation-iteration- count'：1，
'-moz-animation-iteration-count'：1，
'animation-iteration-count'：1
} 
 
 $ b  
解决方案
我会在这里使用手动动画。浏览器负责它的CSS动画，并且要完全同步的位置和速度干扰它是有挑战性的。
 
 
 
由于动画不是很复杂，我们可以简单地设置我们自己的矩阵，或使用帮助方法，以及使用正弦函数，其中停止时减小半径。
 
 
 
当点击停止按钮时，我们减小半径使它似乎停止。我们可以做相反的事情再次开始。好处是我们可以在任何时候停下来，自然休息。 
 
 
 
通过使用 requestAnimationFrame  c>和转换，我们将像CSS一样获得平滑的动画。
 
 
 
主要功能是：
  angle = Math.sin（time）* radius; // sin = [ -  1,1] radius =>角度
  
然后在停止时，减少半径，最终会成为角度：
  radius * = 0.99; 
  
 
 
 
示例
 
 
 
 
 
 
  var img = $（img），btn = $（button），angle，maxRadius = 10，radius = maxRadius，playing = true，time = 0; function function {angle = Math.sin时间）* radius; //计算当前角度setTransform（img，angle）; if（playing）{if（radius< maxRadius）radius * = 1.03; //每帧增加3％ ; //每帧减少1％} time + = 0.1; requestAnimationFrame（loop）//循环，当radius  
 
  img {transform-origin：top center; -webkit-transform-origin：top center; }  
 
 < script src =https：// ajax .googleapis.com / ajax / libs / jquery /2.1.1/jquery.min.js>< / script>< img src =http://i.stack.imgur.com/Vma8v.png >< br>< button>顺利开始/停止< / button>  
 
 
 
 
 
 
您可能希望实现一种机制，以便当半径小于n时中止循环，然后在需要时启动循环。使用单独的标志，以便消除开始几个rAF的风险。
 
I have an image that swings using CSS rotate animation.
I would like to stop it smoothly (and put it back to its original position when clicking on another element but without getting the jumpy stop feeling).
It seems that the expected behaviour only happens on the first iteration of the animation but not on the upcoming ones (this is when clicking on the "slow" button during the first 2 seconds)

Here is a sample code
https://jsfiddle.net/pbarrientos/5v3xwak6/

I have already tried adding animation-iteration-count: 1;
and adding/removing classes.
var css = { 
        '-webkit-animation-iteration-count': "1",
        '-moz-animation-iteration-count': "1",
        'animation-iteration-count': "1"
    }
Clues anyone?
解决方案
I would use manual animation here. The browser is in charge of its CSS animation and it will be challenging to intervene with that with perfectly synced position and speed.

As the animation is not very complex we can simply set up our own matrix, or use the helper methods, as well as using a sine function where radius is reduced when stopped.

When hitting the stop button we reduce the radius to make it appear to be stopping. We can do the opposite to start again. The benefit is that we can stop at any point and have a natural rest. If you want to offset the angle you could interpolate to that angle at the same time as reducing radius.

By using requestAnimationFrame and transforms we will obtain smooth animation just like with CSS.

The main function would be:
angle = Math.sin(time) * radius;  // sin=[-1,1] radius => angle
Then when stopping, reduce radius which will end up as angle:
radius *= 0.99;      


Example



var img = $("img"), btn = $("button"),
    angle, maxRadius = 10, radius = maxRadius,
    playing = true, time= 0;

(function loop() {
  angle = Math.sin(time) * radius;            // calc current angle
  setTransform(img, angle);

  if (playing) {
    if (radius < maxRadius) radius *= 1.03;   // increase 3% each frame upto max
  } else {
    radius *= 0.99;                           // reduce 1% each frame
  }
  
  time += 0.1;
  requestAnimationFrame(loop)                 // loop, can be stopped when radius < n
})();

function setTransform(img, angle) {
  img.css("transform", "rotate(" + angle + "deg)");
  img.css("-webkit-transform", "rotate(" + angle + "deg)");
}

btn.on("click", function() {
  playing = !playing;
  if (playing && radius < 0.1) radius = 0.1;  // give some meat in case =0
});

img {
  transform-origin: top center; -webkit-transform-origin: top center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://i.stack.imgur.com/Vma8v.png"><br>
<button>Start / Stop smoothly</button>





You may want to implement a mechanism to abort the loop as well when radius is lower than n, then start the loop when needed. Use a separate flag for that so the risk of starting several rAF's is eliminated.

                        
这篇关于在未知关键帧上平滑停止CSS旋转动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！