First I created the CAShapeLayer for masking the UIView at the bottom with height of 10px like this:
CAShapeLayer *mask = [[CAShapeLayer alloc]init];
CGRect maskRect = CGRectMake(0, self.view.frame.size.height-10, self.view.frame.size.width, 10.0);
CGPathRef path = CGPathCreateWithRect(maskRect, NULL);
mask.path = path;
CGPathRelease(path);
mask.anchorPoint = CGPointMake(0.5, 1.0);
self.view.layer.mask = mask;
After commenting the above code I created a CALayer for masking the UIView at the bottom with height of 10px like this:
CALayer *mask = [CALayer layer];
mask.contents = (id)[[self getImg]CGImage];
mask.frame = CGRectMake(0, self.view.frame.size.height-5, self.view.frame.size.width, 10.0);
mask.anchorPoint = CGPointMake(0.5, 1.0);
self.view.layer.mask = mask;
Question 1:
To perfectly touch the bottom not a pixel above or below, for CAShapeLayer the CGRect I defined is
CGRectMake(0, self.view.frame.size.height-10, self.view.frame.size.width, 10.0);
and for CALayer the CGRect I defined is
CGRectMake(0, self.view.frame.size.height-5, self.view.frame.size.width, 10.0);
why -10 for CAShapeLayer and why -5 for CALayer ?
The animation code and its effects on CAShapeLayer and CALayer:
CGRect oldBounds = mask.bounds;
CGRect newBounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2);
[UIView animateWithDuration:1.0 animations:^{
CABasicAnimation* revealAnimation = [CABasicAnimation animationWithKeyPath:#"bounds"];
revealAnimation.fromValue = [NSValue valueWithCGRect:oldBounds];
revealAnimation.toValue = [NSValue valueWithCGRect:newBounds];
revealAnimation.duration = 0.5;
[mask addAnimation:revealAnimation forKey:#"revealAnimation"];
}];
// Update the bounds so the layer doesn't snap back when the animation completes.
mask.bounds = newBounds;
Effect on CAShapeLayer the position is changed but no effect on hight like this:
Effect on CALayer which worked perfectly and the result I wanted:
Question 2:
Why CAShapeLayer changed the position not the height?
I don't know why but I am having a feeling like CALayer animation is not going smooth?
Question 3:
The [UIView animateWithDuration:1.0 animations:^{ ... block do not have any effect on animation, why?
Answer 1:
Not sure why it is 5 and 10 for CAShapeLayer and CALayer, need to debug closely, but maybe problem is in adjusting anchorPoint or because you use path of shape layer
Answer 2:
About effect on CAShapeLayer: this is because you assigned CGPath to it, and changed shape layer frame, but not path. So you need to set new path property with correct coordinates. Something like this:
CGRect maskRect = CGRect newBounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height/2);
CGPathRef path = CGPathCreateWithRect(maskRect, NULL);
mask.path = path;
CGPathRelease(path);
Answer 3:
CABasicAnimation is class, which will do all animation, and you don't need to use it in UIView animateWithDuration block.
This code should work as expected:
CABasicAnimation* revealAnimation = [CABasicAnimation animationWithKeyPath:#"bounds"];
revealAnimation.fromValue = [NSValue valueWithCGRect:oldBounds];
revealAnimation.toValue = [NSValue valueWithCGRect:newBounds];
revealAnimation.duration = 0.5;
[mask addAnimation:revealAnimation forKey:#"revealAnimation"];
Related
UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:80 startAngle:0 endAngle:(2 * M_PI) clockwise:YES];
CAShapeLayer * layer = [CAShapeLayer new];
layer.strokeColor = [UIColor redColor].CGColor;
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = 10;
layer.strokeEnd = 1;
layer.position = self.view.center;
layer.lineCap = kCALineCapRound;
[layer setPath : path.CGPath];
[self.view.layer addSublayer : layer];
CAGradientLayer * gradientLayer = [CAGradientLayer layer];
gradientLayer.startPoint = CGPointMake(0.0,0.5);
gradientLayer.endPoint = CGPointMake(1.0,0.5);
gradientLayer.frame = self.view.frame;
NSArray *colors = #[(id)[UIColor greenColor].CGColor,(id)[UIColor blueColor].CGColor,(id)[UIColor yellowColor].CGColor];
gradientLayer.colors = colors;
[gradientLayer setMask : layer];
[self.view.layer addSublayer : gradientLayer];
What Im doing:
Adding CAShapeLayer to view.layer with a path to draw a circle.
Adding CAGradientLayer ( 3 colors ) to view.layer and setingMask to the CAShapeLayer.
Result: with and without mask
The problem :
If I change the frame of the gradient to be on top of the circle ( because I want to see the all the colors on the circle ) its moves the circle as well.
particularly the change to the x and y of the gradient
So instead of
gradientLayer.frame = self.view.frame;
I change the x and y only ( width and hight doesn't causing this problem as far as I checked )
gradientLayer.frame = CGRectMake(100,100, self.view.frame.size.width, self.view.frame.size.height);
And this is the result
Can anyone explain why this is happening and what are the possible solutions ?
What Im trying to achieve is this
And then masking it with the CAShapeLayer but then this problem happens
Thanks in advance
change the shapelayer position, because gradient layer is fullscreen and shapelayer set center position and after you change the frame of gradient layer shapelayer also change with same position.
layer.position = CGPointMake(30, 250);
I'm trying to animate a chart so it scales from the center. Now it scales from left to right.
Initial State:
Final State:
Animation:
Here is my code:
maskLayer = [[CAShapeLayer alloc] init];
maskLayer.borderColor=[UIColor redColor].CGColor;
maskLayer.borderWidth=1;
maskLayer.fillColor=UIColorFromRGB(0x91E5FF).CGColor;
maskLayer.frame = CGRectMake(0,0, rect.size.width, rect.size.height);
maskLayer.path = finalPath.CGPath;
maskLayer.opacity=0.8;
[self.layer addSublayer:maskLayer];
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:#"path"];
anim.duration = 4;
anim.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeBoth;
anim.fromValue = (id)[initialPath CGPath];
anim.toValue= (id)[finalPath CGPath];
[maskLayer addAnimation:anim forKey:nil];
To get the results you want, you can't just scale - you'll have the same path at the start and finish. Your stated example has a path animation.
All you have to do is draw your paths in relation to each other, the way you want them to animate. If you want to animate your path as if it's anchored in the center, you need to draw them like that. Center both your paths on each other.
Here's a simple example:
UIBezierPath* initialPath = [UIBezierPath bezierPathWithRect: CGRectMake(-25, -25, 50, 50)];
UIBezierPath* finalPath = [UIBezierPath bezierPathWithRect: CGRectMake(-40, -40, 80, 80)];
In this example, your square will scale up from the center. If your path is currently scaling from the right, it's because thats where your paths are aligned.
I am working on scaling the circle and keep the same center position, which looks like the pulsing circle on map.
AnimationView.m
#property (nonatomic, strong) UIBezierPath *ovalPath;
- (void)drawCircle
{
UIGraphicsBeginImageContext(self.frame.size);
CGRect rect = CGRectMake(25.45, 49.25, 5.8, 5.8);
self.ovalPath = [UIBezierPath bezierPathWithOvalInRect: rect];
[self.ovalPath fill];
UIGraphicsEndImageContext();
}
- (void)bumpUpCircle
{
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.path = self.ovalPath.CGPath;
pathLayer.fillColor = [UIColor blackColor].CGColor;
pathLayer.lineWidth = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;
[self.layer addSublayer:pathLayer];
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 0)];
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10.0, 10.0, 10.0)];
animation.repeatCount = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
animation.duration = 1;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[pathLayer addAnimation:animation forKey:#"transform.scale"];
NSLog(#"%#",NSStringFromCGPoint(self.bounds.origin));
}
However, the scaling position is in a strange position, rather than the center of the circle.
Any ideas will be very appreciated. Thanks.
Edit:
GIF uploaded
My suggestion for you with a pulsing circle, is to use an UIView and add it as a subview in your UIViewController. In following example you get a pulsing circle (a UIView with a cornerRadius like the radius) scaling up and down in a very few lines. Include this e.g. in your UIViewController's viewDidLoad to try it out.
int radius = 100;
UIView * circleView = [[UIView alloc] init];
circleView.backgroundColor = [UIColor greenColor];
circleView.frame = CGRectMake(0, 0, radius*2, radius*2);
circleView.center = self.view.center;
circleView.layer.cornerRadius = radius;
[self.view addSubview:circleView];
[UIView animateWithDuration:0.8f
delay:0.0f
options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat
animations:^{
circleView.transform = CGAffineTransformMakeScale(1.1, 1.1);
} completion:^(BOOL fin) {
// Do nothing
}];
What basically i need to implement is custom button that need to switch between plus icon and a check mark with animation. As a first step i am trying to create horizontal line with CAShapeLayer and trying to rotate by some angle. I cannot figure out what is wrong in it.
UIBezierPath *linePath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0,self.frame.size.width, 10)];
//shape layer for the line
CAShapeLayer *line = [CAShapeLayer layer];
line.backgroundColor = [UIColor redColor].CGColor;
line.path = [linePath CGPath];
line.fillColor = [[UIColor greenColor] CGColor];
line.frame = CGRectMake(0, 10, self.frame.size.width,10);
line.anchorPoint = CGPointMake(0.0, 0.5);
line.transform = CATransform3DMakeRotation(30, 0.0, 0.0, 1.0);
[self.layer addSublayer:line];
The transformation use radian, so you should use
line.transform = CATransform3DMakeRotation(30 * M_PI/180, 0.0, 0.0, 1.0);
I used this library to have what i added, http://code4app.net/ios/BZAnimationButton/5477ed87e24741f10bb03ca0
I have created 2 CALayers of same size and am passing these to the method below. However, the two layers runs together. How can I seperate these so that both are visible?
- (void) myAnimation : (CALayer *) sublayer {
UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(30, 100, 270, 270)];
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim.path = aPath.CGPath;
anim.rotationMode = kCAAnimationRotateAuto;
anim.repeatCount = HUGE_VALF;
anim.duration =35.0;
[sublayer addAnimation:anim forKey:#"race"];
}
Your path begins and ends at the same point. Assuming both beginning times are the same and duration is the same, your layers will precisely overlap. You can either shift the beginning time or rotate your UIBezierPath* aPath Here's an example of rotating your UIBezierPath* aPath and altering the duration. It should give you an idea how you could alter duration, begin time, rotation, etc.
- (void)viewDidLoad
{
[super viewDidLoad];
[self.view setBackgroundColor:[UIColor blackColor]];
CALayer * layer1 = [CALayer layer];
CALayer * layer2 = [CALayer layer];
[layer1 setFrame:CGRectMake(0, 0, 5, 50)];
[layer2 setFrame:CGRectMake(0, 0, 5, 100)];
layer1.backgroundColor = [[UIColor colorWithRed:.1 green:.5 blue:1 alpha:.35] CGColor];
layer2.backgroundColor = [[UIColor colorWithRed:.9 green:.2 blue:.5 alpha:.35] CGColor];
[self.view.layer addSublayer:layer1];
[self.view.layer addSublayer:layer2];
[self myAnimation:layer1 andRotation:0 andDuration:35.0];
[self myAnimation:layer2 andRotation:10 andDuration:10.0];
}
- (void) myAnimation:(CALayer *)sublayer andRotation:(CGFloat)rot andDuration:(CFTimeInterval)dur {
CGRect rect = CGRectMake(30, 100, 270, 270);
UIBezierPath* aPath = [UIBezierPath bezierPathWithOvalInRect:rect];
// Creating a center point around which we will transform the path
CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformTranslate(transform, center.x, center.y);
transform = CGAffineTransformRotate(transform, rot);
// Recenter the transform
transform = CGAffineTransformTranslate(transform, -center.x, -center.y);
// This is the new path we will use.
CGPathRef rotated = CGPathCreateCopyByTransformingPath(aPath.CGPath, &transform);
CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
anim.path = rotated;
anim.rotationMode = kCAAnimationRotateAuto;
anim.repeatCount = HUGE_VALF;
anim.duration =dur;
[sublayer addAnimation:anim forKey:#"race"];
}