title: How do I repeat an animation multiple times simultaneously with respect to performance?
body: <p>I am aiming to have all these waves animate identically, for performance reasons. This will help by reducing the cost of calculating wave paths, and to reduce the draw count.</p>
  
  <p>I have a scene in SpriteKit setup like so:</p>
  
  <p><a href="https://i.stack.imgur.com/OqS8Sm.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OqS8Sm.jpg" alt="Scene"></a>
  → There is a link to an animating version <a href="https://streamable.com/y1z5l" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The scene is mainly composed of 2 things:</p>
  
  <ul>
  <li>Stones (the light and dark grey hexagons)</li>
  <li>Waves (there are 2 per stone - a lighter and a darker blue animating path)</li>
  </ul>
  
  <p>The waves are create like so:</p>
  
  <pre><code>// Wave outline shape node
  shapeNode               = SKShapeNode(path: self.oldPath)
  shapeNode.strokeColor   = wave.color
  shapeNode.lineWidth     = 5
  shapeNode.zPosition     = waveIndex == 0 ? Layer.farWave : Layer.nearWave
  shapeNode.lineJoin      = .round
  shapeNode.position      = stoneCell.node.position.offset(by: stoneCell.offsetVector)
  view.scene?.addChild(shapeNode)
  
  // Layer which creates the animation
  shapeLayer = CAShapeLayer()
  shapeLayer.isHidden = true
  view.layer.addSublayer(shapeLayer)
  
  animate()
  </code></pre>
  
  <p>And the <code>animate()</code> function:</p>
  
  <pre><code>/// Animates the wave's path. This method calls itself forever.
  private func animate() {
      let newPath = WavePath(wave: wave, direction: currentDirection).createPath()
  
      let anim = CABasicAnimation(keyPath: "path")
      anim.duration   = 2  // Duration of the wave movements in a direction (in or out)
      anim.fromValue  = oldPath
      anim.toValue    = newPath
      anim.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
  
      shapeLayer.path = newPath
      shapeLayer.add(anim, forKey: nil)
  
      shapeNode.run(SKAction.customAction(withDuration: anim.duration, actionBlock: { (node, timeDuration) in
          (node as? SKShapeNode)?.path = self.shapeLayer.presentation()?.path
      }), completion: {
          self.oldPath = newPath
          self.currentDirection.toggle()
          self.animate()
      })
  }
  </code></pre>
  
  <p>The problems arise because there are 10 stones on the scene, which increases the performance cost. Is there a way to make this wave animation duplicated under all these stones?</p>
  
  <p>Possible options I can think of:</p>
  
  <ul>
  <li><p>Convert the paths into a texture, which could be shared between multiple stones? However I think this would be slow to convert to a texture twice (for each wave) per frame, and then copy it over...</p></li>
  <li><p>Rendering a full animation pass of the wave going in and then out, and then putting that on a loop for every node. But how?</p></li>
  </ul>
  
  <p>What other solutions may be better?</p>
  
  <p>I do <strong>not</strong> want to create an atlas and animate it. I cannot do this because these stones and waves change in size, depending on the screen size and level and I want them pixel-perfect. I do not mind however (as mentioned in bullet point two) of storing textures of an animation loop and then repeating that.</p>