Быстрый просмотр анимации из строки

Быстрый просмотр анимации из строки

Swift 4.2, Xcode 10.0

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

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

Build out of line

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

Build into line


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

1
0
1 018
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

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

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

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

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

enter image description here

Убедитесь, что ваши представления контейнера - 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)
Ответ принят как подходящий

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

demo

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

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

side views

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

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

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

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

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

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

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

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

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

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

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

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

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

storyboard

В этом ответе прекрасная простота. Спасибо!

Noah Wilder 30.10.2018 03:20

Другие вопросы по теме