Анимация круговой маски UIImageView в iOS

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

enter image description here

Я предполагаю создание подкласса uiview, чтобы передать изображение, радиус и центральную точку. А затем (?) Создать маску, а затем оживить ее взад и вперед?

Может ли кто-нибудь указать мне в правильном направлении? Круг можно размещать в любом месте любого размера, но отображаемое изображение всегда полноэкранное.

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

Спасибо за направление,

-e

Ответы

Ответ 1

Одной из возможностей может быть рисование маски с помощью CAShapeLayer. Причина в том, что путь CAShapeLayer является анимированным.

Ответ 2

У Мэтта есть правильная идея.

Что вы хотите сделать, это использовать Core Animation и CAShapeLayer. Слои имеют необязательное свойство маски, которое контролирует часть видимого слоя. Вы можете добавить CAShapeLayer в качестве маски другого слоя.

Если вы установили CGPath в круг на вашем слое формы, используйте CABasicAnimation для анимации по другому пути, который представляет собой более крупный круг, Core Animation будет анимировать изменение.

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

У меня есть проект github, который включает использование анимации пути для анимации маски на уровне изображения. Проект называется "iOS CAAnimation group demo", и вы можете скачать его по этой ссылке: https://github.com/DuncanMC/iOS-CAAnimation-group-demo. Основной частью проекта является использование анимационных групп Core Animation для применения последовательности анимаций, но также включает анимацию маски.

В этом проекте анимация маски создает переход на "протирание часов":

Clock wipe animation

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

У меня есть видео Youtube, которое показывает различные переходы, которые я создал. Переход "Iris Circle" примерно на 55 секунд в видео очень близок к тому, что вы делаете:

Видео переходов

Ответ 3

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

func setupMapMask() {
    let largeCirclePath = UIBezierPath(ovalInRect: mapView.bounds).CGPath

    let mask = CAShapeLayer()
    mask.path = largeCirclePath
    mask.backgroundColor = UIColor.blackColor().CGColor

    mapView.layer.mask = mask

    let smallCirclePath = UIBezierPath(ovalInRect: CGRectInset(mapView.bounds, 5.0, 5.0)).CGPath

    let anim = CABasicAnimation(keyPath: "path")
    anim.toValue = smallCirclePath
    anim.duration = 0.5
    anim.repeatCount = Float.infinity
    anim.autoreverses = true
    mask.addAnimation(anim, forKey: "path")
}