如何计算具有已知起始速度和距离的 UIViewAnimationCurveEaseOut 动画的持续时间?

发布于 2024-08-15 12:10:52 字数 540 浏览 2 评论 0原文

我正在使用 UIViewAnimationCurveLinear 对两点之间的视图进行动画处理,因此我知道该动画的速度。在某些情况下,我想附加 UIViewAnimationCurveEaseOut 以使视图缓慢停止。为了使这种效果无缝,缓出动画必须以与其之前的线性动画相同的速度开始。给定一个固定距离,我希望这种缓动发生,我如何计算达到这个已知起始速度所需的持续时间?

例如,假设我在 10 秒内将视图从 x = 0 动画到 x = 100。因此速度为 10 像素/秒。我现在希望使用 UIViewAnimationCurveEaseOut 动画将视图从 x = 100 减速到 x = 120。该动画应该持续多长时间才能确保以 10 像素/秒的速度开始?

据我了解,Core Animation 的 CAMediaTimingFunction 使用三次贝塞尔曲线控制动画节奏,其中第二个和第三个控制点决定曲线的形状。我认为 UIViewAnimationCurve 缓动函数也是三次贝塞尔曲线。如果我知道这些函数使用的默认控制点,我应该能够计算出计算给定速度和距离的持续时间的公式,但我还没有设法找到任何地方记录的这些默认控制点。

I'm animating a view between two points using UIViewAnimationCurveLinear, so I know the velocity of this animation. In certain circumstances I want to append a UIViewAnimationCurveEaseOut to make the view slow to a stop. To make this effect seamless, the ease-out animation must start at the same velocity as the linear animation that preceded it. Given a fixed distance over which I want this easing to occur, how can I compute the duration necessary to achieve this known starting velocity?

For example, let's say I'm animating my view from x = 0 to x = 100 over 10 seconds. The velocity is therefore 10 pixels / second. I now want the view to decelerate from x = 100 to x = 120 using a UIViewAnimationCurveEaseOut animation. What duration should this animation be to ensure that it starts at 10 pixels / second?

It's my understanding that Core Animation's CAMediaTimingFunction controls animation pacing using cubic Bezier curves, where the second and third control points dictate the shape of the curve. I presume that the UIViewAnimationCurve easing functions are also cubic Bezier curves. If I knew the default control points used by these functions I should be able to work out the formula to compute duration given velocity and distance, but I haven't managed to find these default control points documented anywhere.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

凯凯我们等你回来 2024-08-22 12:10:52

我可能无法给您完整的答案,但我可以向您指出 CAMediaTimingFunction 的 -getControlPointAtIndex:values: 方法。这应该让您创建一个 EaseOut 计时函数,然后检查它的控制点。

我还将向您推荐 Matt Gallagher 的文章 关于使用 CAKeyframeAnimation 完成的自定义加速曲线,这可能对您也有用。

I might not be able to give you a complete answer, but I can point you towards the CAMediaTimingFunction's -getControlPointAtIndex:values: method. That should let you create an EaseOut timing function and then examine it's control points.

I'll also point you towards an article by Matt Gallagher about custom acceleration curves done using CAKeyframeAnimation which might also be of use to you.

So要识趣 2024-08-22 12:10:52

您可以使用一个常量(称为 BEZIER_INTEGRAL_CONSTANT)来近似贝塞尔曲线的积分,该动画的长度为 1 秒,起始速度为 1 像素/秒。对于线性缓动,该常数为 0.5。对于UIViewAnimationCurveEaseOut,它大约 0.7。持续时间的公式为:

duration = distance / (velocity * BEZIER_INTEGRAL_CONSTANT)

对于您的示例,距离为 20 像素,起始速度为 10 像素/秒,持续时间应约为:20 / (10 * 0.7) = 2.9 秒.

You can use a constant (call it BEZIER_INTEGRAL_CONSTANT) that approximates the integral of the Bezier curve for an animation that is 1 second long starting at a velocity of 1 pixel / second. For linear easing, this constant is 0.5. For UIViewAnimationCurveEaseOut, it is approximately 0.7. The formula in terms of the duration is:

duration = distance / (velocity * BEZIER_INTEGRAL_CONSTANT)

For your example, where the distance is 20 pixels and the starting velocity is 10 pixels / second, the duration should be approximately: 20 / (10 * 0.7) = 2.9 seconds.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文