움직이는 GIF 튜토리얼을 만들어 보았습니다.

소개

어드벤트 캘린더 3일차 은 니가타현 도카마치시에서 개발한 어플리케이션 거리 길드 에 대한 것입니다.
개발시 여러가지 힘든 일이 있었는데, 그 중 하나의 움직이는 튜토리얼을 만들었을 때에 대해 씁니다.

※어떤 앱인가는 이 동영상 를 확인해 주세요.

움직이는 자습서

아래와 같은 자습서를 만들었습니다.

GIF를 iOS 앱에서 재생

GIF를 재생하고 있지만 iOS 앱에서 재생하는 것은 상당히 귀찮습니다.
왜냐하면 GIF를 쉽게 재생하는 방법이 Xcode에서는 제공되지 않기 때문입니다.
따라서 아래와 같은 방법으로 GIF를 세분화된 이미지(UIImage)로 변환하여 그것을 파라파라 만화처럼 재생하고 있습니다.

Swift

guard let gifFile = Bundle.main.path(forResource: fileName, ofType: "gif"),
     let data = NSData(contentsOfFile: gifFile),
     let cgImageSource = CGImageSourceCreateWithData(data, nil) else {
         return []
}

return (0...CGImageSourceGetCount(cgImageSource)).flatMap{ CGImageSourceCreateImageAtIndex(cgImageSource, $0, nil) }.map{ UIImage(cgImage: $0) }

고집한 점

보기 끝난 느낌을 내기 위해 페이지를 스크롤하면 지금 보고 있던 GIF는 도중에도 마지막 이미지가 되도록 했습니다.
새로 열리는 페이지는 항상 처음부터 재생되도록 하고 있습니다.
또 GIF를 세밀한 화상으로 변환하는 처리는 조금 무겁기 때문에, 필요 최소한의 회수로 처리하고 있습니다.
예를 들면 아래와 같이 이미지의 처음과 끝, 매수를 캐쉬해 변환을 몇번이나 하지 않아도 좋게 하고 있습니다.
UIImageView에서 가져 가면 좋다고 말할 수 있지만 다음 항목의 어려움을 해결하기 위해 할 수 없었습니다.

Swift

tutorialItems.enumerated().forEach { i, tutorialItem in
    var images = tutorialItem.images
    let tutorialImageInformation = TutorialImageInformation(first: images.first, last: images.last, count: images.count)

    ....

}

어려움

릴리즈 후에 발각했는데, 낡은 디바이스(iPhone 4s, iPhone 5s, 초기의 iPad)라고 떨어지는 것을 알았습니다. .
원인은 UIImageView에 미세한 이미지가 있었기 때문입니다.
거기서 재생하고 있는 GIF의 화상 이외는 가지지 않게 했습니다.
간단하게 아래와 같은 느낌으로 이미지를 해방하고 있습니다.

Swift

imageView.animationImages = []

미래의 도전

이번은 이것으로 좋았습니다만, 아마 긴 시간의 GIF라고 떨어질지도 모릅니다. .

마지막으로

이렇게 했던 튜토리얼을 GitHub 에서 확인할 수 있습니다.
그렇다면 봐주세요. 김에 스타를 붙이면 기쁩니다 w

여담

니가타현 도카마치시는 인연도 연고도 없는 곳이었습니다만, 여러분에게 따뜻하게 해 주었습니다.
솔직히 도시에서만 살고 싶다고 생각했습니다만, 지금은 시골의 매력에 사로잡혀 있습니다 w
아주 좋은 곳이기 때문에, 만약 좋으면 여러분도 가 봐 주세요. 개인적으로는 여름을 추천합니다.