ios - 使用 UIKit Dynamics 动画自动布局支持 View

Question

我想使用 UIKitDynamics UISnapBehaviour 为按钮的动画(外观 + 旋转时的位置变化)增添趣味，该按钮本身位于使用自动布局的 View 中。

我知道在应用 UIKitDynamics 强制时我需要暂时禁用按钮的自动布局约束。我在想下面的过程……

1. 获取按钮的目标中心/边界在基于自动布局的转换发生之前(但在它被触发之后)。保存该值。
2. 暂时禁用按钮的所有自动布局/约束
3. 应用 UISnapBehaviour。使用自动布局(来自第 1 步)中保存的目标中心或边界值为其提供数据。
4. 当 UIKitDynamics 动画完成时重新启用约束以准备任何进一步的布局更改

这是正确的方法吗？

对于那些相应的步骤应该使用哪个委托(delegate)/布局 + 如何在实际的基于自动布局的动画之前从自动布局中获取 View 的目标中心/转换发生了吗？

Answer 1

我可能会建议一种不同的方法来近似于 UISnapBehavior，但避免尝试将 UIKit Dynamics 与自动布局结合起来，在这种情况下您依赖自动布局引擎来确定 View 的最终位置。 (显然，如果您知道最终目的地，那么您只需暂停自动布局、捕捉，并在捕捉完成后应用约束。)

对于 View 捕捉到位时的弹跳效果，您可以使用 animateWithDuration 和 usingSpringWithDamping 参数，例如:

// create the view

UIView *view = ...;
view.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:view];

// add all of the constraints for the final position

NSDictionary *views = NSDictionaryOfVariableBindings(view);
[self.view addConstraints:...];

// animate the application of those constraints with low `withSpringWithDamping`

[UIView animateWithDuration:1.0 delay:0.0 usingSpringWithDamping:0.5 initialSpringVelocity:0.0 options:0 animations:^{
    [view layoutIfNeeded];
} completion:nil];

如果你还想在它卡入到位时进行一些旋转，你可以使用 animateKeyframesWithDuration:

[UIView animateKeyframesWithDuration:1.0 delay:0.0 options:0 animations:^{
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        view.transform = CGAffineTransformMakeRotation(M_PI_4 / 2);
    }];
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
        view.transform = CGAffineTransformMakeRotation(-M_PI_4 / 4);
    }];
    [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.125 animations:^{
        view.transform = CGAffineTransformMakeRotation(M_PI_4 / 16);
    }];
    [UIView addKeyframeWithRelativeStartTime:0.875 relativeDuration:0.125 animations:^{
        view.transform = CGAffineTransformMakeRotation(0);
    }];
} completion:nil];

这不完全是 UISnapBehavior，但非常接近它。您还可以尝试关键帧动画中的时间和旋转量以及 Spring 阻尼系数。但这说明了一种使用基于 block 的动画获得类似快照行为的方法。