自动布局、UIDynamics 和动画

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

我读了很多，我知道你必须遵守限制，编辑它，然后包装layoutIfNeeded in an UIView动画块。

但当真正要做的时候，我却有点失落。我很乐意有人能向我解释如何做这个动画 https://www.youtube.com/watch?v=BxDVMtOHgFw例如完成。

我认为它可能使用UIPanGestureRecognizer改变constant容器约束的前导空间，但它可能使用 UIDynamics （用于右侧的反弹效果？）。

好吧，类似的行为可以通过以下方式实现UIPanGestureRecognizer + [UIView animateWithDuration:animations:]。是的，您设置前导空间约束并根据UIPanGestureRecognizer状态。请记住，您只需设置最终约束（定义滑块的最终位置）。中间动画位置已为您计算。对于滑块我们有default左侧位置和活性中间位置。

对于视图旋转，我们可以使用transform的财产UIView.

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 事情变得更加复杂。好的起点是Ray Wenderlich UIKit 动力学教程 http://www.raywenderlich.com/50197/uikit-dynamics-tutorial.

对于弹跳滑块，我们可以添加以下行为：

• UIGravityBehavior它将滑块拉到起始位置。我们需要改变angle将重力指向左侧的属性。
• UICollisionBehavior它定义了允许移动的左边缘和右边缘。translatesReferenceBoundsIntoBoundary如果我们将父视图视为边界，属性将很有用。此外，我们还需要添加额外的边界来阻止滑块在中间使用addBoundaryWithIdentifier:fromPoint:toPoint（或贝塞尔路径）。
• UIDynamicItemBehavior改变elasticy并且可能resistance属性分别配置弹跳和加速度。
• 可能UIPushBehavior与识别器结合使用velocityInView:指定用户释放滑块时的滑块速度
• 可能UISnapBehavior作为替代UIGravityBehavior