如何平滑立方贝塞尔变换 [英] How to smoothen a cubic bezier transition

问题描述

我正在使用以下css转换：

 立方贝塞尔（0.16，1，0.29，0.99）
  

问题是在动画结束时，元素的速度太慢，

这里是一个jsfiddle演示了这个问题：
http://jsfiddle.net/vivmaha/xu7dzrbs/

有上述问题的常见解决方案吗？ / p>

例如，我可以同时指定三次贝塞尔和最小速度吗？

解决方案

我认为明显的缓慢（即，有时被称为 jank ）取决于动画的CSS属性。

例如，如果 left 属性是动画，那么 jank -iness将会非常明显，但如果它被替换为 动画 translateX 在转换属性 ，那么我认为结果会更顺利。

我相信 CSS触发 是一个很好的资源关于这一点，它告诉你哪些属性触发布局，绘画，最后组成。

除此之外，你可能需要向我们展示描述慢度的演示。所以，我们可以更好地告诉它是否与缓动曲线有关，或者如果它是一个问题的属性你是动画的第一。

这里是一个 before 和此解决方案之后。

I'm using the following css transition:

cubic-bezier(0.16, 1, 0.29, 0.99)

The issue is that at the end of the animation, the velocity of the element is so slow that the human eye can see the individual frames.

Here is a jsfiddle that demonstrates the issue: http://jsfiddle.net/vivmaha/xu7dzrbs/

Is there a common solution for the above problem?

For example, can I specify both a cubic bezier AND a minimum velocity?

解决方案

I think the apparent slowness (i.e. as it is sometimes referred to as jank) at the end of an animation depends on what CSS attribute you are animating.

For example, if it is left attribute being animated then the jank-iness will be pretty obvious but if it is replaced by something that animates translateX on a transform property then I think the result will be much smoother.

I believe CSS Triggers is a good resource regarding this, in that it tells you which properties trigger layout, paint and finally composition.

Other than that, you probably need to present us with a demo depicting the slowness. So that we could better tell if it is something to do with easing curves or if it is a problem with the property you are animating in the first place.

Here is a before and after of this solution.

这篇关于如何平滑立方贝塞尔变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！