Need help regarding animating position of multiple layers

Question

I am trying to animate balloons which are actually images. To do so, I have created sub class of CALayer which shows an image in its content and finally multiple objects of this sub class will added to view of viewcontroller.

Once I call a function "bounce" over the each object of this subclass. The position of all these layers (balloons) start animating in such a way that it create bounce effect around the view boundaries. It keeps on changing the position of layers until it stop it by calling method "stopBouncing".

Now the problem is, there is some flickering in layers and performance is also not good if the count of balloons is high.

Would be really grateful if someone can help me regarding efficient implementation of such requirement.

Note : This is for iPhone.

A piece of whole code:

-(void)bounce
 {
   self.position=CGPointMake(self.position.x+self.moveOffset.x,self.position.y+self.moveOffset.y);
   if(self.position.x>self.maxBoundary.x || self.position.x<self.minBoundary.x)
   {
      self.moveOffset.x=-self.moveOffset.x;
   }

   if(self.position.y>self.maxBoundary.y || self.position.y<self.minBoundary.y)
   {
      self.moveOffset.y=-self.moveOffset.y;
   }
}

Here, moveOffset is the the distance on x axis and y axis which would be traveled by layer in a time interval.

Use Group animation. See this post http://stackoverflow.com/questions/10938223/how-can-i-create-an-cabasicanimation-for-multiple-properties — Mani, May 03 '14 at 06:28
Thanks for response. As far as I understand, Group Animation is for applying multiple animations on a layer. But my requirement is to animate multiple layers at the same time and count of layers depends upon number of records (means its variable). Kind of animation is single but it's infinite and it will keep on moving the position of layer. — Viren, May 03 '14 at 06:42
No No.. Group animation can play multiple layer animation at time and also serial animation. It's based on the animation start and end time calculation. — Mani, May 03 '14 at 07:04
Yes, CAAnimationGroup can animate at time and also can perform serial animation. But its not for multiple layers, please have a look at http://stackoverflow.com/questions/17764375/sequence-animation-using-caanimationgroup — Viren, May 03 '14 at 07:30

score 0 · Accepted Answer · answered May 03 '14 at 07:03

0

Do not use layers.

Use Sprite Kit instead.

https://developer.apple.com/library/ios/documentation/GraphicsAnimation/Conceptual/SpriteKit_PG/Introduction/Introduction.html

answered May 03 '14 at 07:03

Abhi Beckert

30,929
11
77
106

This is exactly what I was looking for.. thank you very much. – Viren May 03 '14 at 07:28
No worries. Just to be clear, layers are the correct approach if you don't have many of them moving around simultaneously. Sprite Kit is only suitable when layers start to struggle. – Abhi Beckert May 04 '14 at 05:08

score 0 · Answer 2 · answered Feb 26 '17 at 19:53

In here you want to specify balloon as layers instead of actually animating the UIImage. This code is a bit old, but in Swift 3 you want to make sure that a code like this is written:

let balloonImage = CALayer() 
balloonImage.contents = UIImage(named: "balloon")!.cgImage
balloonImage.frame = CGRect(x: -50.0, y: 0.0, width: 50.0, height: 65.0)
view.layer.insertSublayer(balloonImage, below: username.layer)

The UIImage(named:"") should be whatever your image is called, the frame is how big you want your layer that is the replica of the UIImage. The view is then inserted inside the main view. The let flight allows you to perform animations to the layer that you created. You could have different set animations, such as CABasicAnimation, CASpringAnimation, and others, but beware because different animations have different set defaults, as you can't use provide values/times in CABasicAnimation. The keyframeAnimation is just using values for your animation to go. You could also have a different keypaths, as "position.x" or "postion.y". Other keypaths include: transform.rotation, position.x, position.y.

let flight = CAKeyframeAnimation(keyPath: "position")
flight.duration = 30.0
flight.values = [
    CGPoint(x: -50.0, y: 0.0),
    CGPoint(x: view.frame.width + 50, y: 160.0),
    CGPoint(x: -50.0, y: loginButton.center.y)


].map({
    NSValue(cgPoint: $0)
})
flight.keyTimes = [0.0, 0.5, 1.0]
balloonImage.add(flight, forKey: nil)
balloonImage.position = CGPoint(x: -50.0, y: loginButton.center.y)

Need help regarding animating position of multiple layers

2 Answers2