Ios 如何设置缝合图像的动画？

我不知道如何创建这个动画。你是否会将1

jpg

文件平均分成3部分并制作动画？或者您是否需要制作多份

jpg

并对其进行处理

任何帮助都会很棒

更新 由于您需要交叉淡入淡出，因此将图像分割为单独的cel图像可能是最简单的方法：

import UIKit
import PlaygroundSupport

extension UIImage {
    func subImage(inUnitRect unitRect: CGRect) -> UIImage? {
        guard imageOrientation == .up, let cgImage = self.cgImage else { return nil }
        let cgImageWidth = CGFloat(cgImage.width)
        let cgImageHeight = CGFloat(cgImage.height)
        let scaledRect = CGRect(x: unitRect.origin.x * cgImageWidth, y: unitRect.origin.y * cgImageHeight, width: unitRect.size.width * cgImageWidth, height: unitRect.size.height * cgImageHeight)
        guard let croppedCgImage = cgImage.cropping(to: scaledRect) else { return nil }
        return UIImage(cgImage: croppedCgImage, scale: scale, orientation: .up)
    }
}

let image = #imageLiteral(resourceName: "image.png")

let celCount: CGFloat = 3
let cels = stride(from: 0, to: celCount, by: 1).map({ (i) -> UIImage in
    image.subImage(inUnitRect: CGRect(x: i / celCount, y: 0, width: 1/3, height: 1))!
})

然后，我们可以使用关键帧动画交叉淡入层内容：

let imageView = UIImageView(image: cels[0])

PlaygroundPage.current.liveView = imageView

let animation = CAKeyframeAnimation(keyPath: "contents")
var values = [CGImage]()
var keyTimes = [Double]()
for (i, cel) in cels.enumerated() {
    keyTimes.append(Double(i) / Double(cels.count))
    values.append(cel.cgImage!)
    // The 0.9 means 90% of the time will be spent *outside* of crossfade.
    keyTimes.append((Double(i) + 0.9) / Double(cels.count))
    values.append(cel.cgImage!)
}
values.append(cels[0].cgImage!)
keyTimes.append(1.0)
animation.keyTimes = keyTimes.map({ NSNumber(value: $0) })
animation.values = values
animation.repeatCount = .infinity
animation.duration = 5
imageView.layer.add(animation, forKey: animation.keyPath)

结果:

起初的 有多种方法可以做到这一点。一种是通过设置图像视图的层或设置其动画

在您的图像中，有三个cel，每个cel正好占据图像的1/3。

contentsRect

位于单位坐标空间中，这使得计算变得容易。cel

i

的

contentsRect

是

CGRect（x:i/3，y:0，宽度：1/3，高度：0）

您需要在cel之间进行离散跳跃，而不是平滑的滑动过渡，因此需要使用带有

kCAAnimationDiscrete

calculationMode

的关键帧动画

import UIKit
import PlaygroundSupport

let image = #imageLiteral(resourceName: "image.png")
let celSize = CGSize(width: image.size.width / 3, height: image.size.height)
let imageView = UIImageView()
imageView.frame = CGRect(origin: .zero, size: celSize)
imageView.image = image

PlaygroundPage.current.liveView = imageView

let animation = CAKeyframeAnimation(keyPath: "contentsRect")
animation.duration = 1.5
animation.calculationMode = kCAAnimationDiscrete
animation.repeatCount = .infinity
animation.values = [
    CGRect(x: 0, y: 0, width: 1/3.0, height: 1),
    CGRect(x: 1/3.0, y: 0, width: 1/3.0, height: 1),
    CGRect(x: 2/3.0, y: 0, width: 1/3.0, height: 1)
] as [CGRect]
imageView.layer.add(animation, forKey: animation.keyPath!)

结果:

---

当你说“有图像移动”时，你指的是空间位移（画面在屏幕上移动）还是从一个图像到下一个图像的变化（从卡通图像到照片）？如果你能正确分割图像，你可以使用@robmayoff抱歉，这是我亲手录制的视频。我的意思是

从一个图像到下一个图像的变化（从卡通图像到照片）

@Fonix你认为这仅仅是：1）将缝合的图像分割成三块2）使用

动画图像在它们之间制作动画，如果缝合的图像具有可变的帧数和/或不同的大小，我不确定您如何知道在哪里分割图像。如果图像总是保持不变，那就好了。谢谢！哇，这比从1
jpg
创建3
jpg
并在它们之间设置动画要简单得多。我认为唯一不一样的是过渡-有没有办法使过渡相同（似乎有一个带褪色的白色闪光）？这里的问题更容易理解，因为我不确定如何使用您的代码添加此选项。您可以通过在图像视图后面放置纯白视图，并使用另一个关键帧动画设置图像视图不透明度的动画来执行flash。不透明动画的代码比我的答案要多一些，但不是火箭科学。事实上，我不认为有一点白色的闪光。我认为凯尔特人之间只是一个交叉淡入。嗯，好吧，如果是交叉淡入，看起来更容易。这是否也会使用
核心动画
进行淡入淡出？接下来，由于这使用
核心动画
，交叉淡入淡出是否也必须使用
核心动画
-可能会将这两个动画、移位和淡入淡入淡出组合？