Айфон 5s что такое анимация

Как делать «живые» фото на айфон

Сегодня в нашей статье мы поговорим о новой программной функции в приложении «Камера» в iOS. Благодаря опции можно получать анимированные фотографии на iPhone, которые напоминают двигающиеся фотоснимки из «Гарри Поттера». Live Photos, представляет собой небольшие видео с низкой частотой кадров – 15 в секунду. За счет такого эффекта и создается впечатление, будто люди, животные или объекты на фотографиях двигаются и меняются.

Как делать «живые» фото на айфон? Нужно начать с того, что Live Photos можно снимать только на устройствах с поддержкой 3D Touch, к которым относятся модели iPhone 6s, 6s Plus, 7, 7 Plus, 8, 8 Plus и X. «Живые» фотографии можно делать с помощью задней или фронтальной камеры. Анимированные изображения (это не видеофайлы) представляют собой комбинацию из 45 12-мегапиксельных снимков в формате JPG с файлом MOV и воспроизводятся 3 секунды. Рассмотрим подробнее, как на айфоне делать лайв фото, особенности и доступные эффекты приложения.

Live Photo на iPhone: механизм съемки

Чтобы сделать изображение анимированным, приложение записывает 1,5 секунды видео до и после того, как будет сделан снимок. Из этих небольших фрагментов создается «контекст» для «живых» обоев, и на выходе получается готовая двигающаяся картинка. Анимация воспроизводится по прикосновению к экрану.

Как на айфоне делать двигающиеся фото:

открыть приложение «Камера»;

найти в верхнем меню опцию Live Photos;

нажать иконку затвора для создания снимка.

При этом необходимо постараться не перемещать камеру во время съемки. Нужно отметить, что из-за невысокой частоты смены кадров наиболее впечатляющего эффекта можно достичь, снимая неподвижные объекты с несколькими движущимися элементами на фоне. В результате получается атмосферное «живое» фото с особенным настроением.

Возможности приложения Live Photos в iPhone

С выходом iOS 11 в приложении «Живые фото» добавились инструменты для редактирования. Каждый владелец смартфона имеет широкие возможности для создания великолепных анимаций.

Как на айфоне делать двигающиеся фото с использованием доступных функций:

Главный снимок для анимации теперь можно взять из видеоряда, что позволяет не снимать для этого множество дополнительных фотографий. Для этого нужно выбрать опцию «Изменить» в верхнем меню, установить ползунок на самом удачном кадре на тайм-линии внизу и сделать его главным.

К «живым» фотографиям можно применять несколько эффектов. Прокрутка страницы на необходимое меню происходит смахиванием вверх выбранного для редактирования анимированного изображения. На данный момент доступно 4 варианта: стандартное лайв фото без эффектов по умолчанию, зацикливание картинки – эффект «Петля», воспроизведение в обратном порядке – «Маятник», имитация длинной выдержки как на DSLR-камерах с приятным блюром – «Длинная экспозиция». Последняя опция позволяет создавать красивые изображения рек и ночных автомобильных огней без использования зеркальной камеры, установленной на штатив.

Как делать «живые» фото на айфон и обрезать их? Двигайте левую и правую стрелочку на тайм-линии в режиме редактора, назначая начало и конец ваших Live Photos.

В режиме «Изменить» можно отключить звук анимированной фотографии, что сделает ее более схожей с gif-анимацией.

Возможно ли просматривать «живые» фото на разных моделях айфона

Мы разобрались с тем, как на айфоне делать лайв фото, редактировать их и добавлять разные эффекты. Насладиться созданным зрелищем из-за особенностей формата Live Photos (комбинация JPG + MOV) можно только на устройствах с iOS 9, Apple Watch с watchOS 2, Mac под управлением OS X El Capitan и выше. На технике, которая не поддерживает анимированные фотографии, они будут выглядеть как обычные фото в формате JPG. На одних гаджетах MOV-компонент будет просто убран, на других – будут отображаются два файла —с разрешением JPG и MOV.

Live Photos можно передавать без потери зрелищности с iPhone 8 Plus, например, на iPhone 6, если на нем установлена iOS 9. В таком случае проблем с воспроизведением анимации не возникнет. Для общей информации нужно добавить, что «живые» фото занимают больше памяти на телефоне, чем обычные снимки.

Источник

Как включить анимоджи на iPhone 8 и 8 Plus, а также на 7-х, 6-х, на 5s и на iPad?

Новые Animoji — это нынче одна из самых популярных фич нового iPhone X. Она так понравились публике, что уйма народу сразу же захотела заполучить такие же прикольные анимированные мордочки на свои смартфоны. А спрос, как известно, рождает предложение. И альтернативные анимоджи для других iPhone просто не могли не появиться.

И они появились.

Приложение с веселым названием MrrMrr — это , как говорится, легко и ненавязчиво внедряет анимоджи в любой iPhone. Если быть точным, то MrrMrr совместимо с моделями iPhone 5s, 6 и 6 Plus, iPhone 6s и 6s Plus, iPhone SE, iPhone 7 и 7 Plus, а также с новыми смартфонами iPhone 8 Plus и 8 (к слову, выгодно продать айфон 7 можно на swoop). Мало того, при желании MrrMrr поставить можно даже на iPad.

Единственное существенно условие: на смартфоне или планшете должна быть установлена как минимум iOS 11 или любая из её более свежих версий. А теперь более подробно.

Итак, как включить анимоджи на iPhone 8 и 8 Plus, 7, 7 Plus, 6(s), 6(s) Plus, iPhone SE или на iPhone 5s

Приложение MrrMrr способно отслеживать мимику вашего лица ни чуть не хуже, чем оригинальное Animoji вместе с супермегакамерой TrueDepth нового iPhone X. Притом за за неимением TrueDepth MrrMrr вполне себе обходится и обычной камерой вашего смартфона.

В настоящее время в галерее MrrMrr имеется сразу шесть мордочек, которые с предельной схожестью срисованы с настоящих анимоджи iPhone X. Плюс к этому есть еще куча всяких не менее прикольных «Масок», «Эффектов» и «Фильтров», с которыми тоже не скучно.

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

• качаем MrrMrr с App Store (кстати, совсем бесплатно) и устанавливаем на iPhone или iPad;
• после завершения установки запускаем программку (нужно будет разрешить её доступ к камере и микрофону);
• на панельке внизу экрана тапаем EMOJI;
• выбираем понравившийся анимоджи из списка доступных;
• ловим лицо в фокус камеры и жмем кнопку записи видео;
• далее — на ваше усмотрение: улыбаемся, кривляемся, веселимся…
• потом можно тапнуть кнопчку соцсети и выложить готовый ролик в fb, instagram или переслать кому-нибудь через мессенджер вместе с своими комментариями.

А можно ничего никуда не отправлять, а сначала сохранить ролик, а затем слегка подредактировать его, но уже с применением встроенных эффектов и дополнительных масок. В Snapchat, к примеру…

Источник

Разработка анимации на iOS — восемь примеров интерфейса с кодом Статьи редакции

Перевод материала дизайнера Натана Гиттера.

На WWDC 2018 дизайнеры Apple представили доклад под названием «Разработка текучих интерфейсов», в котором раскрыли детали жестового интерфейса IPhone X.

Это мой любимый доклад — очень рекомендую к просмотру.

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

Если вы попытаетесь реализовать эти идеи на практике, то обнаружите пропасть между идеей и тем, как её воплотить

Моя цель — преодолеть эту пропасть, представив рабочий код для всех примеров из презентации.

Что будет в этой статье:

• Краткое описание презентации «Проектирование текучих интерфейсов».
• Восемь текучих интерфейсов, теория дизайна, на которой они строятся, и код для их создания.
• Практические рекомендации для дизайнеров и разработчиков.

Текучий интерфейс также называют «быстрым» (fast), «гладким» (smooth) или «волшебным» (magical). Это опыт пользователя, когда он чувствует, что всё идёт как надо.

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

Они легко реагируют, в них можно прервать начатое действие и их можно перенацелить. Вот пример жеста «сдвинуть, чтобы вернуться на домашний экран» на IPhone X.

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

• Текучие интерфейсы улучшают опыт пользователя, делая каждое взаимодействие быстрым, лёгким и значимым.
• Они дают пользователю чувство контроля, которое укрепляет доверие к вашему приложению и бренду.
• Их сложно разработать. Текучий интерфейс трудно скопировать. Это может стать вашим конкурентным преимуществом.

Ниже я покажу, как построить восемь интерфейсов, которые охватывают все основные темы презентации.

Это кнопка, которая подражает поведению кнопок в приложении калькулятора iOS.

1. Выделяется цветом при нажатии.
2. Её можно коснуться, когда приложение ещё открывается.
3. Пользователь может нажать на кнопку и, не отрывая палец, увести иконку за границы кнопки, чтобы отменить нажатие.
4. Он может увести кнопку за её границы, но, передумав, вернуть на место, подтвердив этим желание её нажать.

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

Первым шагом для создания этой кнопки будет использование подкласса UIControl, а не подкласса UIButton (UIButton работал бы хорошо, но, поскольку мы настраиваем взаимодействие, нам не нужны его функции).

Далее мы используем UIControlEvents, чтобы назначить функции различным сенсорным взаимодействиям:

Мы группируем события touchDown и touchDragEnter в одно «событие» под названием touchDown, и мы можем сгруппировать события touchUpInside, touchDragExit и touchCancel в одно событие touchUp.

(Все доступные UIControlEvents можно посмотреть здесь.)

Это даёт нам две функции для обращения с анимацией:

На touchDown мы отменяем существующую анимацию, если это необходимо, и сразу же устанавливаем цвет выделения (в этом примере установлен светло-серый).

На touchUp мы создаём новый аниматор и запускаем анимацию. Использование UIViewPropertyAnimator упрощает отмену анимации выделения.

(Обратите внимание: этот вариант не в точности повторяет поведение кнопок в приложении калькулятора iOS. В приложении можно коснуться одной кнопки, но активировать другую, если перетащить палец внутрь второй.)

Этот интерфейс показывает, как создать пружинную анимацию, указав «damping» (упругость) и «response» (скорость).

• Интерфейс выглядит дружелюбно.
• Нет определённого времени продолжительности анимации.
• Действие легко прервать.

Пружинную анимацию отличают скорость и естественный внешний вид. Она быстро начинается и большую часть времени постепенно приближается к своему окончательному состоянию. Это идеально подходит для создания отзывчивых интерфейсов.

О чём нужно помнить при создании пружинных анимаций:

1. Пружинные анимации не должны быть упругими. Используя значение 1 для damping, вы создадите анимацию, которая медленно и без проблем останавливается. Большинство анимаций должны использовать значение параметра damping 1.
2. Не думайте о продолжительности анимации. Теоретически пружина никогда полностью не успокаивается, и установив продолжительность, вы можете сделать анимацию неестественной. Вместо этого поиграйте со значениями damping и response, пока не почувствуете, что анимация ведёт себя как надо.
3. Прерывание имеет решающее значение. Поскольку пружинная анимация большую часть времени находится в состоянии, близком к «спокойному», пользователи могут подумать, что анимация завершилась, и попытаться снова взаимодействовать с ней.

В UIKit мы можем создать пружинную анимацию с помощью UIViewPropertyAnimator и объекта UISpringTimingParameters. К сожалению, нет инициализатора, который даёт просто выставить значения для damping и response. Ближе всего к идеалу инициализатор UISpringTimingParameters, который позволяет установить mass (массу), damping, stiffness (жёсткость) и initial velocity (начальную скорость).

UISpringTimingParameters (mass: CGFloat, stiffness: CGFloat, damping: CGFloat, initialVelocity: CGVector).

Нам нужно создать удобный инициализатор, который даст ввести значения для damping и response, сопоставляя их с требуемой массой (mass), жёсткостью (stiffness) и упругостью (damping).

Используя знания физики, мы можем вычислить нужные формулы.

Теперь мы можем создать собственные UISpringTimingParameters с нужными нам параметрами.

Так мы будем прописывать параметры пружинных анимаций для всех интерфейсов.

Хотите углубиться в тему? Тогда советую к прочтению великолепный материал Кристиана Шнорра “Demystifying UIKit Spring Animations”.

Эта статья открыла для меня много нового. Огромное спасибо Кристиану за то, что помог мне понять математические вычисления, которые стоят за пружинными анимациями, и за то, что научил решать дифференциальные уравнения второго порядка.

Ещё одна кнопка, но её поведение сильно отличается. Вот как ведёт себя кнопка фонарика на экране блокировки IPhone X:

1. Для активации требует преднамеренного жеста 3D touch.
2. Визуально намекает на необходимый жест.
3. Тактильная обратная связь подтверждает активацию кнопки.

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

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

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

Чтобы измерить величину силы, прилагаемой к кнопке, мы можем использовать объект UITouch.

Мы прописали изменение размера кнопки в зависимости от приложенной силы, так что кнопка растёт с увеличением давления на экран.

Кнопка может быть нажата, но не активирована, так что нам нужно отслеживать её текущее состояние.

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

Для тактильной обратной связи мы используем генераторы обратной связи из UIKit.

Для пружинной анимации мы можем использовать UIViewPropertyAnimator с инициализаторами UISpringTimingParameters, которые мы создали ранее.

Резиновый скроллинг происходит, когда пользователь пытается сдвинуть там, где это невозможно. Например, когда он прокрутил страницу до конца и снова делает сдвиг вверх.

1. Интерфейс остаётся отзывчивым, даже если действие невозможно выполнить.
2. Несовпадение движения пальца и результата на экране говорит пользователю о достигнутой границе.
3. Изображение сдвигается тем меньше, чем дальше от границы пользователь начал жест.

Резиновый скроллинг — отличный способ указать на невыполнимость действия, который при этом даёт пользователю чувство контроля. Он мягко указывает границы, возвращая их в правильное состояние после резинового сдвига.

К счастью, реализовать его просто: offset = pow(offset, 0.7) .

Устанавливая значение экспоненты от 0 до 1, мы делаем так, чтобы страница смещалась тем меньше, чем дальше от границы пользователь начал сдвиг. Чем выше значение экспоненты, тем меньше будет смещение страницы, чем ниже, тем больше она сместится.

Чтобы чётче обозначить контекст, этот код обычно реализуется в UIPanGestureRecognizer. Смещение можно рассчитать как разницу между начальной и текущей точками касания и обозначить его с помощью преобразования трансляции.

Примечание: это решение не в точности повторяет резиновый скроллинг от Apple. Мне нравится такой метод из-за его простоты, но есть и более сложные решения для разных вариантов поведения.

Чтобы открыть панель многозадачности на iPhone X, пользователь делает сдвиг снизу вверх, приостановив палец на середине.

1. Момент паузы рассчитывается на основе быстроты совершения жеста.
2. Более быстрая остановка приводит к более быстрому отклику.
3. Нет таймеров.

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

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

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

Этот код обновляет массив скоростей (velocities), чтобы всегда иметь последние семь показателей, которые используются для вычисления ускорения.

Чтобы определить, достаточное ли ускорение сейчас придал пользователь, мы можем измерить разницу между первой скоростью в нашем массиве и текущей.

Мы также проверяем, есть ли у движения минимальные смещение и скорость. Если жест потерял более 90% скорости, считается, что он приостановлен.

Мой вариант реализации не идеален. На моём тестировании он работает очень хорошо, но можно найти и лучший способ измерения ускорения.

Выдвижная панель, которая открывается упруго или неупруго в зависимости от скорости жеста.

1. Нажатие на панель открывает её без эффекта упругости.
2. Смахивание вверх открывает её с эффектом упругости.
3. Интерактивно, прерываемо и обратимо.

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

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

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

Чтобы упростить логику в выборе между нажатием и панорамированием, мы можем использовать специальный подкласс распознавателя жестов, который сразу же переходит в состояние began при нажатии.

Это также позволит пользователю нажать на панель во время её движения, чтобы остановить его (как при нажатии на экран, когда содержимое страницы прокручивается). Чтобы удостовериться, хотел ли пользователь своим нажатием остановить выплывание панели, мы можем проверить, были равна скорость нулю, когда жест заканчивается, и продолжить анимацию.

Чтобы отреагировать на жест с ненулевой скоростью, сначала нужно рассчитать его скорость относительно общего остаточного перемещения.

Мы можем использовать эту относительную скорость, чтобы продолжить анимацию с параметрами timing, которые включают в себя немного пружинности.

Здесь мы создаём новый UIViewPropertyAnimator, чтобы вычислить время, которое должна занять анимация, чтобы мы могли обеспечить правильный durationFactor при продолжении анимации.

Есть и другие сложности, связанные с отменой анимации, на которых я не стал останавливаться в статье. Если вы хотите узнать больше по этой теме, прочитайте моё руководство “Building Better iOS App Animations”.

Повторное создание пользовательского интерфейса «картинка в картинке» (picture in picture — PiP) приложения iOS FaceTime.

1. Лёгкое, почти воздушное взаимодействие.
2. Прогнозируемая позиция основана на скорости замедления UIScrollView.
3. Непрерывная анимация, которая учитывает начальную скорость жестов.

Наша конечная цель — написать что-то вроде этого.

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

Первым делом вычислим начальную скорость.

Для этого нам нужно рассчитать относительную скорость, основанную на текущей скорости, текущей позиции и расположении цели.

Мы можем разбить скорость на её X- и Y-компоненты и определить относительную скорость для каждого.

Затем вычислим угол, в который должна двигаться анимация PiP.

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

Мы можем использовать скорость замедления UIScrollView для расчёта конечной позиции. Это удобно, потому что такое решение связано с мышечной памятью пользователя, в которой остался процесс прокрутки. Если пользователь знает, как далеко прокручивается страница при определённой скорости жеста прокрутки, он может использовать это знание, чтобы интуитивно угадать, сколько силы необходимо приложить для перемещения PiP в нужное место.

Эта скорость замедления помогает сделать взаимодействие лёгким — нужен лишь быстрый сдвиг, чтобы отправить PiP в полёт через весь экран.

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

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

Подводим итог: мы используем скорость замедления UIScrollView для прогнозирования движения PiP и вычисляем относительную скорость, чтобы передать всё это в UISpringTimingParameters.

Применение идей из создания интерфейса PiP к анимации вращения.

Источник