Swift中的SpriteKit颜色填充动画答案

【问题标题】：SpriteKit color fill out animation in SwiftSwift中的SpriteKit颜色填充动画
【发布时间】：2017-03-22 05:08:07
【问题描述】：

我有一张如下图：

我想让它的颜色水平随着时间和动画而降低。目前，我可以使用图像序列对其进行动画处理。

但我想在 sprite kit 和动画中使用它。 那么我如何在 sprite kit 中做到这一点？

我有一些想法用 SKTextureAtlas 来做。 这是正确的做法吗？

还有任何工具可以为纹理生成多个图像吗？

【问题讨论】：

标签： swift sprite-kit sprite watchkit apple-watch

【解决方案1】：

您应该始终尝试在 Stackoverflow 上显示一些代码，否则人们往往不会提供帮助。

在 SpriteKit 中，你会像你想象的那样使用 SKTextureAtlas 来完成。

1) 转到您的资产目录并单击 + 并从下拉菜单中选择新的精灵图集。称它为 DropAtlas 之类的东西。在该图集中添加任意数量的图像集，为每个图像集添加类似这样的标签

dropImage_1
dropImage_2 
dropImage_3

2) 为您的纹理创建一个辅助类，这样您只需预加载一次纹理。您可以轻松地将此类扩展为您可能使用的其他纹理动画。这也有助于提高性能。

 class TextureHelper {

       static var dropTextures = [SKTexture]()

       static func setup() {

           // Drop textures
           let dropAtlas = SKTextureAtlas(named: "DropAtlas") // or the name you gave the atlas in step 1
           for image in 1...3 { // how many images there are in the animation
               let texture = dropAtlas.textureNamed("dropImage_\(image)") // or the name you gave the image sets
               dropTextures.append(texture)
           }
      }
 }

3) 在您的应用启动时调用 setup 方法，例如 App Delegate 或 GameViewController。

TextureHelper.setup()

4) 最后在您的场景中，您可以像这样为节点设置动画。

 private let dropAnimationKey = "DropAnimationKey"

 class GameScene: SKScene {

  let dropNode = SKSpriteNode(imageNamed: "dropImage_1") // defaults to image 1

  override func didMove(to view: SKView) {
      dropNode.position = ...
      addChild(dropNode)

      startDropNodeTextureAnimation()
  }

  private func startDropNodeTextureAnimation() {
       guard !TextureHelper.dropTextures.isEmpty else { return } // so you dont crash incase texture array is empty for some reason
       let textureAnimation = SKAction.animate(with: TextureHelper.dropTextures, timePerFrame: 0.3)
       dropNode.run(SKAction.repeatForever(textureAnimation), withKey: dropAnimationKey)
   }

 }

要停止动画，您可以使用正确的键简单地删除动作

dropNode.removeAction(forKey: dropAnimationKey)

我不确定创建不同图像的好工具是什么。

希望对你有帮助

【讨论】：

【解决方案2】：

我这样做的方法是有两个图像；白色轮廓为png，中心被切掉，蓝色的水作为其后面的单独图像。将它们设置在打开了 clipToBounds 的视图中，这样您就不会看到蓝色图像的溢出。

然后围绕设置新值使用动画，有点像这样：

UIView.animate(withDuration: 0.3, animations: {
    waterImage.center.y = newOffset
}, completion: nil)

【讨论】：