Добавить subview позже, чтобы анимировать вместе с superview

вы можете найти здесь мой тестовый проект.

вы говорите, что ваш вид вилки должен полностью, точно покрывать вид сокета. Нам нужно беспокоиться о двух вещах: положение слоя вилки (layer.position) и размер слоя (layer.bounds.size).

по умолчанию position управляет центром слоя (и видом), потому что по умолчанию anchorPoint is (0.5, 0.5). Если мы установим anchorPoint to (0, 0), затем position управляет верхним левым углом слоя, и мы всегда хотим, чтобы это было в (0, 0) в системе координат сокета. Поэтому, установив оба anchorPoint и position to 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 добавляет вторую анимацию во время работы первой, значения обеих анимаций добавляются к кажущемуся значению, используемому для рисования вида на экране. Вот это:

что это означает для нас, мы должны искать все анимации сокетов с keyPath of position.size, и скопируйте их все в разъем. Вот код в моем тестовом приложении:

- (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];
        }
    }
}

вот результат с несколько одновременных анимаций:

обновление

получение иерархии полного представления представления плагина для анимации, как если бы он был там в первую очередь, откровенно слишком много работы.

вот один из вариантов:

1. выложите вид вилки в исходном размере сокета и создайте его изображение ("начать изображение").
2. положите вне взгляд штепсельной вилки на окончательный размер сокет и создайте его образ ("end image").
3. поставить изображение заполнитель в розетку.
4. скопируйте анимацию размера из сокета в заполнитель.
5. используйте анимацию размера для создания анимации содержимого на заполнителе, который пересекает его содержимое от начального изображения до конечного изображения.
6. когда анимация закончится, замените заполнитель на представление plug.

вот как это выглядит например:

в дополнение к несовершенству crossfade, эта версия не обрабатывает несколько анимаций, работающих одновременно. Вы можете найти это под crossfade тег в моем репозитории (ссылка вверху).

другой подход заключается в том, чтобы просто отобразить представление plug в его окончательном размере и поместить его в заполнитель без кроссфейда. Похоже это:

я думаю, что это выглядит лучше, и эта версия обрабатывает сложенные анимации. Вы можете найти это под stretch-end-image тег в моем репозитории.

наконец, есть совершенно другой подход, который я не реализовал. Это будет применяться только к изменению размера анимации, которую вы создаете сами-это не будет работать для анимации вращения, созданной системой при изменении ориентации. Вы можете просто анимируйте границы своего сокета самостоятельно, с помощью таймера, вместо использования анимации UIKit. WWDC 2012 сессия 228: лучшие практики для освоения Auto Layout обсуждает это ближе к концу. Он предлагает использовать NSTimer но я думаю, что вам лучше использовать CADisplayLink. Если вы примете этот подход, подвиды plug view будут полностью анимироваться. Это намного больше работы, чем использование анимации UIKit, но должно быть простым в реализации.