如何为拼接图像设置动画？

Question

我不确定如何制作这个动画。你会以某种方式将1 jpg文件均匀地分成3个部分并为其设置动画吗？或者你是否需要制作requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, 0); 的多个副本并对它们做些什么？

任何帮助都会很棒！

Answer 1

更新

由于您需要交叉渐变，因此最简单的方法是将图像分割为单独的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)

结果：

ORIGINAL

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

在你的图像中，有三个cels，每个cel占据图像的1/3。 contentsRect位于单位坐标空间中，这使得计算变得容易。 cel contentsRect的{​​{1}}为i。

您希望在cels之间进行离散跳转，而不是平滑的滑动过渡，因此您需要使用CGRect(x: i/3, y: 0, width: 1/3, height: 0) kCAAnimationDiscrete的关键帧动画。

calculationMode

结果：

the contentsRect property