ios – 稍后添加子视图以进行动画处理

你说你的插头视图应该完全覆盖套接字视图.我们需要担心两件事情：插件的图层位置(layer.position)和图层大小(layer.bounds.size).

默认情况下,位置控制图层的中心(和视图),因为默认的anchorPoint是(0.5,0.5).如果我们将anchorPoint设置为(0,0),则位置控制图层的左上角,并且我们总是希望它在套接字坐标系中位于(0,0).因此,通过将anchorPoint和位置设置为CGPointZero,我们可以避免担心动画的layer.position.

这只是让我们动画layer.bounds.size.

当您使用UIKit动画动画化视图时,它将创建CABasicAnimation的实例. CABasicAnimation是CAAnimation的一个子类,它添加了(来自其他方面)fromValue和tovalue属性,指定动画的起始和终止值.

CAAnimation符合camediatiming协议,这意味着它具有beginTime属性.创建CAAnimation时,它的默认beginTime为零.当核心动画提交当前事务时,核心动画将改变当前时间(见CACurrentMediaTime).

但是如果动画已经有一个非零的beginTime,那么Core Animation就是按原样使用的.如果那个beginTime是过去的,那么当动画首次出现在屏幕上时,动画已经部分(甚至完全)完成,并且已经在已经进行了适当的进度的情况下绘制.我们本质上可以“回溯”动画.

所以,如果我们挖掘CABasicAnimation控制套接字的bounds.size,并将其添加到插头,插头应该按照我们想要的方式动画.当我们将动画附加到插件时,它的beginTime是开始动画插件的时间.因此,即使我们稍后将其附加到插头,它将与套接字完美同步.而且由于我们希望插头和插座具有相同的大小,所以fromValue和tovalue也是正确的.

在我的测试应用程序中,我使插座粉红色和插头蓝色.每个都是UIImageView,显示边缘线条的图像,所以我们可以确保视图始终具有正确的大小.这是它的行动：

还有一个扭曲.如果您为已经动画化的视图动画化,UIKit不会停止早期的动画.它添加第二个动画,并且两个动画同时运行.

这是因为UIKit使用加法动画.当视图宽度从320到160之间动画时,UIKit会立即将宽度设置为160,并添加从160到0的加法动画.在动画开始时,视图宽度为160 160 = 320,在结束,视野宽度为160 0 = 160.

当UIKit在第一个运行时添加第二个动画时,两个动画的值都将添加到用于在屏幕上绘制视图的表观值.效果如下：

这对我们来说意味着我们必须使用position.size的keyPath来查找所有的套接字动画,并将它们全部复制到插件.以下是我测试应用中的代码：

- (IBAction)plugWasTapped:(id)sender {
    if (self.plugView.superview) {
        [self.plugView removeFromSuperview];
        return;
    }

    self.plugView.frame = self.socketView.bounds;
    [self.socketView addSubview:self.plugView];

    for (Nsstring *key in self.socketView.layer.animationKeys) {
        CAAnimation *rawAnimation = [self.socketView.layer animationForKey:key];
        if (![rawAnimation isKindOfClass:[CABasicAnimation class]]) {
            continue;
        }

        CABasicAnimation *animation = (CABasicAnimation *)rawAnimation;
        if ([animation.keyPath isEqualToString:@"bounds.size"]) {
            [self.plugView.layer addAnimation:animation forKey:key];
        }
    }
}

这是多个同时动画的结果：

UPDATE

获取插件视图的完整视图层次结构动画,就好像它已经在那里首先是坦白地太多的工作.

这里有一个选择：

>将套接字的原始大小放置在插头视图上,并创建它的图像(“开始图像”).
>将套接字的最终大小放置在插头视图上,并创建它的图像(“结束图像”).
>将占位符图像视图放入套接字.
>将大小动画从套接字复制到占位符.
>使用大小动画在占位符上创建内容动画,将其内容从开始图像与最终图像交叉淡化.
>动画结束时,用插头视图替换占位符.

这是它的样子：

除了交叉淡入淡出之外,此版本不会同时处理多个动画.您可以在我的仓库中的crossfade标签下找到这个(在顶部链接).

另一种方法是将插件视图呈现为最终尺寸,并将其放在占位符中,而不会出现交叉淡入淡出.看起来像这样：

我认为这样看起来更好,这个版本处理堆叠的动画.您可以在我的存储库中的stretch-end-image标签下找到它.

最后,我没有实现一种完全不同的方法.这只适用于调整您自己创建的动画大小 – 它不适用于系统在方向更改时创建的旋转动画.您可以使用定时器,而不是使用UIKit动画来简单地动画您的套接字视图的边界. WWDC 2012 Session 228: Best Practices for Mastering Auto Layout讨论了这个结束.他建议使用NSTimer,但我认为您最好使用CAdisplayLink.如果您采取这种方法,插件视图的子视图将完全动画.这比使用UIKit动画多一点工作,但应该是直接实现.