анимировать текст из inputAccessoryView в tableView, как приложение сообщений iOS 11

У меня есть приложение для чата, и мне было очень интересно реализовать анимацию, аналогичную той, что используется в приложении для сообщений. Отправка сообщения анимирует текст или мультимедиа из inputAccessoryView, где сообщение составляется непосредственно в tableView/collectionView, где оно отображается.

В настоящее время я ввожу свое сообщение в textView, который находится в inputAccessoryView. Когда пользователь нажимает ввод, сообщение добавляется в источник данных tableView и загружается в tableView.

Как я могу представить внешний вид анимации непосредственно из inputAccessoryView в tableView.


person alionthego    schedule 04.11.2017    source источник


Ответы (1)


Я считаю, что эта анимация работает следующим образом:

  1. Когда вы вводите текст и нажимаете кнопку «Отправить», в конец представления таблицы сообщений добавляется новый текстовый пузырек с помощью tableView.insertRows(at: [IndexPath], with: UITableViewRowAnimation). Это добавит пузырь и анимирует представление таблицы вверх.
  2. В то же время создается плавающий пузырьковый вид, который размещается поверх вида текстового ввода, так что его ширина охватывает передний край текстового поля и задний край нового пузырька чата, который был вставлен в табличное представление.
  3. Плавающий пузырьковый вид очень быстро и одновременно анимируется в двух направлениях: его ширина изменяется до тех пор, пока не достигнет той же ширины, что и новый пузырь в tableView, а его положение по оси Y изменяется с той же скоростью, что и добавленный пузырь чата, прокручиваемый вверх в tableView. .
  4. Затем, когда анимация заканчивается, плавающий пузырь удаляется.

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

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

person Felipe Ferri    schedule 04.11.2017