Swift View Animation from Line

Swift View Animation from Line

Swift 4.2, Xcode 10.0

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

Строить вне линии:

Строить вне линии

Строить в линию:

Построить в линию


Мое единственное решение на этом этапе - это поставить другой вид на противоположную сторону линии, чтобы закрыть вид, прежде чем он начнет оживлять. Но это плохое решение, и оно иногда может блокировать другие взгляды. Кроме того, я хотел бы избежать растягивания моего контента, потому что я хочу, чтобы иметь возможность выполнять эту анимацию с изображениями. Какой был бы лучший способ интегрировать это. Заранее благодарю за помощь!

Всего 3 ответа


Итак, вы хотите:

демонстрация

Подраздел может простираться за пределы его надзора. Когда это произойдет, часть clipsToBounds , clipsToBounds за пределами супервизора, будет видна, если свойство clipsToBounds объекта clipsToBounds является false , и скрыто, если clipsToBounds являются true .

Я использовал эту обрезку, чтобы скрыть часть зеленого изображения, расположенного ниже линии. Возможно, эти боковые представления в середине анимации помогут объяснить, как я это настроил:

вид сбоку

Супервизор (помеченный как «hider») был уменьшен до половины высоты зеленого вида. При включенной обрезке половина зеленого изображения скрыта. При отключенной обрезке внизу зеленая точка видна под линией.

Вот как я создал демо:

  1. Я положил зеленый вид в новый супервизор. Я называю этот новый супервизор «hider».

  2. Я включил флажок «Клипы к границам» в инспекторе атрибутов hider's.

  3. Я установил ограничения ширины и высоты на зеленый вид. Вы можете использовать другие ограничения (например, ведущий / трейлинг) для управления его размером.

  4. Я ограничил верхние, конечные и верхние края зеленого вида равными соответствующим краям хидера.

  5. Я ограничил высоту hider равным высоте зеленого вида плюс 12. 12 сделают белый край между зеленым видом и линией. Я установил приоритет этого ограничения на 999. Это означает, что автоматический макет будет очень стараться удовлетворить ограничение, но при необходимости устранит это ограничение, чтобы удовлетворить все требуемые ограничения.

  6. Я создал ограничение, определяющее высоту hider равным нулю. Я подключил это ограничение к выходу с именем hiderHeightConstraint в моем контроллере. Обратите внимание, что это означает, что на высоте hider есть два ограничения. Это приводит к тому, что высота хидера равна нулю и требуется. Другой (созданный на предыдущем шаге) устанавливает высоту hider для высоты зеленого представления плюс добавление, но не требуется. Когда вы редактируете макет в раскадровке, вы, вероятно, захотите отключить это ограничение, отключив его «Установленный» флажок в инспекторе Attributes ограничения.

  7. Я подключил кнопку «Переключить секретное сообщение» для этого действия:

    @IBAction private func toggleButtonWasTapped() {
        UIView.animate(withDuration: 0.7) {
            self.hiderHeightConstraint.isActive.toggle()
            self.view.layoutIfNeeded()
        }
    }
    

Вот как это работает. Когда hiderHeightConstraint активен, hider принуждается к нулевой высоте. Поскольку он зажимает свои подзоны, зеленый вид не отображается. Поскольку ограничение между высотой и высотой зеленого вида не требуется, зеленый вид все еще может быть его естественным размером. Другие ограничения (ведущий / конечный / верхний) заставляют зеленый вид выходить за нижний край hider.

Когда hiderHeightConstraint не активен, hider растет до высоты зеленого вида плюс дополнение, позволяя полностью увидеть зеленый вид.

Вот как выглядит раскадровка:

раскадровка


Это один из подходов, который вы можете выполнить для достижения этого:

Возьмите 2 контейнера UIView и 2 строки (вы можете снова взять UIView ) и 2 UIImageView (или любой из них для зеленого). Итак, ваш StoryBoard должен выглядеть так:

введите описание изображения здесь

Убедитесь, что вид вашего контейнера clips to bound (вы можете установить его только из раскадровки). Теперь вы можете легко достичь анимации с помощью CGAffineTransform .

Я буду называть имена розетки для анимированного представления как imageViewOne и imageViewTwo .

В viewDidLoad() напишите это (если изначально вид скрыт):

imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)

Затем, чтобы показать его с анимацией:

//To build out of line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = .identity
    self.imageViewTwo.transform = .identity
}, completion: nil)

//To build into line
UIView.animate(withDuration: 1.0, delay: 0.0, usingSpringWithDamping: 1.0, initialSpringVelocity: 0.5, options: .curveEaseInOut, animations: {
    self.imageViewOne.transform = CGAffineTransform(translationX: 0.0, y: containerViewOne.bounds.height)
    self.imageViewTwo.transform = CGAffineTransform(translationX: 0.0, y: -containerViewOne.bounds.height)
}, completion: nil)

Используйте представление, но затем вставьте в это представление строку, чтобы она выглядела аутентичной.

Затем, когда вы закончите, исчезнет вся анимация или если вы хотите, чтобы другие анимации проходили через нее, вы можете вызывать функции для перемещения представлений над другими

https://stackoverflow.com/a/38780829/4674760


Есть идеи?

10000