четвер, 13 червня 2013 р.

Добавляем эффект Blur, как в iOS 7

Взглянув на iOS 7, меня удивило количество эффекта blur на всевозможных панельках этой чудо-ОС. Очевидно, данный эффект входит в тренд, а это значит, что нужно использовать его и в своих приложениях.

Для начала расскажу, как достигается этот эффект и наносится на «панельку».

Возьмем два представления (UIView). На одном находится некая картинка, а второе, которое мы добавили поверх, просто хотим сделать прозрачным с эффектом блюра.

Многие думают, что для достижения эффекта блюра можно просто дать свойство второму представлению, ничего не зная о картинке из первого — это неверно. Вторая панелька должна содержать уже «заблюренную» картинку. Для этого нужно сначала взять картинку из первого представления, добавить на нее эффект блюра (размытие), а затем нанести полученную картинку на второе представление.

 

Теперь попробуем кодом преобразовать обычное изображение в изображение с эффектом блюра. Для этого мы будем использовать размытие по Гауссу.

Предлагаю 2 способа достижения результата для разных минимально поддерживаемых версий iOS:

iOS 7 и выше (Пример Apple)

Проект можно скачать отсюда

iOS 6 и выше (Мой пример)

Код доступен на GitHub

Категория для UIImage. Добавление эффекта блюра iOS 7 и оттенка для использования в iOS 6 и выше

 

На весь эффект блюра и наложения оттенка на изображение скриншота с iPhone 5 уходит в среднем 0.044 секунды.

Немає коментарів:

Дописати коментар

HyperComments for Blogger

comments powered by HyperComments