Swift中SpriteKit颜色填充动画

Question

I have one image of a drop as below:

I want to have its level of color decrease with time and with animation. Currently, I am able to animate it with the sequence of images.

But I want to use this in sprite kit and animate. So how can I do this in sprite kit?

I have some idea to do it with SKTextureAtlas. Is it the right way to do it?

Also is there any tool to generate multiple images for the textures?

Answer 1

You should always try to show some code on Stackoverflow, otherwise people tend to not help.

In SpriteKit you would do it using SKTextureAtlas like you assumed.

1) Go to your asset catalogue and click + and select new sprite atlas from the drop down menu. Call it something like DropAtlas. Add as many image sets as you need within that atlas, label each image set something like this

dropImage_1
dropImage_2 
dropImage_3 

2) Create a helper class for your textures, this way you only need to preload your textures once. You can easily extend this class for other texture animations you might use. This will also help with performance.

 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) Than call the setup method when your app launches eg App Delegate or GameViewController.

TextureHelper.setup()

4) And finally in your scene you animate the node like so.

 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)
   }

 }

To stop the animation you can simple remove the action with the correct key

dropNode.removeAction(forKey: dropAnimationKey)

I am not sure what a good tool is for creating different images.

Hope this helps

Answer 2

The way I would do this is have two images; the white outline as png with the center cut out and the blue water as a separate image behind it. Set them in a view that has clipToBounds turned on so you wont see overflow of the blue image.

Then use an animation around setting the new value, somewhat like this:

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