Отображение анимированного файла SVG в SwiftUI

Question

Я пытаюсь вставить анимированные изображения .svg в проект WatchKit SwiftUI. К сожалению, я не смог найти ни способа конвертировать svg в png «кадры», ни способа непосредственного использования файлов svg в качестве анимации. Есть ли способ использовать анимированные изображения .svg в SwiftUI?

Answer 1

Я не думаю, что .svg изначально поддерживается. Возможные обходные пути:

• Веб-представление должно быть в состоянии загрузить его.
• Преобразовать в .pdf / .png / .jpeg
• https://github.com/SVGKit/SVGKit

Не уверен, что существует очень простое решение для WatchKit.

Однако WatchKit имеет WKInterfaceImage.animatedImage(with:duration:), который позволяет ImageView анимировать через набор изображений. вам все еще нужно конвертировать кадры SVG в PDF / PNG / JPEG.

Это может быть хорошей отправной точкой для вас: https://developer.apple.com/documentation/watchkit/wkinterfaceimage#1652345

Answer 2

Я нашел решение моей дилеммы, однако оно далеко от оптимального:

1. Создайте HTML страницу для отображения анимированных SVG

<object data="file.svg" type="image/svg+xml"></object>

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

2. Создание последовательности png

С помощью инструмента ScreenToGif (screentogif.com) я записал файл html внутри chrome с максимальным увеличением. Инструмент позволяет экспортировать в различные форматы, один из которых представляет собой последовательность независимых «кадров» в виде отдельных файлов PNG.

3. XCode: создать таймер и массив изображений

var animatedIcons: [UIImage]! = (0...9).map { UIImage(named: "imageName\($0)")! }
@State var index: Int = 0
let timer = Timer.publish(every: 0.2, on: .main, in: .default).autoconnect()

4. Позвольте изображению получать обновления таймера

Image(uiImage: self.animatedIcons[index])
   .resizable()
   .frame(width: 50, height: 50, alignment: .center)
   .onReceive(timer) { (_) in
        self.index = self.index + 1
        if self.index > self.animatedrIcons.count - 1 {
                self.index = 0
        }