Анимация быстрого просмотра с линии

Question

Анимация быстрого просмотра с линии

Swift 4.2, Xcode 10.0

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

Построение вне линии:

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

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

Answer 1

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

Возьмите 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)

Answer 2

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

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

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

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

Вот как я настроил демонстрацию:

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

2. Я установил флажок «Clips to Bounds» в инспекторе атрибутов hider.

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

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

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

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

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

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

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

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

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

Answer 3

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

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

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