将自动布局与核心动画相结合 [英] Combining autolayout with core animation

问题描述

我是核心动画的新手，我正为一件事而苦苦挣扎-如何将自动布局与核心动画结合起来.其实我在Core Animation的文档中只发现了一个句子，就是自动布局.

I'm new to core animation and I'm struggling with one thing - how to combine autolayout with core animation. Actually I've found only one sentence in the documentation of Core Animation which refers to Autolayout here is it

记住要在动画中更新视图约束 如果使用基于约束的布局规则来管理视图的位置，则在配置该动画时，必须删除所有可能干扰动画的约束.约束会影响您对视图的位置或大小所做的任何更改.它们还会影响视图及其子视图之间的关系.如果您要对这些项目中的任何一项进行动画处理，则可以删除约束，进行更改，然后应用所需的新约束.

Remember to Update View Constraints as Part of Your Animation If you are using constraint-based layout rules to manage the position of your views, you must remove any constraints that might interfere with an animation as part of configuring that animation. Constraints affect any changes you make to the position or size of a view. They also affect the relationships between the view and its child views. If you are animating changes to any of those items, you can remove the constraints, make the change, and then apply whatever new constraints are needed.

但是，正如我尝试过的那样，一切都不像看起来那样困难. 这是我的情况.

But as I've tried all is not as strait-forward as it may seem. Here is my scenario.

我设计了一个滑动菜单，该菜单广泛使用自动布局.这是该视图的外观.

I've designed a sliding menu which uses autolayout extensively. Here is the appearance of that view.

我正在使用自动布局约束来强制将这些项目按比例放置在滑动菜单中.实际上那里有很多限制，我不想在我的问题中发布所有这些限制，甚至可能不需要它们来直接回答这个问题，但是如果您需要它们，我可以用那些更新约束.

I'm using autolayout constraints to force proportional positioning of those items in the sliding menu. Actually there are a lot of constraints there and I didn't want to post all of those in my question, and even may be they are not needed for direct answer of this question, however if you need them I can update the post with those constraints.

您在gif中看到的动画只能通过自动布局实现.我只是将出口添加到滑动菜单的高度约束中，并以这种方式进行了更改:(代码是使用Xamarin Monotouch编写的，但是我认为对于纯iOS开发人员来说应该很清楚在这里做了什么)

The animation that you see in the gif was reached by only autolayout. I just added outlet to the height constraint of the sliding menu and changed it in this way: (the code is written using Xamarin Monotouch, but I believe it should be clear what is done here for pure iOS developers)

private void AnimateSlideMenuAppearance()
    {
        float height;
        if (isSlideMenuShown) {
            height = 0;
        } else {
            height = slideMenuHeight;
        }
        UIView.Animate (0.4,
            delegate {
                this.slideMenuHeightConstraint.Constant = height;
                this.View.LayoutIfNeeded ();
            }, 
            delegate {
                isSlideMenuShown = !isSlideMenuShown;
            });
    }

现在，我想获得更复杂的外观过渡. 点击此处以查看我想要达到的效果.

Now I want to get more sophisticated appearance transition. CLICK HERE to see the effect that I want to reach.

只是尝试一下，我试图用一系列CABasicAnimation实现该动画的消失部分，但未成功，我得到了奇怪的行为.

Just to try out I tried to implement the disappearing part of that animation with series of CABasicAnimations, but it was unsuccessful, I get strange behaviour.

有人可以建议我在这里做什么吗?可以使用自动布局来计算视图的位置，但是以某种方式覆盖自动布局大小更改之间的动画吗?我的意思是在我的具体示例中，而不是按比例减小菜单中所有按钮的大小，我需要向其添加FadeOut动画，将边界动画化为零，还需要从一个按钮到另一个按钮从根本上增加动画的开始时间，以便获得效果我想要的.还是我需要完全摆脱自动布局并手动计算尺寸和动画?

Can anybody suggest what I should do here? Is that possible to use autolayout to calculate the positions of the views, but somehow override the animation between autolayout size changes? I mean in my concrete example instead of proportionally decreasing the sizes of all buttons in menu I need to add FadeOut animation to them, animate the bounds to zero and also radically increase begin time of the animations from button to button in order to get the effect that I want. Or may be I need to completely get rid of autolayout and manually calculate the sizes and animations?

在这种情况下的最佳实践是什么-当您具有复杂的自动布局并且需要在自动布局更改之间进行自定义的核心动画"过渡时?我希望我很好地描述了这个问题. 谢谢您的回答.

What is the best practice in these kind of scenarios - when you have complex autolayouting and you need custom Core Animation transitions between autolayout changes? I hope that I described the question well. Thank you for your answers.

推荐答案

这是完全可行的，尽管它可能很复杂，仅仅是因为它看起来像您希望的情况将具有多个动画.

This is completely feasible, while it may be complex solely because it looks like your desired cases will have multiple animations.

但是，我注意到您的代码中有一件事很奇怪:您更改了动画块中约束(this.slideMenuHeightConstraint.Constant = height)上的常量，而不是之前的常量.在我能想到的几乎所有情况下，都应在动画块之前 更改约束.直到下一个UI运行循环(或通过setNeedsUpdateConstraints强制将其用于下一个运行循环)，或立即通过layoutIfNeeded，约束都不会以视觉方式呈现.并且由于[UIView animate:...]为您执行了此操作，因此，layoutIfNeeded(通常)应该是动画版块中动画设置时唯一的 内容.

However, I noticed one thing in your code that's odd: you change the constant on the constraint (this.slideMenuHeightConstraint.Constant = height) in the animation block, instead of before it. For nearly all cases I can imagine, you should change the constraint before the animation block. Constraints are not visually rendered until either the next UI run loop (or by setNeedsUpdateConstraints to force it for the next run loop), or immediately by layoutIfNeeded. And since [UIView animate:...] is doing this for you, layoutIfNeeded should (generally) be the only thing in your animate block, when animating autolayout.

在您的情况下，您将不得不使动画具有某种反应性，例如-例如，如果您想像示例中那样添加这些按钮，然后使它们弹出，设置动画并进行扩展.调用layoutIfNeeded后，您可以安全地检查帧大小.如果超出阈值(或其他指标)，则可以触发按钮的动画. (所以是的，这可能是在动画块内添加更多代码的情况-检查阈值，开始其他动画等).

In your case, you will have to make the animation somewhat reactive, however - for e.g., if you want to add those buttons in like in the example and have them pop in, animate out, and grow. After calling layoutIfNeeded, you can safely check the frame size. If it's beyond your threshold (or some other metric), you can trigger then animations of the buttons. (So yes, this may be a case where I'd add more code inside the animate block -- check the threshold, begin other animation, etc).

这篇关于将自动布局与核心动画相结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！