带有自动布局的新子视图的 iOS 7+ 缩放动画

Posted 2023-03-13

【中文标题】带有自动布局的新子视图的 iOS 7+ 缩放动画

【英文标题】：iOS 7+ scale animation of new subview with autolayout

【发布时间】：2015-08-02 21:53:12

【问题描述】：

我正在尝试创建“弹出式”动画（视图的高度和宽度应该从 0 变为某个值），但到目前为止我所做的只是视图从容器视图的左侧过渡到最终视图位置（下面的一些代码）。

是否可以仅使用约束和 UIView 的 animateWithDuration:... 方法来制作此动画，如果可能的话，我应该知道什么？

这是我用来将新视图添加到容器视图中的一些代码。我正在使用 PureLayout 来设置约束，但这应该不是问题。

//lastView is not nil
UIImageView *lastView = [containerView lastObject];

//Add view to the subview
[containerView addSubview:newView];

//Setup constraints for new view
[newView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:lastView withOffset:LABEL_PADDING_HOR];
[newView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];
[newView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionHeight ofView:newView];


//Here I've tried to set height to 0 then layout containerView and then set constraint to the final size but that doesn't work

//Animating this constraint
viewHeightConstraint = [newView autoSetDimension:ALDimensionHeight toSize:50];

// These 2 lines will cause -[updateViewConstraints] to be called again on this view, where the constraints will be adjusted to the new state
[containerView setNeedsUpdateConstraints];
[containerView updateConstraintsIfNeeded];

[UIView animateWithDuration:5.0
                      delay:0.0
     usingSpringWithDamping:0.6
      initialSpringVelocity:0
                    options:0
                 animations:^
                              [containerView layoutIfNeeded]; // this is what actually causes the views to animate to their new layout
                             
                 completion:^(BOOL finished) 
                             ];

感谢您的建议！

编辑：

基于 almas 回答的解决方案：

//lastView is not nil
UIImageView *lastView = [containerView lastObject];

//Add view to the subview
[containerView addSubview:newView];

//Setup constraints for new view
[newView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:lastView withOffset:LABEL_PADDING_HOR];
[newView autoAlignAxisToSuperviewAxis:ALAxisHorizontal];
[newView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionHeight ofView:newView];


//Here I've tried to set height to 0 then layout containerView and then set constraint to the final size but that doesn't work

//Animating this constraint
viewHeightConstraint = [newView autoSetDimension:ALDimensionHeight toSize:50];

newView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0, 0);

CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.scale";
anim.fromValue = [NSNumber numberWithFloat:0];
anim.toValue = [NSNumber numberWithFloat:1.0];
anim.duration = 1.0;
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeBoth;
anim.delegate = self;
[newView.layer addAnimation:anim forKey:@"scaleIn"];

newView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1, 1);

【参考方案1】：

您可能只是为图层的变换设置动画。 将其设置为：CGAffineTransformScale(CGAffineTransformIdentity, 0, 0); 然后动画到：

CGAffineTransformIdentity

您可以在此处找到更多示例：http://www.objc.io/issues/12-animations/animations-explained/

【参考方案2】：

Here's a solution I suggested elsewhere. 基本思想是通过交换它们的优先级在约束之间进行动画处理，然后调用你的动画块，你只需调用来更新视图的子层。我一直都在使用它，它应该可以让您不必处理 CALayers 或像素偏移值。