关键帧动画关键时间 [英] Keyframe animation key time

问题描述

我刚刚创建了一个关键帧动画：

I've just created a keyframe animation like this:

[UIView animateKeyframesWithDuration:10 delay:0 options:0 animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.1 animations:^{
        view.alpha = 0;
    }];
} completion:nil];

这是一个 CAKeyframeAnimation ：

And this is a CAKeyframeAnimation that gets created:

(lldb) po [self.layer animationForKey:@"opacity"]
<CAKeyframeAnimation:0x10a6364b0; keyTimes = (
    0,
    "0.1",
    1
); values = (
    1,
    0,
    0
); calculationMode = linear; delegate = <UIViewKeyframeAnimationState: 0x10a6358d0>; fillMode = both; timingFunction = easeInEaseOut; duration = 10; keyPath = opacity>

问题：

整个动画需要10秒，不透明度动画为10 * 0.1 = 1秒，对不对？

The entire animation should take 10 seconds with the opacity animating for 10 * 0.1 = 1 second, right? When I look at the animation, the change is being animated way longer than 1 second.

为什么？

推荐答案

原因是动画的时序函数不是线性的。

The reason is that the animation's timing function is not linear.

时间和空间是相对的概念。相对论

"Time and space are relative concepts." – Theory of relativity

层和动画使用分层定时系统，其中每个对象都有自己的本地时间，的父母和其自己的时间参数。

Layer and animations use a hierarchical timing system, where each object has its own local time which is dependant of its parents and its own timing parameters.

例如，动画有定义他们的步调的计时功能。由UIKit创建的动画的默认定时功能是缓入式定时功能，其定义了开始缓慢，加速其持续时间的中间，然后在完成之前再次减慢的定时。它使得平滑的动画不会突然启动或停止。但是，当你需要精确的计时时，它也会影响你的关键帧动画的关键时间，这是恼人的。

For instance, animations have a timing function that defines their pacing. The default timing functions for an animation created by UIKit is the ease-in ease-out timing function which defines a timing that begins slowly, accelerates through the middle of its duration, and then slows again before completing. It makes for smooth animations that don't start or stop abruptly. However it will also temper with the key times of your keyframe animation which is annoying when you need precise timing.

你可以通过传递禁用缓入时间 animateKeyframesWithDuration：delay：options：animations：completion：方法的 UIViewAnimationOptionCurveLinear 选项。我不知道是否需要将值从 UIViewAnimationOptions 转换为 UIViewKeyframeAnimationOptions ，文档不会说什么。也许一种更好的（但更冗长的）方式是将关键帧动画块嵌入到标准动画块内，如下所示：

You can disable the ease-in ease-out timing by passing the UIViewAnimationOptionCurveLinear option to the animateKeyframesWithDuration:delay:options:animations:completion: method. I'm not sure whether it's intended as you need to cast the value from UIViewAnimationOptions to UIViewKeyframeAnimationOptions and the documentation does not say anything about that. Maybe a better (but more verbose) way is to embed the keyframe animation block inside a standard animation block like this:

[UIView animateWithDuration:10 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    [UIView animateKeyframesWithDuration:0 /*inherited*/ delay:0 options:0 animations:^{
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.1 animations:^{
            view.alpha = 0;
        }];
    } completion:nil];
} completion:nil];

这篇关于关键帧动画关键时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！