Зникає ефект паралаксу на 5s. Ефект паралаксу в iOS додатках. Панорамні картинки у «сімці»
Всі ми знаємо, що Apple намагається дбати про всі категорії своїх користувачів і випустили таку функцію, як зменшення руху на айфоні.
Вона дуже корисна і має логічне пояснення створення і звичайно застосування. Давайте розуміти, що це таке і як її можна активувати.
Що таке зменшення руху в iOS?
Почну я мабуть з того, що з появою iOS 7 було дуже багато змін і однією з них була фіча візуальної глибини екрана.
Якщо ви поставите на своєму iPhone спеціальну стандартну шпалеру, то при русі пристрою вони будуть рухатися і виглядає це все дуже ефектно.
Згодом також стали з'являтися покращені анімації відкривання програм. Також покращувалися анімації переходів та багато іншого.
Якщо користувачеві це просто ні до чого, то все це можна відключити за допомогою функції «Зменшення руху». Що також, допоможе заощадити трохи заряду акумулятора.
Про її включення ми поговоримо трохи пізніше, а поки що хочу перерахувати, що саме відключиться після активації:
- забирається анімація у стандартному додатку «Погода»;
- повністю змінюються всі ефекти екрана;
- ефект паралаксу, що я пояснював для шпалери, теж відключається;
- ну і деякі інші стандартні програми теж перестають використовувати анімацію.
Думаю основну суть даної функції ви зрозуміли і тепер настав час приступати до частини, коли розповім про те, як правильно активувати функцію або відключити при потребі.
Як увімкнути/вимкнути зменшення руху на айфоні?
Почну цю частину з того, що найчастіше цю функцію використовують на старих пристроях або телефонах, батарейка яких вже зменшилася в обсязі. 
Це означає, що її використовують для збільшення тривалості роботи iPhone і якщо у вас стара модель і ви не бажаєте бачити плавну роботу свого пристрою на останніх iOS.
Ну і тепер можна приступати до включення функції зменшення руху:
- як і завжди, заходимо в Налаштування- Шукаємо пункт Основні;
- заходимо в Універсальний доступ — Зменшення руху;
- бачимо пункт з аналогічною назвою і просто активуємо його, щоб спалахнуло зеленим.
Внизу ви могли помітити ще один пункт, який називається "Ефекти повідомлень (авто)". Найкраще, щоб вона залишалася активною.
Якщо ви її відключаєте, то при нагоді, коли вам хтось надсилає повідомлень з ефектом на кшталт кульок, салюту та інших, то вони просто не працюватимуть.
Я зараз користуюся айфонами 5S і я її активував, як тільки перейшов на iOS 10. Спочатку звичайно незвично, але потім нормально і працювати стало набагато комфортніше.
Apple використовує високопродуктивні комплектуючі, щоб досягти неперевершеної швидкодії iPhone та iPad. Однак програмні прикраси, анімація та інші необов'язкові фічі операційної системи негативно позначаються на швидкості роботи мобільних пристроїв. Насамперед це стосується не самих топових гаджетів.
Вирішити проблему можна, відключивши найбільш ресурсомісткі функції. Використовуючи стандартні налаштування операційної системи, можна підвищити продуктивність застарілих моделей iPhone та iPad.
Вимкнути пошук Spotlight
У 2009 році на голови користувачів iPhone посипалася небесна манна. Випущена третя версія iPhone OS обдарувала "яблофони" відразу сотнею нових функцій. Тоді вперше в смартфонах Apple з'явилися такі звичні зараз речі, як "вирізати-копіювати-вставити", MMS та універсальний механізм пошуку Spotlight.
Потрапити в останній можна, свайп зверху вниз на будь-якій сторінці домашнього екрану. Spotlight є не що інше, як глобальний пошук по всьому контенту: контактам, пошті, SMS, додаткам, музиці, календарю та його основні переваги – миттєвість та наочність результату. Проблема полягає в тому, що Spotlight безперервно індексує вміст мобільних пристроїв, щоб бути в курсі всіх змін в ОС. Вимкнення цієї функції дозволяє досягти підвищення швидкодії iPhone та iPad. Заходимо в Налаштування -> Основні -> Пошук Spotlight та знімаємо галочки з усіх пунктів.
Вимкнути фонове оновлення програм
Програми в iOS 8 можуть підвантажувати інформацію у фоновому режимі. Функція дуже корисна, але вона витрачає заряд батареї та додатково навантажує процесорні потужності. Перейдіть в меню Налаштування –> Основні –> Оновлення контенту та вимкніть використання сервісів у фоновому режимі. Функцію можна вимкнути повністю або обмежити її використання для деяких програм.
Вимкнути паралакс та ефект матового скла
Apple, напевно, витратила багато часу на створення паралакс-ефекту для шпалер, що створюють тривимірний ефект. Виглядає все красиво, але крім зайвого навантаження на процесор, ця можливість більше не годиться. Тому при налаштуванні шпалер в iOS 8 переводимо вимикач «Перспектива» у положення Вимк.
Особливий шик програмної оболонки Apple надає ефекту прозорості. Багато елементів iOS 8 виконані з ефектом об'ємності шарами над основним інтерфейсом. При цьому все, що нижче, стає розмитим, як за матовим склом. Цей ефект спостерігається в ОС повсюдно, включаючи Центр повідомлень, Пункт керування та верхню панель з годинником. Вимкнути напівпрозорість UI можна, зайшовши в меню Налаштування -> Основні -> Універсальний доступ -> Збільшення контрасту. За замовчуванням перемикач Зниження прозорості стоїть у положенні "Вимк". З відключеним ефектом працює візуально швидше, особливо на не найновіших моделях.
Вимкнути анімацію
Apple довго створювала красивий псевдо-тривимірний ефект для «плоського» інтерфейсу iOS: меню, іконки, оповіщення, які злегка змінюють свій вигляд при нахилі пристрою. Функція є досить незначною, проте споживає процесорний час. Тому йдемо за адресою Налаштування -> Основні -> Універсальний доступ та активуємо пункт "Зменшення руху".
Звільнити місце у пам'яті
На iPhone і iPad іноді варто влаштовувати «прибирання». Уявіть, що ви працюєте десь в офісі і через деякий час помічаєте, що ваш стіл поступово починає захаращуватися непотрібними документами та паперами. І що ви робите? Правильно, ви будете наводити чистоту та порядок, щоб звільнити більше місця та працювати ефективніше. Те саме відбувається і в iOS. Смартфони та планшети, як і настільні комп'ютери, також слід утримувати в чистоті та в порядку.
Знайти список встановлених програм, впорядкований за розміром даних, які вони займають, можна в налаштуваннях операційної системи. Для цього відкрийте розділ Основні та перейдіть до меню Статистика. iOS 8 покаже розмір завантажених програм та дозволить швидко звільнити пам'ять на пристрої.
Восени Apple викладе у публічний доступ мобільну операційну систему iOS 7 з революційним дизайном та величезним набором нових функцій та оновлених програм. Нововведень справді буде дуже багато, починаючи від повністю переробленого зовнішнього вигляду та закінчуючи унікальним підходом до юзабіліті. До останнього відноситься і так званий паралакс-ефект, який, як кажуть розробники, покликаний змінити спосіб того, як користувачі взаємодіють з мобільними пристроями.
У Apple так описують цю технологію:
«iOS 7 створює відчуття багатовимірності. Операційна система максимально використовує технології iPhone, iPad і iPod touch, щоб ще більше розширити можливості iOS. Чіткі та функціональні шари створюють глибину та впорядковують контент.
Напівпрозоре тло дає відчуття зв'язку з контекстом та місцем. А новий підхід до анімації та руху робить найпростіші завдання набагато цікавішими».
Коротко принцип технології такий: на плоскій скляній панелі телефону, що називається дисплеєм, користувач бачить тривимірний світ, який рухається у просторі разом із пристроєм.
Паралакс та перспектива
Принцип дії паралакс-ефекту заснований на тому, як мозок визначає розміри об'єкта, що знаходиться в полі зору людини. Що ближче предмет, то більше він здається. І навпаки, що далі від нас об'єкт, то менше він за розміром.
Це базове опис принципу сприйняття мозком перспективи, а паралакс є зміною видимого становища об'єкта щодо віддаленого тла залежно від становища спостерігача. Наприклад, коли ви знаходитесь всередині автомобіля або поїзда, що швидко мчить, об'єкти, що знаходяться ближче до вас, рухаються швидше, в той час, як об'єкти що знаходяться далі - повільніше. Хоча насправді швидкість у них однакова.
Поряд з іншими оптичними трюками, перспектива та паралакс відіграють важливу роль у сприйнятті світу, даючи можливість розуміти та впорядковувати візуальні сигнали, що реєструються очима.
Від ракет до телефонів
У iOS паралакс-ефект відтворюється програмним забезпеченням, саме – технологією, яка спочатку проектувалася для космонавтики.
Усередині будь-якого мобільного пристрою Apple знаходиться пристрій під назвою MEMS-гіроскоп. Він несе всередині крихітний механізм (менше за товщину людського волосся), здатний вібрувати на відомій частоті при подачі на нього електричного сигналу. Коли ви обертаєте смартфон (або планшет) у будь-якому з трьох напрямків, механізм усередині гіроскопа чинить опір зміні орієнтації згідно з Першим законом Ньютона.
Працюючи разом з іншими сенсорами, званими акселерометрами, гіроскоп дозволяє пристрою сприймати та визначати зміни свого положення у просторі з досить великою точністю.
Починаючи з оцінки початкової позиції пристрою, заснованої на тому, що більшість людей піднімають телефон на рівень своїх очей, щоб використовувати його, iOS визначає кут між поверхнею дисплея телефону та полем нашого зору, у той момент, коли вони переміщуються відносно один одного.
Математика, що реалізує ефект глибини, є досить простою. Все, що необхідно зробити програмному забезпеченню – вміти організувати вміст дисплея у різних площинах, а потім переміщувати ці площини відносно один одного. Переміщати, ґрунтуючись на їхньому положенні щодо очей користувача. Все це в результаті створює ефект глибини.
Якщо ви бачили запис конференції WWDC 2013, то могли помітити, що іконки в iOS 7 виглядають так, ніби вони знаходяться над фоновими шпалерами. І це виглядає дуже реалістично. Те саме стосується і вкладок у Safari.
Незважаючи на те, що всі особливості iOS 7 ще приховані від публіки, цілком імовірно, що Apple впровадить паралакс-ефект у всі складові нової ОС (цим же можна пояснити, чому в перше покоління iPad і iPhone 3GS, що не мають гіроскопів, не потрапили в список підтримуваних пристроїв).
Як працює паралакс в iOS 7:
Ідея використання паралаксу в дизайні мобільних програм не нова. Як і багато інших, вона прийшла до нас зі світу веб-дизайну, де спочатку стала дуже поширеним напрямком. Паралакс надає дизайну вражаючий ефект глибини і обсяг. На даний момент через деякі незручності, пов'язані зі специфікою розробки веб-додатків, мода на паралакс в оформленні сайтів стихла. Однак мобільні програми - це зовсім інша розмова. Паралакс в мобільному дизайні живе і поки не збирається нікуди йти, і навіть доданий за замовчуванням дизайн нової iOS 7 !
У цій статті ми розповімо вам про наш компонент DVParallaxView , і продемонструємо на прикладі його пристрою, як додати в додаток такий самий ефект паралакса, як і в home screen в iOS 7. І навіть краще.
Як влаштований паралакс?
Відвернемось ненадовго до суворого світу фізики, щоб краще зрозуміти і структурувати для себе механізм ефекту паралаксу. Це допоможе нам достовірно відтворити його на екрані телефону.
Отже, як працює паралакс? Суть його досить проста. Паралакс - це зміна положення одного і того ж об'єкта, що спостерігається з двох різних точок у просторі. Поспостерігати цей ефект у реальному світі можна будь-якої миті. Все, що вам знадобиться - це щось велике на роль фону (наприклад, стіна будинку) і якийсь об'єкт, що спостерігається на цьому тлі, що стоїть до вас ближче, ніж фон (наприклад ліхтарний стовп або дерево). Якщо ви йтимете вздовж стіни, спостерігаючи при цьому за ліхтарним стовпом, то вам здаватиметься, що ліхтарний стовп зміщується щодо стіни. Такий ефект і називається паралаксом - зсув стовпа, що здається, відносно стіни при переміщенні точки спостереження, тобто вас. При цьому чим ближче до вас буде стовп, тим вище здаватиметься швидкість його зміщення. І навпаки, якщо ви відійдете від стовпа на значну відстань і спробуєте пройтися вздовж стіни будинку знову - стовп практично не зміщуватиметься відносно стіни. Наші очі привчені оцінювати відстань до об'єктів за багатьма ознаками, і з них - це відносна швидкість зміщення об'єкта. Якщо ви спостерігаєте сцену, в якій об'єкти при вашому русі зміщуються з різною швидкістю – ваші очі відразу говорять вашому мозку, що об'єкти знаходяться на різній відстані від вас. У цьому й полягає привабливість використання ефекту паралаксу в дизайні - зімітувавши його, ви додасте плоскій сцені глибину.
Отже, у практичному сенсі для нас ефект паралаксу полягає в тому, що об'єкти віддалені від вас на різну відстань зміщуються щодо вас із різною швидкістю. Причому ця швидкість залежить від вашої відстані до об'єктів. Якщо ви близько – швидкість об'єкта велика, якщо далеко – навпаки.
Давайте виділимо основні складові цього ефекту. По-перше, для яскраво вираженого паралаксу бажано мати фон, в ідеалі нерухомий, або зміщення якого в порівнянні з рештою об'єктів буде знехтовано мало. По-друге, спостерігати паралакс можна лише за наявності об'єктів, що наповнюють простір між фоном та точкою спостереження. А найголовніше в цих об'єктах - різниця їхньої віддаленості від вас. Іншими словами об'єкти повинні становити своєрідну ієрархію, шикуючись на різній відстані від точки огляду до фону. І, нарешті, по-третє, паралакс неможливий без руху об'єктів щодо точки спостереження з різною швидкістю.
За наявності всіх трьох основних моментів – фону, об'єктів та відносного руху – ми спостерігатимемо паралакс.
Parallax scrolling
Тепер, коли ми знаємо, як влаштований паралакс, нам потрібно визначитися, як саме ми втілюватимемо його в коді.
Найбільш очевидним підходом до реалізації паралаксу є parallax scrolling. Грали у старі ігри-платформери? Якщо так - то швидше за все зможете згадати, що поки персонаж біг із лівого кінця рівня в правий, об'єкти на задньому плані зміщувалися у зворотному напрямку з різною швидкістю залежно від передбачуваної дальності переднього плану. Ось посилання на вікіпедію, щоб ви точно згадали, про що йдеться.
Parallax scrolling в іграх був влаштований таким чином, що сцена, яку ви спостерігаєте на екрані, складається з кількох шарів, де розташовані об'єкти. Залежно від передбачуваної відстані шару від екрану (шар «ліс» ближче до вас, ніж шар «хмари», які ближче до вас, ніж шар «сонце») шари зміщуються з тією чи іншою швидкістю. Це надає те, що відбувається на екрані певну глибину, змушуючи плоску картинку виглядати об'ємніше. Не можна не визнати - такий підхід досить добре співвідноситься з тим, що ми дізналися про паралакс. Справді, можна розбити простір між вами і фоном на шари, що містять об'єкти, що знаходяться в цьому просторі.
Логічно припустити, що реалізація ефекту паралакса повинна бути інкапсульована в якийсь компонент-контейнер, що містить інші компоненти і має якусь ієрархію видів, положення яких буде зміщуватися на відстань, залежне від положення в ієрархії. Давайте замислимося, а чи немає елемента в UIKit, який містить у собі подібну можливість? Звісно є! Будь-який UIView містить ієрархію інших UIView, поміщених у нього методом addSubview:.
Тут ми підходимо до основної ідеї, покладеної в основу нашого компонента DVParallaxView. Ідея полягає в тому, щоб компонент був нащадком UIView, що інкапсулює в собі ефект паралаксу. Сам ефект реалізовуватиметься передачею нового значення властивості contentOffset, що має тип CGPoint. Таким чином, DVParallaxView за своїм змістом є схожим на UIScrollView. При зміні значення contentOffset ми змінюватимемо розташування кожного view, що знаходиться в ієрархії DVParallaxView. Величина усунення буде у зворотній залежності від віддаленості елемента від «верху» ієрархії. Оскільки елементи в масиві subviews зберігаються починаючи з нижнього в ієрархії (тобто з далекого від екрану), то зміщення перебуватиме у прямої залежності від індексу оброблюваного елемента при прямому проході по масиву. У такий спосіб ми інтерпретуємо наявність «відстань» між елементами, як у реальному світі. Для контролю величини відстані ми виведемо в зовнішній інтерфейс властивість, що є множником, на який буде множитися індекс елемента в масиві. Задаючи його, ви завжди зможете підлаштувати величину паралаксу за своїм бажанням.
Що ж, запропонована модель виглядає життєздатною, всі основні моменти продумані. Тут ми можемо поставити крапку в знайомстві з концептуальним пристроєм паралакса в DVParallaxView і почати розповідь про його практичну реалізацію.
Створюємо DVParallaxView
У цій та наступній главах ми докладно розглянемо створення компонента DVParallaxView.
Перед тим, як приступити безпосередньо до реалізації, давайте визначимося ще з кількома властивостями класу DVParallaxView.
По-перше, паралакс найкраще виглядає і найчастіше робиться на тлі якоїсь гарної картинки (пам'ятаєте, ми визначилися, що однією з обов'язкових складових паралакса є фон?). Тому в нашому класі необхідно передбачити можливість встановити фонове зображення. У самому корені ієрархії видів завжди буде приватний елемент класу UIImageView, який ми назвемо backgroundImageView. Цей елемент буде виконувати роль фону в DVParallaxView. Його розташування в корені ієрархії буде гарантувати нам найменше відносне усунення, як і належить фоновому, найдальшому об'єкту сцени. Для передачі фонового зображення у публічному інтерфейсі компонента буде спеціальна властивість – backgroundImage класу UIImage.
По-друге, ефект паралаксу в iOS 7 складається не тільки зі зміщення заднього фону. Якщо придивитися краще, то можна помітити одну цікаву деталь: іконки зміщуються в сторону, протилежну зміщення фону. Зроблено це для посилення ефекту паралаксу і контрасту між фоном, що зміщується, і іконками додатків, які на перший погляд нерухомі. Оскільки ми поставили за мету наздогнати і перегнати паралакс в iOS 7, ми просто зобов'язані додати таку можливість в наш компонент. Для цього ми заведемо в публічному інтерфейсі властивість frontView, в яку передаватимемо той вид, який ми хочемо зміщувати в протилежну від паралаксу сторону.
Отже, всі приготування зроблено - теорія вивчена, пристрій компонента продуманий. Можна приступати до створення DVParallaxView. Чи готові?
Створіть single-view проект у XCode, задайте йому ім'я та інші потрібні атрибути. Всередині проекту створіть клас DVParallaxView, який є нащадком класу UIView. Створіть заголовний файл DVParallaxView та заповніть його таким чином.
#import
Всі властивості класу, які ви тут бачите, ми вже обговорювали вище, тому їх набір не повинен вас нічим здивувати. Дві властивості, які не обговорювалися раніше в явному вигляді - parallaxDistanceFactor і parallaxFrontFactor - це ті множники, які служать для контролю величини зміщення відповідно елементів ієрархії та фронтального вигляду.
У файлі реалізації класу створіть приватний інтерфейс. У нього необхідно помістити властивість backgroundImageView, оскільки класу нема чого надавати йому публічний доступ.
@interface DVParallaxView() @property (nonatomic, strong) UIImageView *backgroundImageView; @end
Нехай об'єкт класу створюється викликом методу initWithFrame:. У його виклику необхідно виконати всю початкову конфігурацію.
- (id)initWithFrame:(CGRect)frame ( self = ; if (self) ( self.parallaxDistanceFactor = 2.f; self.parallaxFrontFactor = 20.f; self.backgroundColor = ; ; UIPanGestureRecognizer *panRecognizer = :@selector(panHandler:)]; ; ) return self; )
Ми задали такі значення множників, виходячи зі своїх особистих уподобань. Ви можете вибрати інші значення, якщо паралакс здасться вам занадто сильним або, навпаки, занадто слабким. Зауважте, що заднє тло від початку знаходиться в ієрархії видів, навіть якщо зображення для нього не задано.
Якщо ви вже запитували «Як же ми ініціюватимемо зміщення видів у компоненті?», то відповідь на нього ви вже можете побачити в коді ініціалізатора — UIPanGestureRecognizer. Так, ми пам'ятаємо, що iOS 7 паралакс викликався нахилом телефону. Всьому свій час.
У UIPanGestureRecognizer було передано селектор методу panHandler:. Давайте одразу напишемо цей метод, щоб не забути зробити це згодом.
#pragma mark - Gesture handler - (void)panHandler:(UIPanGestureRecognizer *)pan ( CGPoint translation = ; ; ; )
Нічого незвичайного. Зчитуємо переміщення торкання і таку ж величину зміщення задаємо нашому DVParallaxView. Не забуваємо в кінці обнулити отримане усунення.
Тепер найцікавіше. Поки що зміни contentOffset нічого не відбувається, давайте це виправимо. Створіть метод сеттера setContentOffset, як показано нижче.
-(void)setContentOffset:(CGPoint)contentOffset ( BOOL backgroundReachedEdgeX = NO; BOOL backgroundReachedEdgeY = NO; double contentDivider; //1 if (self.backgroundImageView) ( contentDivider = self.subviews.count*Gelf. (self.backgroundImageView.center.x + (contentOffset.x - _contentOffset.x)/contentDivider, self.backgroundImageView.center.y - (contentOffset.y - _contentOffset.y)/contentDivider);if ((newCenter.x - self .backgroundImageView.frame.size.width/2.f) > 0.f || (newCenter.x + self.backgroundImageView.frame.size.width/2.f)< self.bounds.size.width) {
newCenter.x = self.backgroundImageView.center.x;
backgroundReachedEdgeX = YES;
}
if ((newCenter.y - self.backgroundImageView.frame.size.height/2.f) >0.f || (newCenter.y + self.backgroundImageView.frame.size.height/2.f)< self.bounds.size.height) {
newCenter.y = self.backgroundImageView.center.y;
backgroundReachedEdgeY = YES;
}
self.backgroundImageView.center = newCenter;
}
//
//2
for (int i = 1; i Отже, розберемося у методі докладніше. Змінні backgroundReachedEdgeX та backgroundReachedEdgeY служать для сигналу про те, що зміщуючи заднє тло ми досягли краю картинки. Якщо заднє тло задане, має сенс перевіряти, чи ми вийшли межі зображення backgroundImage. Адже нам зовсім не хочеться, щоб користувачі споглядали обрив зображення, це виглядає неприродно. Тому ми вважали за потрібне обмежити область паралаксу розмірами зображення заднього фону, якщо воно є. Таким чином, блок //1 містить у собі перевірку на вихід за межі зображення. Блок //2 - це прохід за всіма елементами ієрархії видів із розрахунком величин усунення їх центрів залежно від становища в ієрархії. Також, якщо по осях X або Y ми знаходимося у краю картинки заднього фону, то зміщення цих осей не відбудеться. Основна логіка зміщення створена, залишилося небагато – задати методи доступу до основних властивостей, а також перевантажити метод addSubview. #pragma mark - Getters -(UIImageView *)backgroundImageView ( if (!_backgroundImageView) ( _backgroundImageView = [ init]; _backgroundImageView.contentMode = UIViewContentModeCenter; _backgroundImageView.center = CGPointMake(CGRectGetMidX(self.sel) ; ) return _backgroundImageView; ) #pragma mark - Setters -(void)setParallaxDistanceFactor:(float)parallaxDistanceFactor ( _parallaxDistanceFactor = MAX(0.f, parallaxDistanceFactor); ) -(void)setParallaxFront .f, parallaxFrontFactor); ) -(void)setBackgroundImage:(UIImage *)backgroundImage ( _backgroundImage = backgroundImage; ; CGPoint origin = CGPointMake(CGRectGetMidX(self.bounds) - backgroundImage.size.width/2.f, CGRectG. bounds) - backgroundImage.size.height/2.f), self.backgroundImageView.frame = (CGRect)(.origin = origin, .size = backgroundImage.size); _frontView = frontView; ; ) #pragma mark - Overriding -(void)addSubview:(UIView *)view ( if (self.frontView) ; else ; ) Давайте по порядку. З геттером для backgroundImageView все зрозуміло - звичайне lazy instantiation, створюємо об'єкт лише за потреби. При заданні значень ParallaxDistanceFactor та ParallaxFrontFactor автоматично перевіриться на негативні значення. Сеттер для backgroundImage визначає зображення заднього фону в backgroundImageView і одночасно центрує його положення на екрані. Сеттер frontView одночасно додає frontView в ієрархію підвидів, так що немає сенсу додавати його вручну. Нарешті, перевантажений метод addSubview: працює в звичайному режимі, якщо в DVParallaxView не визначено frontView, але якщо він визначений, то будь-який вид буде на позицію нижче за нього в ієрархії. Адже мається на увазі, що frontView завжди попереду. Поки що зупинимося на цьому та перейдемо на головний viewController нашого тестового проекту. Настав час підключити наш новий компонент та перевірити його у справі. Оскільки ми хочемо бути схожими на новий home screen в iOS 7, то у тестовому проекті ми спробуємо відтворити саме його. Для цього нам потрібні картинка заднього фону (бажано із зображенням космосу) та іконки додатків. Більше того, оскільки наш компонент підтримує й інші об'єкти між фоном та переднім планом, ми додамо їх теж. Якщо фоном є космос, то ми розвинемо космічну тему і трохи оживимо пустельний космічний простір планетою Земля та її супутником – Місяцем. Усі необхідні зображення ви можете знайти в інтернеті або забрати з нашого тестового проекту на github. У iOS 7 іконки програм є переднім планом, тому в DVParallaxView ми повинні розмістити їх у frontView. Для цього ми створимо UIView, до якого помістимо всі іконки. Щоб не займатися вручну створенням та розміщенням всіх цих компонентів, створіть контейнер та іконки у storyboard'і, потім підключивши їх до контролера. Ось так виглядає передній вигляд у нашому тестовому додатку. Прив'яжіть UIView-контейнер як IBOutlet до контролера та назвіть його frontView. Давайте приступимо до створення екземпляра DVParallaxView. Створіть властивість parallaxView у приватному інтерфейсі вашого контролера. Для цього властивості створіть геттер. -(DVParallaxView *)parallaxView ( if (!_parallaxView) ( _parallaxView = [ initWithFrame:self.view.bounds]; [_parallaxView setBackgroundImage:]; UIImageView *earth = [ initWithImage:]; earth.frame = (CGRect) (.origin) = CGPointMake(CGRectGetMidX(self.view.bounds) - earth.image.size.width/2.f, CGRectGetMidY(self.view.bounds) - earth.image.size.height/2.f), .size = earth .frame.size);[_parallaxView addSubview:earth];UIImageView *moon=[initWithImage:];moon.frame=(CGRect) self.view.bounds) + 30.f), .size = moon.frame.size);[_parallaxView addSubview:moon];[_parallaxView setFrontView:self.frontView]; У коді видно, як після створення екземпляра класу DVParallaxView йому задається фон «galaxy2», потім до ієрархії видів додаються зображення Землі та Місяця. Потім як передній план задається властивість frontView. Тепер все, що залишається, це додати наш компонент в ієрархію видів контролера. Додайте цей рядок у метод viewDidLoad: ;
Паралакс готовий, можна запускати проект. Як бачите створений нами компонент вже цьому етапі свого розвитку дає цілком достовірний ефект паралаксу. Залишилася лише одна деталь. Поки що усунення елементів виконується дотиками. Час це виправити. Настав час підключити до DVParallaxView гіроскоп. Якщо ви читали нашу статтю, то вже маєте всі необхідні навички для використання гіроскопа у цьому проекті, а також знаєте, що для підключення гіроскопа необхідно додати до проекту фреймворк Core Motion. Але як саме ми використовуватимемо дані з датчика? У проекті ми вибрали rotationRate для індикації нахилів телефону. Тобто contentOffset змінюватиметься за наявності ненульової кутової швидкості повороту. Підключіть фреймворк до файлу реалізації класу DVParallaxView. #import Потім створіть властивості motionManager та displayLink у приватному інтерфейсі класу. @property (nonatomic, strong) CMMotionManager *motionManager; @property (nonatomic, strong) CADisplayLink *displayLink; CMMotionManager – це основний клас CoreMotion, що використовується для доступу до даних із датчиків. CADisplayLink - таймер, який працює з частотою оновлення екрана, який викликатиме метод оновлення даних з гіроскопа. Тепер додамо методи доступу нових властивостей. -(CADisplayLink *)displayLink ( if (!_displayLink) ( _displayLink = ; ) return _displayLink; ) -(CMMotionManager *)motionManager ( if (!_motionManager) ( _motionManager = [ init]; _motionManager.deviceMotionUpdateInterval = 0.03f; ) ;) Очевидно, що розробнику, який використовує компонент DVParallaxView, зовсім необов'язково завжди потрібно використовувати гіроскоп. Можливо, будуть інші умови та дії для зміни значення contentOffset. Тому компонент повинен надавати можливість вибору, чи потрібно керувати паралаксом через гіроскоп. Для надання цього вибору ми виведемо в публічний інтерфейс властивість gyroscopeControl, який матиме тип BOOL. Якщо вона встановлена в YES, компонент починає зчитувати показання з гіроскопа та зміщувати елементи ієрархії при нахилі пристрою. Якщо воно встановлено в NO, компонент припиняє реагувати на зміни кутової швидкості пристрою. При цьому властивості motionManager і displayLink повинні припиняти свою діяльність, щоб не забирати даремно ресурси процесора. Як ми й домовилися, створіть у громадському інтерфейсі якість gyroscopeControl. @property (nonatomic, strong) BOOL gyroscopeControl; Потім створіть для нього сетер. -(void)setGyroscopeControl:(BOOL)gyroscopeControl ( if (_gyroscopeControl == gyroscopeControl) return; _gyroscopeControl = gyroscopeControl; if (gyroscopeControl) ( ; forMode:NSDefaultRunLoopMode]; ) else ( ; ) ; Зауважте, що при установці властивості YES motionManager починає отримувати показання з deviceMotion, а не з gyroscope. Причини такого вибору докладно описані у статті. При установці його в NO, отримання даних зупиняється, displayLink видаляється з усіх потоків викликом методу invalidate, а сам motionManager встановлюється в nil. Тепер нам залишилося лише написати метод перетворення даних з гіроскопа в дані для contentOffset, а також реалізувати метод displayLinkHandler, який викликається у таймері displayLink. #pragma mark - Gyroscope to offset - (CGPoint)contentOffsetWithRotationRate:(CMRotationRate)rotationRate ( double xOffset = (fabs(rotationRate.y) > DV_ROTATION_THRESHOLD)?rotationRate.y*DV_ROTATION_MULTIPLIER x) > DV_ROTATION_THRESHOLD)?rotationRate.x*DV_ROTATION_MULTIPLIER:0.f; ) Не забудьте на початку файлу реалізації описати дві define-константи, які ми використовували в роботі методу перетворення. #define DV_ROTATION_THRESHOLD 0.1f #define DV_ROTATION_MULTIPLIER 2.5f У класі контролера під час створення об'єкта DVParallaxView задайте його властивість gyroscopeControl в YES. Отже, гіроскоп підключений, дані з нього повинні тепер коректно перетворюватися на зміщення. Тепер можна скомпілювати проект та запустити його на пристрої. Здорово виглядає, чи не так? Зауважимо, що гіроскоп працюватиме лише на реальному пристрої. Якщо ви читаєте цей абзац, значить ви щойно створили окремий компонент з ефектом паралаксу, як у iOS 7. І навіть більше – ефект у компоненті DVParallaxView вийшов повнішим, оскільки зсуває не лише фон та передній план, але й усю ієрархію елементів між ними. Як бачите, його пристрій виявився зовсім не складним. DVParallaxView був створений нами для вільного користування та викладений у нашому репозиторії. Користуйтеся, покращуйте, ми будемо раді вашим пропозиціям!
Підключаємо Core Motion
Висновок
