2

I'm trying to create a kaleidoscope in iOS (I'm aware there is a CIKaleidoscope filter but it doesn't give me the sort of effect I'm looking for so I was hoping to roll my own). I've managed to get the effect with a still image using a CALayer, masking it with a triangle CAShapeLayer then replicating it with CAReplicatorLayer. I'm now trying to animate the original image in CALayer to give it some movement. I'm creating the CALayer and animating is using the following code:

UIImage *pattern = [UIImage imageNamed:@"pattern.jpg"];
CALayer *aLayer = [CALayer layer];
aLayer.bounds = CGRectMake(0, 0, pattern.size.width, pattern.size.height);
aLayer.position = CGPointMake(self.view.bounds.size.width/2.0f,
                              self.view.bounds.size.height/2.0f);
aLayer.contents = (id)pattern.CGImage;

CABasicAnimation* panningAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
panningAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
panningAnimation.toValue   = [NSValue valueWithCGPoint:CGPointMake(400, 400)];
panningAnimation.duration = 5.0;

[aLayer addAnimation:panningAnimation forKey:@"position"];

[self.view.layer addSublayer:aLayer];

I then create a triangle to be used for the mask:

CGMutablePathRef path = CGPathCreateMutable ();
CGPathMoveToPoint (path, NULL, 0, 0);
CGPathAddLineToPoint (path, NULL, 57.735, 0);
CGPathAddLineToPoint (path, NULL, 0, 100);
CGPathAddLineToPoint (path, NULL, 0, 0);
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setPath: path];

I can't mask the animating CALayer as the mask moves with the animation and I don't get the effect of the pattern moving through the triangle.

Adding the mask to the view's layer has the effect I'm after of the pattern moving through the mask in a triangle:

[self.view.layer setMask:shapeLayer];

but I can't easily replicate this using CAReplicatorLayer. Is there a way I can mask the CALayer but keep the mask in place relative to the frame of the view and not the frame of the animating layer? Or is there any way I can capture the animating image of the view so I can use it in a CAReplicatorLayer?

Aloha Silver
  • 1,394
  • 17
  • 35
lil'chief
  • 21
  • 1
  • What do you mean by "I can't easily replicate this using `CAReplicatorLayer`"? Do you have an error or something draws incorrectly? – kelin Feb 22 '17 at 09:07

0 Answers0