如何使用 Core Animation 创建自定义缓动函数？

Question

我在 iOS 中很好地沿着 CGPath (QuadCurve) 制作了 CALayer 动画。但我想使用比少数更有趣的缓动函数 由 Apple 提供（EaseIn/EaseOut 等）。例如，弹跳或弹性函数。

这些事情可以用 MediaTimingFunction （贝塞尔曲线）来完成：

但我想创建 更复杂的计时功能。问题是媒体计时似乎需要三次贝塞尔曲线，但其功能不足以创建这些效果：

_{（来源：sparrow-framework.org）}

要创建的代码上面的内容在其他框架中已经足够简单了，这使得这非常令人沮丧。请注意，这些曲线是将输入时间映射到输出时间（Tt 曲线），而不是时间-位置曲线。例如，easeOutBounce(T) = t 返回一个新的t。然后，t 用于绘制运动（或我们应该设置动画的任何属性）。

所以，我想创建一个复杂的自定义 CAMediaTimingFunction 但我不知道如何做到这一点，或者是否可能？有其他选择吗？

编辑：

这是步骤的具体示例。非常有教育意义 :)

1. 我想沿着从点 a 到 b 的直线为对象设置动画，但我希望它使用以下命令“弹跳”沿直线的运动上面的 easyOutBounce 曲线。这意味着它将沿着从 a 到 b 的精确路线，但会以比当前基于贝塞尔曲线的 CAMediaTimingFunction 更复杂的方式加速和减速。

2. 让我们使该线成为由 CGPath 指定的任意曲线移动。它仍应沿着该曲线移动，但应以与直线示例中相同的方式加速和减速。

理论上我认为它应该像这样工作：

让我们将运动曲线描述为关键帧动画 move(t) = p，其中 t 是时间 [0..1] ，p是在时间t计算的位置。因此，move(0) 返回曲线起点的位置，move(0.5) 返回曲线的中间位置，move(1) 返回曲线末尾的位置。使用计时函数 time(T) = t 为 move 提供 t 值应该可以满足我的需求。对于弹跳效果，计时函数应为 time(0.8) 和 time(0.8) 返回相同的 t 值（仅作为示例） 。只需更换定时功能即可得到不同的效果。

（是的，可以通过创建和连接四个来回的线段来进行线弹跳，但这不是必需的。毕竟，它只是一个映射时间的简单线性函数价值观与职位。）

我希望我在这里说得有道理。

Answer 1

我发现了这个：

Cocoa with Love - Core Animation 中的参数化加速曲线

但我认为通过使用块可以使其变得更简单且更具可读性。因此，我们可以在 CAKeyframeAnimation 上定义一个类别，如下所示：

CAKeyframeAnimation+Parametric.h:

// this should be a function that takes a time value between 
//  0.0 and 1.0 (where 0.0 is the beginning of the animation
//  and 1.0 is the end) and returns a scale factor where 0.0
//  would produce the starting value and 1.0 would produce the
//  ending value
typedef double (^KeyframeParametricBlock)(double);

@interface CAKeyframeAnimation (Parametric)

+ (id)animationWithKeyPath:(NSString *)path 
      function:(KeyframeParametricBlock)block
      fromValue:(double)fromValue
      toValue:(double)toValue;

CAKeyframeAnimation+Parametric.m:

@implementation CAKeyframeAnimation (Parametric)

+ (id)animationWithKeyPath:(NSString *)path 
      function:(KeyframeParametricBlock)block
      fromValue:(double)fromValue
      toValue:(double)toValue {
  // get a keyframe animation to set up
  CAKeyframeAnimation *animation = 
    [CAKeyframeAnimation animationWithKeyPath:path];
  // break the time into steps
  //  (the more steps, the smoother the animation)
  NSUInteger steps = 100;
  NSMutableArray *values = [NSMutableArray arrayWithCapacity:steps];
  double time = 0.0;
  double timeStep = 1.0 / (double)(steps - 1);
  for(NSUInteger i = 0; i < steps; i++) {
    double value = fromValue + (block(time) * (toValue - fromValue));
    [values addObject:[NSNumber numberWithDouble:value]];
    time += timeStep;
  }
  // we want linear animation between keyframes, with equal time steps
  animation.calculationMode = kCAAnimationLinear;
  // set keyframes and we're done
  [animation setValues:values];
  return(animation);
}

@end

现在用法将如下所示：

// define a parametric function
KeyframeParametricBlock function = ^double(double time) {
  return(1.0 - pow((1.0 - time), 2.0));
};

if (layer) {
  [CATransaction begin];
    [CATransaction 
      setValue:[NSNumber numberWithFloat:2.5]
      forKey:kCATransactionAnimationDuration];

    // make an animation
    CAAnimation *drop = [CAKeyframeAnimation 
      animationWithKeyPath:@"position.y"
      function:function fromValue:30.0 toValue:450.0];
    // use it
    [layer addAnimation:drop forKey:@"position"];

  [CATransaction commit];
}

我知道它可能不像您想要的那么简单，但它是一个开始。

Answer 2

从 iOS 10 开始，可以使用两个新的计时对象更轻松地创建自定义计时功能。

1) UICubicTimingParameters 允许定义三次贝塞尔曲线作为缓动函数。

let cubicTimingParameters = UICubicTimingParameters(controlPoint1: CGPoint(x: 0.25, y: 0.1), controlPoint2: CGPoint(x: 0.25, y: 1))
let animator = UIViewPropertyAnimator(duration: 0.3, timingParameters: cubicTimingParameters)

或者只是在动画师初始化时使用控制点

let controlPoint1 = CGPoint(x: 0.25, y: 0.1)
let controlPoint2 = CGPoint(x: 0.25, y: 1)
let animator = UIViewPropertyAnimator(duration: 0.3, controlPoint1: controlPoint1, controlPoint2: controlPoint2) 

这个很棒的服务将帮助您为曲线选择控制点。

2) UISpringTimingParameters 让开发者可以操纵阻尼比，< em>质量、刚度和初始速度来创建所需的弹簧行为。

let velocity = CGVector(dx: 1, dy: 0)
let springParameters = UISpringTimingParameters(mass: 1.8, stiffness: 330, damping: 33, initialVelocity: velocity)
let springAnimator = UIViewPropertyAnimator(duration: 0.0, timingParameters: springParameters)

持续时间参数仍然存在于 Animator 中，但对于弹簧计时将被忽略。

如果这两个选项还不够，您还可以通过确认 UITimingCurveProvider 协议来实现您自己的时序曲线。

更多详细信息，如何使用不同的计时参数创建动画，您可以在文档中找到。

另外，请参阅 WWDC 2016 的UIKit 动画和过渡演示的进展。

Answer 3

创建自定义计时函数的一种方法是使用 CAMediaTimingFunction 中的 functionWithControlPoints:::: 工厂方法（还有相应的 initWithControlPoints:::: init 方法）。它的作用是为您的计时函数创建一条贝塞尔曲线。它不是一条任意曲线，但贝塞尔曲线非常强大且灵活。需要一些练习才能掌握控制点。提示：大多数绘图程序都可以创建贝塞尔曲线。玩这些会给你一个关于你用控制点表示的曲线的视觉反馈。

此链接指向苹果的文档。有一个简短但有用的部分介绍了如何从曲线构建预构建函数。

编辑：
以下代码显示了一个简单的弹跳动画。为此，我创建了一个组合计时函数（values 和 timing NSArray 属性），并为动画的每个片段指定了不同的时间长度（keytimes > 财产）。通过这种方式，您可以组合贝塞尔曲线来组合更复杂的动画时序。 这是一篇关于此的好文章带有很好的示例代码的动画类型。

- (void)viewDidLoad {
    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 50.0, 50.0)];

    v.backgroundColor = [UIColor redColor];
    CGFloat y = self.view.bounds.size.height;
    v.center = CGPointMake(self.view.bounds.size.width/2.0, 50.0/2.0);
    [self.view addSubview:v];

    //[CATransaction begin];

    CAKeyframeAnimation * animation; 
    animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"]; 
    animation.duration = 3.0; 
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;

    NSMutableArray *values = [NSMutableArray array];
    NSMutableArray *timings = [NSMutableArray array];
    NSMutableArray *keytimes = [NSMutableArray array];

    //Start
    [values addObject:[NSNumber numberWithFloat:25.0]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
    [keytimes addObject:[NSNumber numberWithFloat:0.0]];


    //Drop down
    [values addObject:[NSNumber numberWithFloat:y]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseOut)];
    [keytimes addObject:[NSNumber numberWithFloat:0.6]];


    // bounce up
    [values addObject:[NSNumber numberWithFloat:0.7 * y]];
    [timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];
    [keytimes addObject:[NSNumber numberWithFloat:0.8]];


    // fihish down
    [values addObject:[NSNumber numberWithFloat:y]];
    [keytimes addObject:[NSNumber numberWithFloat:1.0]];
    //[timings addObject:GetTiming(kCAMediaTimingFunctionEaseIn)];



    animation.values = values;
    animation.timingFunctions = timings;
    animation.keyTimes = keytimes;

    [v.layer addAnimation:animation forKey:nil];   

    //[CATransaction commit];

}

Answer 4

不确定您是否还在寻找，但 PRTween 看起来相当令人印象深刻，因为它的能力超越了Core Animation 为您提供开箱即用的功能，最值得注意的是，自定义计时功能。它还附带了许多（如果不是全部）各种 Web 框架提供的流行缓动曲线。

Answer 5

一个 swift 版本的实现是 TFAnimation。该演示是一个罪孽曲线动画。使用TFBasicAnimation就像CABasicAnimation一样，除了用timingFunction以外的块分配timeFunction。

关键点是子类 CAKeyframeAnimation 并通过 timeFunction 以 1 / 60fps s 的间隔计算帧位置。将所有计算值添加到 CAKeyframeAnimation 的 >values 以及 keyTimes 的时间间隔。

Answer 6

我创建了一种基于块的方法，它生成一个具有多个动画的动画组。

每个属性的每个动画都可以使用 33 种不同参数曲线中的一种、具有初始速度的衰减计时函数或根据您的需求配置的自定义弹簧。

生成组后，它会缓存在视图上，并且可以使用 AnimationKey 触发，无论是否有动画。一旦触发，动画就会相应地同步表示层的值，并相应地应用。

该框架可以在这里找到 FlightAnimator

下面是一个示例：

struct AnimationKeys {
    static let StageOneAnimationKey  = "StageOneAnimationKey"
    static let StageTwoAnimationKey  = "StageTwoAnimationKey"
}

...

view.registerAnimation(forKey: AnimationKeys.StageOneAnimationKey, maker:  { (maker) in

    maker.animateBounds(toValue: newBounds,
                     duration: 0.5,
                     easingFunction: .EaseOutCubic)

    maker.animatePosition(toValue: newPosition,
                     duration: 0.5,
                     easingFunction: .EaseOutCubic)

    maker.triggerTimedAnimation(forKey: AnimationKeys.StageTwoAnimationKey,
                           onView: self.secondaryView,
                           atProgress: 0.5, 
                           maker: { (makerStageTwo) in

        makerStageTwo.animateBounds(withDuration: 0.5,
                             easingFunction: .EaseOutCubic,
                             toValue: newSecondaryBounds)

        makerStageTwo.animatePosition(withDuration: 0.5,
                             easingFunction: .EaseOutCubic,
                             toValue: newSecondaryCenter)
     })                    
})

触发动画

view.applyAnimation(forKey: AnimationKeys.StageOneAnimationKey)