ios - 自动布局、UIDynamics 和动画

Question

我对自动布局还很陌生，我对如何为 View 设置动画感到困惑。

我读了很多书，我知道您必须坚持约束，编辑它，并将 layoutIfNeeded 包装在 UIView 动画 block 中。

但是说到做，我有点迷茫。我希望有人能向我解释如何 this animation例如完成。

我认为它可能使用 UIPanGestureRecognizer 将前导空间的 constant 更改为容器约束，但它可能使用 UIDynamics(用于右侧的反弹效果？ ).

Answer 1

嗯，类似的行为可以通过 UIPanGestureRecognizer + [UIView animateWithDuration:animations:] 实现。是的，您设置了前导空间约束并根据 UIPanGestureRecognizer 状态更改它。请记住，您只需要设置最终约束(定义 slider 的最终位置)。为您计算中间动画位置。对于 slider ，我们有默认左侧位置和激活中间位置。

对于 View 旋转，我们可以使用 UIView 的 transform 属性。

IB 中的自动布局约束:

设置动画选项(UIViewAnimationOptionCurveEaseOut 动画曲线)可以产生弹跳效果。 UIPanGestureRecognizer 代码(省略实例变量声明，因为它们的名称不言自明):

- (IBAction)onPan:(UIPanGestureRecognizer*)sender
{
    switch (sender.state) {
        case UIGestureRecognizerStateBegan:
            _startOffset = self.leadingSpace.constant;
            _maxOffset = self.slider.superview.frame.size.width
                - kHorizontalPadding
                - self.slider.frame.size.width;
            break;

        case UIGestureRecognizerStateChanged: {
            CGFloat offset = _startOffset + [sender translationInView:self.slider.superview].x;
            offset = MIN(offset, _maxOffset);

            self.leadingSpace.constant = offset;
            break;
        }

        case UIGestureRecognizerStateEnded: {
            CGFloat offset = _startOffset + [sender translationInView:sender.view.superview].x;
            UIColor *bgColor = [UIColor lightGrayColor];
            CGFloat rotation = 0;

            if (offset < _maxOffset) {
                offset = kHorizontalPadding;
            }
            else {
                offset = (_maxOffset + kHorizontalPadding)/2;
                bgColor = [UIColor redColor];
                rotation = M_PI_2;
            }

            self.leadingSpace.constant = offset;

            [UIView
             animateWithDuration:.5
             delay:0
             options:UIViewAnimationOptionCurveEaseOut
             animations:^{
                 [self.slider layoutIfNeeded];
                 self.slider.backgroundColor = bgColor;
                 self.slider.transform = CGAffineTransformMakeRotation(rotation);
             } completion:nil];

            break;
        }

        default:
            break;
    }
}

UIViewAnimationOptionCurveLinear 的动画结果(捕捉模拟器):

UIViewAnimationOptionCurveEaseOut 的动画结果(捕获模拟器):

UIDynamics

有了 UIDynamics，事情变得更加复杂。好的起点是 Ray Wenderlich UIKit Dynamics Tutorial .

对于弹跳 slider ，我们可以添加以下行为:

• UIGravityBehavior 将 slider 拉到起始位置。我们需要更改 angle 属性以将重力引向左侧。
• UICollisionBehavior 定义允许移动的左右边缘。如果我们将父 View 视为边界，translatesReferenceBoundsIntoBoundary 属性将很有用。此外，我们还需要使用 addBoundaryWithIdentifier:fromPoint:toPoint(或贝塞尔曲线路径)添加额外的边界以在中间停止 slider 。
• UIDynamicItemBehavior 更改elasticy 和可能的 resistance 属性以分别配置反弹和加速。
• 可能 UIPushBehavior 与识别器的 velocityInView: 结合使用，以在用户释放 slider 时指定 slider 速度
• 可能 UISnapBehavior 作为 UIGravityBehavior 的替代品>