动画目标的对数标度-c

Question

我试图让圈子在前1-2秒内快速扩展，然后降低它的增长速度。我认为对数刻度最适合这个，但我不知道如何创建一个。我使用以下代码为圈子设置动画：

// Create a view with a corner radius as the circle
self.circle = [[UIView alloc] initWithFrame:CGRectMake(currentPos.x, currentPos.y, 10, 10)];
[self.circle.layer setCornerRadius:self.circle.frame.size.width / 2];
[self.circle setBackgroundColor:[UIColor clearColor]];
self.circle.layer.borderColor = [UIColor redColor].CGColor;
self.circle.layer.borderWidth = .5f;
UIPanGestureRecognizer *move = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
[self.circle addGestureRecognizer:move];
[self.view addSubview:self.circle];

[UIView animateWithDuration:5 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^(void){

    // Animate it to double the size
    const CGFloat scale = 2;
    [self.circle setTransform:CGAffineTransformMakeScale(scale, scale)];
} completion:nil];

Answer 1

最简单的方法是使用内置的动画选项，可以设置动画的简易性（UIViewAnimationOptionCurveEaseOut）

[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveEaseOut | UIViewAnimationOptionAllowUserInteraction animations:^(void){

    // Animate it to double the size
    const CGFloat scale = 2;
    [self.circle setTransform:CGAffineTransformMakeScale(scale, scale)];
} completion:nil];

这些是内置的易用类型：

如果您想要与此不同的东西，那么您需要自己做，我相信。

感谢这篇文章的轻松图片 How to create custom easing function with Core Animation?

Answer 2

我会使用animateKeyframesWithDuration:。这使您可以在动画期间在不同点设置比例（因此它可以是非线性的）。您可以使用单独的addKeyFrameWithRelativeStartTime：`调用来执行此操作。例如：

double total_duration = 5;
[UIView animateKeyframesWithDuration:total_duration delay:0 options:UIViewKeyframeAnimationOptionAllowUserInteraction animations:^(void){
    const CGFloat final_scale = 2;
    double acceleration = 1000; // the bigger this number, the bigger the initial acceleration
    double multiplier = (final_scale - 1) / (logf(1+ (1/acceleration)) - logf(1/acceleration));
    double addon = 1 - multiplier * logf(1/acceleration);
    double segments = 20;
    for (int segment = 0 ; segment < segments ; segment++) {
        [UIView addKeyframeWithRelativeStartTime:(segment/segments) relativeDuration:(1.0/segments) animations:^(void){
            double scale = multiplier * logf(segment/segments + (1/acceleration)) + addon;
            self.circle.transform = CGAffineTransformMakeScale(scale,scale);
        }];
    }
} completion:nil];

大致达到你想要的（虽然原谅乱七八糟的数学，它可能会被简化）！

Answer 3

我不认为视图动画允许除线性以外的任何曲线和“缓动”风格的动画。

我记得，Core Animation允许您使用三次贝塞尔曲线定义自定义计时功能。您应该能够创建一个近似于对数曲线的贝塞尔曲线。

有关为Core Animation方法创建自定义计时功能的信息，请参阅CAMediaTimingFunction上的文档。

但请注意，Core Animation是一个非常复杂的主题。核心动画方法并不像您发布的代码那样易于使用UIView动画。