IOS 7.1 Слайд для разблокировки текстовой анимации
Я не уверен, что это было задано раньше, но мне трудно найти его. Возможно, я не использую правильные условия поиска, поэтому, если ответ уже существует, если кто-то может указать мне в правильном направлении, это было бы очень полезно!
Я только заметил, что анимация мерцания в тексте блокировки экрана "слайд для разблокировки" изменилась с обновлением iOS 7.1. В центре внимания теперь есть овулярная/алмазная форма, которая каскадирует через буквы, не появляясь на вид сзади.
![iOS 7.1 Lock Screen Text Animation]()
В прошлом я реплицировал этот тип функции, последовательно меняя цвет отдельных букв, но для этого анимация проходит через середину букв. Не влияя на фон.
Как я могу воспроизвести это?
Ответы
Ответ 1
Вы можете анимировать текст ярлыка и использовать пользовательский слайдер для него, надеюсь, вам это поможет:
CALayer *maskLayer = [CALayer layer];
// Mask image ends with 0.15 opacity on both sides. Set the background color of the layer
// to the same value so the layer can extend the mask image.
maskLayer.backgroundColor = [[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.15f] CGColor];
maskLayer.contents = (id)[[UIImage imageNamed:@"Mask.png"] CGImage];
// Center the mask image on twice the width of the text layer, so it starts to the left
// of the text layer and moves to its right when we translate it by width.
maskLayer.contentsGravity = kCAGravityCenter;
maskLayer.frame = CGRectMake(myLabel.frame.size.width * -1, 0.0f, myLabel.frame.size.width * 2, myLabel.frame.size.height);
// Animate the mask layer horizontal position
CABasicAnimation *maskAnim = [CABasicAnimation animationWithKeyPath:@"position.x"];
maskAnim.byValue = [NSNumber numberWithFloat:myLabel.frame.size.width];
maskAnim.repeatCount = 1e100f;
maskAnim.duration = 1.5f;
[maskLayer addAnimation:maskAnim forKey:@"slideAnim"];
myLabel.layer.mask = maskLayer;
Ответ 2
Вы можете использовать свойство mask
CALayer для создания вырезания содержимого другого слоя.
Установите маску, чтобы содержать текст (возможно, CATextLayer может работать здесь). Это то, что Shimmer говорит, что он использует.
Ответ 3
Сделать цвет переднего плана вашего ярлыка UIColor, инициированный с помощью
+colorWithPatternImage
или
-initWithPatternImage
используя анимированное изображение, и установите цвет фона ярлыка прозрачным. Я не пробовал это, но я не понимаю, почему это не сработает.
Ответ 4
Лучший способ сделать это - это многослойный объект.
-
Вверх: UILabel с непрозрачным фоном и четким текстом
- Открытый текст отображается в drawRect: func через сложный процесс маскировки
-
Средний: рабочий просмотр, который выполняет повторяющуюся анимацию, перемещающую изображение за верхней меткой
-
Внизу: UIView, в который вы добавляете средний и верхний объекты в этом порядке. Может быть любой цвет, который вы хотите, чтобы текст был
Пример можно увидеть здесь
https://github.com/jhurray/AnimatedLabelExample
Ответ 5
Самый эффективный способ, который я нашел, чтобы воссоздать мерцающий текстовый эффект, - использовать Shimmer Cocoapod, созданный Facebook. Ниже приведен пример изображения из репозитория Shimmer GitHub, который находится по следующему URL-адресу: https://github.com/facebook/Shimmer
Пример мерцания
Есть полные инструкции по установке и использованию Shimmer на репо, но суть в том, что после установки Cocoapod вы добавите специальный подъярус или слой, в который будет попадать содержимое, которое вы хотите иметь мерцание/мерцание, затем установите эффект для начала.
Ответ 6
Попробуйте иметь полупрозрачный передний план с прозрачными вырезами для букв. "Мерцание" можно перемещать позади вырезов.
Ответ 7
Сделайте слой сверху, который имеет слои выреза с анимированным PNG или что-то в качестве фона.
Под этим слоем есть другой слой с ровной обратной прозрачностью (буквы непрозрачны, а пробел между буквами прозрачен).
Таким образом, пользователь видит через буквы анимацию, а между буквами - все буквы, над которыми заканчиваются буквы.
Просто убедитесь, что у вас есть код для сохранения слоев в правильном порядке.
Ответ 8
Я думаю, что это полупрозрачный вид, но это особый вид, в котором drawrect переопределяется, чтобы покрасить каждый пиксель букв с тем же цветом (но сильнее, чтобы сделать его видимым) пикселя в представлении под ним,
Представьте себе это, как увеличительное представление. он отображает увеличенную версию просмотра под ним.