I've got this rather simple piece of example code in which I have a simple hierarchy consisting of three layers;
view layer
|- base layer
|- green layer
Now I want to move the base layer and at the same time adjust the color of the green layer, so I've added a slider to control the animations.
The code looks like this:
#implementation ViewController
- (void)loadView
{
[super loadView];
baseLayer = [CALayer layer];
[baseLayer setFrame:[[self view] frame]];
[baseLayer setBackgroundColor:[[[UIColor redColor] colorWithAlphaComponent:0.5] CGColor]];
[[[self view] layer] addSublayer:baseLayer];
greenLayer = [CALayer layer];
[greenLayer setBounds:[baseLayer bounds]];
[greenLayer setBackgroundColor:[[UIColor greenColor] CGColor]];
[baseLayer addSublayer:greenLayer];
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(0, CGRectGetHeight([[self view] bounds]) - 44.0f, CGRectGetWidth([[self view] bounds]), 44.0f)];
[slider addTarget:self action:#selector(sliderValueChanged:) forControlEvents:UIControlEventValueChanged];
[[self view] addSubview:slider];
CABasicAnimation *changeColor = [CABasicAnimation animationWithKeyPath:#"backgroundColor"];
changeColor.fromValue = (id)[UIColor greenColor].CGColor;
changeColor.toValue = (id)[UIColor blueColor].CGColor;
changeColor.duration = 1.0; // For convenience
[greenLayer addAnimation:changeColor forKey:#"Change color"];
greenLayer.speed = 0.0; // Pause the animation
CABasicAnimation *changePosition = [CABasicAnimation animationWithKeyPath:#"position"];
changePosition.fromValue = [NSValue valueWithCGPoint:CGPointMake(CGRectGetWidth([[self view] bounds]) / 2, CGRectGetHeight([[self view] bounds]) / 2)];
changePosition.toValue = [NSValue valueWithCGPoint:CGPointMake(CGRectGetWidth([[self view] bounds]), CGRectGetHeight([[self view] bounds]) / 2)];
changePosition.duration = 1.0;
[baseLayer addAnimation:changePosition forKey:#"Change position"];
baseLayer.speed = 0.0;
}
- (void)sliderValueChanged:(UISlider *)slider
{
[baseLayer setTimeOffset:[slider value]];
[greenLayer setTimeOffset:[slider value]];
}
My question: Do I need to change the timeOffset for each layer individually (which obviously works), or am I missing something here and can I do with a more intelligent solution?
(Of course this is a simple example, but my actual hierarchy can be somewhat more complex and having an arbitrary number of layers theoretically)
It should work when you remove the speed = 0 from the sub layers, in this case the greenLayer.
The speed property works relative to parent layers so you can pause all animations by adjusting the speed on the parent layer. Speed on sublayers will work relatively to the parent layer speed.
Related
I am animating UIView to have a feeling of book's page effect
#property (strong, nonatomic) UIView *insideView;
#property (strong, nonatomic) UIView *pageView;
#property (strong, nonatomic) UIView *backPageView;
#property (assign, nonatomic) CGRect cardFrame;
- (void)viewDidLoad
{
[super viewDidLoad];
[[self view] setBackgroundColor:[UIColor grayColor]];
//create frame for 2 test views
CGFloat size = 200.0;
_cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);
//lower view
_insideView = [[UIView alloc] initWithFrame: _cardFrame];
[_insideView setBackgroundColor:[UIColor redColor]];
//upper view
_pageView = [[UIView alloc] initWithFrame:_cardFrame];
[_pageView setBackgroundColor:[UIColor greenColor]];
//upper view back side
_backPageView = [[UIView alloc] initWithFrame:_cardFrame];
[_backPageView setBackgroundColor:[UIColor blueColor]];
[[self view] addSubview:_insideView];
[[self view] addSubview:_pageView];
[[self view] insertSubview:_backPageView belowSubview:_pageView];
//get layer of upper view and set needed property
CALayer *viewLayer = [_pageView layer];
CALayer *viewBackLayer = [_backPageView layer];
[viewLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
[viewLayer setFrame:_cardFrame];
[viewLayer setDoubleSided:NO];
[viewBackLayer setAnchorPoint:(CGPoint){0.0 , 0.5}];
[viewBackLayer setFrame:_cardFrame];
//create perspective
CATransform3D mt = CATransform3DIdentity;
mt.m34 = 1.0/-500.;
//create rotation
CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4,0,-1, 0);
//create result transform
CATransform3D openTransform = CATransform3DConcat(open, mt);
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:openTransform];
[viewBackLayer setTransform:openTransform];
} completion:^(BOOL finished)
{
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:CATransform3DIdentity];
[viewBackLayer setTransform:CATransform3DIdentity];
}];
}];
}
But i want the UIView to animate from bottom to top,this code do animate but from left to right like book's page.
Please help!!
Thanks in advance.
try this.
//create frame for 2 test views
CGFloat size = 200.0;
_cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);
//lower view
_insideView = [[UIView alloc] initWithFrame: _cardFrame];
[_insideView setBackgroundColor:[UIColor redColor]];
//upper view
_pageView = [[UIView alloc] initWithFrame:_cardFrame];
[_pageView setBackgroundColor:[UIColor greenColor]];
//upper view back side
_backPageView = [[UIView alloc] initWithFrame:_cardFrame];
[_backPageView setBackgroundColor:[UIColor blueColor]];
[[self view] addSubview:_insideView];
[[self view] addSubview:_pageView];
[[self view] insertSubview:_backPageView belowSubview:_pageView];
//get layer of upper view and set needed property
CALayer *viewLayer = [_pageView layer];
CALayer *viewBackLayer = [_backPageView layer];
[viewLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewLayer setFrame:_cardFrame];
[viewLayer setDoubleSided:NO];
[viewBackLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewBackLayer setFrame:_cardFrame];
//create perspective
CATransform3D mt = CATransform3DIdentity;
mt.m34 = 1.0/-500.;
//create rotation
CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4,1,0,0);
//create result transform
CATransform3D openTransform = CATransform3DConcat(open, mt);
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:openTransform];
[viewBackLayer setTransform:openTransform];
} completion:^(BOOL finished)
{
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:CATransform3DIdentity];
[viewBackLayer setTransform:CATransform3DIdentity];
}];
}];
Here is the code
- (void)viewDidLoad
{
[super viewDidLoad];
[[self view] setBackgroundColor:[UIColor grayColor]];
//create frame for 2 test views
CGFloat size = 200.0;
_cardFrame = CGRectMake([[self view] center].x - size / 2, [[self view] center].y - size / 2 , size, size);
//lower view
_insideView = [[UIView alloc] initWithFrame: _cardFrame];
[_insideView setBackgroundColor:[UIColor redColor]];
//upper view
_pageView = [[UIView alloc] initWithFrame:_cardFrame];
[_pageView setBackgroundColor:[UIColor greenColor]];
//upper view back side
_backPageView = [[UIView alloc] initWithFrame:_cardFrame];
[_backPageView setBackgroundColor:[UIColor blueColor]];
[[self view] addSubview:_insideView];
[[self view] addSubview:_pageView];
[[self view] insertSubview:_backPageView belowSubview:_pageView];
//get layer of upper view and set needed property
CALayer *viewLayer = [_pageView layer];
CALayer *viewBackLayer = [_backPageView layer];
// need to change the anchor point to center of top edge.
// that is the point in which you need to rotate.
[viewLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewLayer setFrame:_cardFrame];
[viewLayer setDoubleSided:NO];
[viewBackLayer setAnchorPoint:(CGPoint){0.5 , 0.0}];
[viewBackLayer setFrame:_cardFrame];
//create perspective
CATransform3D mt = CATransform3DIdentity;
mt.m34 = 1.0/-500.;
//need to rotate in X axis. so changed arguments.
CATransform3D open = CATransform3DMakeRotation(3 * M_PI_4,1,0, 0);
//create result transform
CATransform3D openTransform = CATransform3DConcat(open, mt);
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:openTransform];
[viewBackLayer setTransform:openTransform];
} completion:^(BOOL finished)
{
[UIView animateWithDuration:1.0 animations:^
{
//close animation
[viewLayer setTransform:CATransform3DIdentity];
[viewBackLayer setTransform:CATransform3DIdentity];
}];
}];
}
The two key parts in that page flip is the rotation transform and the anchor point. If you are unfamiliar with this then I suggest that you look at the documentation to see how they work, I will only give a brief explanation.
Rotation transform
You can see that CATransform3DMakeRotation takes 4 arguments, the first is the angle of the rotation and the next three are the axis of the rotation. You are rotating around (0,-1, 0) which is the y axis (vertical on the screen). To instead cause a rotation around the horizontal axis (x) you should change the last 3 arguments to 1, 0, 0 (or maybe -1, I can't seem to remember that on the top of my head).
CATransform3D open = CATransform3DMakeRotation(3.0*M_PI_4, // angle
1, 0, 0); // axis
Anchor point
The anchor point specifies how the layer is drawn relative to its position. Both x and y in the anchor point range from 0 to 1 so (0.5, 0.5) is in the center of the layer, no matter the size. In your case the anchor point is (0.0, 0.5) meaning center left edge. You should probably change that to (0.5, 0.0) center top edge or (0.5, 1.0) center bottom edge depending on where you want the anchor point to be for your page flip.
viewLayer.anchorPoint = CGPointMake(0.5, 0.0); // center top edge
set Uiview Frame in view did Load then set on your event button clicked. view animaate Bottom to top
CGRect optionsFrame = AddNOTEview.frame;
optionsFrame.origin.y=300;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.50];
AddNOTEview.frame = optionsFrame;
[self.view addSubview:AddNOTEview];
I'm working on a component that is supposed to render several images and animate their position while changing also the contents. I've been inspired by this post: http://ronnqvi.st/controlling-animation-timing/ and thought of using speed to control the animations.
My ideia is to add the CALayers with the animations to a top-level layer whose speed is 0 and then set this layer's speed to 1.0 when it's time to animate.
Here's the code for it:
...
#property (nonatomic,strong) CALayer *animationLayer;
...
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
self.animationLayer = [CALayer layer];
self.animationLayer.frame = frame;
self.animationLayer.speed = 0.0;
[self.layer addSublayer:self.animationLayer];
}
return self;
}
- (void)addLayerData:(LayerData*)layerData
{
CALayer *aLayer = [CALayer layer];
aLayer.contents = (id) layerData.image.CGImage;
aLayer.frame = CGRectMake(0,0,96,96);
aLayer.position = layerData.position;
aLayer.name = layerData.name;
CGRect pathLayerFrame = layerData.path.bounds;
pathLayerFrame.origin.x = 0.0;
pathLayerFrame.origin.y = 0.0;
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = pathLayerFrame;
pathLayer.path = layerData.path.CGPath;
pathLayer.strokeColor = layerData.strokeColor.CGColor;
pathLayer.fillColor = [UIColor clearColor].CGColor;
pathLayer.lineWidth = 10;
pathLayer.lineCap = kCALineCapRound;
[self.animationLayer addSublayer:pathLayer];
CAKeyframeAnimation *positionAnimation = [CAKeyframeAnimation animationWithKeyPath:#"position"];
[positionAnimation setPath: layerData.path.CGPath];
[positionAnimation setDuration: 10.0];
[positionAnimation setRemovedOnCompletion: NO];
[positionAnimation setFillMode: kCAFillModeBoth];
[positionAnimation setKeyTimes:layerData.keyTimes];
CAKeyframeAnimation *contentsAnimation = [CAKeyframeAnimation animationWithKeyPath:#"contents"];
[contentsAnimation setValues:[self buildContentImagesFromLayerData:layerData];
[contentsAnimation setCalculationMode:kCAAnimationDiscrete];
contentsAnimation.calculationMode = kCAAnimationLinear;
[contentsAnimation setDuration:0.1];
[contentsAnimation setDelegate:self];
[contentsAnimation setAutoreverses:YES];
[contentsAnimation setRepeatCount:HUGE_VALF];
[contentsAnimation setRemovedOnCompletion:NO];
[contentsAnimation setFillMode:kCAFillModeBoth];
[aLayer addAnimation:positionAnimation forKey:kPostionAnimationKey];
[aLayer addAnimation:contentsAnimation forKey:kContentsAnimationKey];
[self.animationLayer addSublayer:aLayer];
}
- (void)animate
{
self.animationLayer.speed = 1.0;
}
My issue is that although the animationLayer contains all the layers to animate and these have all the animations correctly defined I can't seem to get the layers moving around the screen.
The addLayerData is called several times by external client code, at different times (that is when user taps a button to add an image). The animate is called after that when the user taps a button.
Maybe I've missed something in the article.
Can anyone help me out on this one?
Thanks in advance.
UPDATE
If I drop the animationLayer and add the layers to be animated directly on the view's layer (self.layer) it works correctly.
I'm trying to make a circle-masked image view with animated mask, and played with different solutions. The example below does the job but I've got two problems with it:
1) Why is it that I cannot make the image tappable? Adding eg. a UITapGestureRecognizer does not work. My guess is that the mask prevents the touch actions being propagated to the lower level in the view hierarchy.
2) Animating the mask is running very fast and I cannot adjust the duration using UIView block animation
How can I solve these?
- (void) addCircle {
// this is the encapsulating view
//
base = [[UIView alloc] init];
//
// this is the button background
//
base_bgr = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"c1_bgr.png"]];
base_bgr.center = CGPointMake(60, 140);
[base addSubview:base_bgr];
//
// icon image
//
base_icon = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"c1_ico.png"]];
base_icon.center = CGPointMake(186*0.3/2, 182*0.3/2);
base_icon.transform = CGAffineTransformMakeScale(0.3, 0.3);
[base addSubview:base_icon];
//
// the drawn circle mask layer
//
circleLayer = [CAShapeLayer layer];
// Give the layer the same bounds as your image view
[circleLayer setBounds:CGRectMake(0.0f, 0.0f, [base_icon frame].size.width,
[base_icon frame].size.height)];
// Position the circle
[circleLayer setPosition:CGPointMake(186*0.3/2-7, 182*0.3/2-10)];
// Create a circle path.
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:
CGRectMake(0.0f, 0.0f, 70.0f, 70.0f)];
// Set the path on the layer
[circleLayer setPath:[path CGPath]];
[[base layer] setMask:circleLayer];
[self.view addSubview:base];
base.center = CGPointMake(100, 100);
base.userInteractionEnabled = YES;
base_bgr.userInteractionEnabled = YES;
base_icon.userInteractionEnabled = YES;
//
// NOT working: UITapGestureRecognizer
//
UITapGestureRecognizer *tapgesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(tapit:)];
[base_icon addGestureRecognizer:tapgesture];
//
// BAD but WORKS :) properly positioned UIButton over the masked image
//
base_btn = [UIButton buttonWithType:UIButtonTypeCustom];
base_btn.frame = CGRectMake(base.frame.origin.x, base.frame.origin.y, base_icon.frame.size.width, base_icon.frame.size.height);
[base_btn addTarget:self action:#selector(tapit:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:base_btn];
}
This is the tap handler, and here's the mask animation. Whatever number I tried in duration, it is animating fast - approximately 0.25 second, and I cannot adjust it.
- (void) tapit:(id) sender {
//...
[UIView animateWithDuration:1.0
delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^ {
[circleLayer setTransform:CATransform3DMakeScale(10.0, 10.0, 1.0)];
}
completion:^(BOOL finished) {
// it is not necessary if I manage to make the icon image tappable
base_btn.frame = [base convertRect:base_icon.frame toView:self.view];
}];
}
}
1) touches are not propagated down from base because it's initiated without a frame, so its frame will be CGRectZero. Views don't get touch events that start outside of their bounds. Simply set a valid frame on base that includes entire tap target.
2) setTransform: on a layer invokes an implicit animation which uses Core Animation's default duration of 0.25 (you guessed it right :)). The best solution would be to use CABasicAnimation instead of UIView-based animation. Something like this:
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.toValue = #(10.0f);
scaleAnimation.duration = 2;
[circleLayer addAnimation:scaleAnimation forKey:nil];
Note: by default, CABasicAnimation will remove itself from a layer when complete and the layer will snap back to old values. You can prevent it by for example setting that animation's removedOnCompletion property to NO and removing it yourself later using CALayer's removeAnimationForKey: method (just set a key instead of passing nil wheen adding the animation), but that depends on what exactly you want to accomplish with this.
I'm now trying to create an application with a '3D cube', and clickable sides.
To create a '3D cube', i found a great article : here
It uses some 'layers'.
What i want to do, is done a cube in 3D, but with clickable sides. I found some examples like this :
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if ([touches count] == 1) {
for (UITouch *touch in touches) {
CGPoint point = [touch locationInView:[touch view]];
point = [[touch view] convertPoint:point toView:nil];
CALayer *layer = [(CALayer *)self.view.layer.presentationLayer hitTest:point];
layer = layer.modelLayer;
layer.opacity = 0.5;
}
}
}
But this sort of code makes no difference between the different sides. So I try to make some changes to the code from the article. For example, to create the first side, the code was :
CALayer *sideOne = [CALayer layer];
sideOne.borderColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;
sideOne.backgroundColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:0.4].CGColor;
sideOne.borderWidth = Border_Width;
sideOne.cornerRadius = Corner_Radius;
sideOne.frame = layerRect;
sideOne.position = self.center;
and :
transformLayer = [CATransformLayer layer];
[transformLayer addSublayer:test.layer];
transformLayer.anchorPointZ = Layer_Size/-2;
[rootLayer addSublayer:transformLayer];
So I try to make some modifications and finally add a 'UIButton' on this side. Like this :
UIButton * test = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[test setFrame:CGRectMake(0.0, 0.0, layerSize, layerSize)];
[test addTarget:self action:#selector(ActionTest) forControlEvents:UIControlEventTouchUpInside];
test.layer.borderColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor;
test.layer.backgroundColor = [UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:0.4].CGColor;
test.layer.borderWidth = Border_Width;
test.layer.cornerRadius = Corner_Radius;
test.layer.frame = layerRect;
test.layer.position = self.center;
But the problem is, when i want to add it to the side.
When i do :
transformLayer = [CATransformLayer layer];
[self addSubview:test];
[transformLayer addSublayer:test.layer];
transformLayer.anchorPointZ = Layer_Size/-2;
[rootLayer addSublayer:transformLayer];
the button no react
And when i do :
transformLayer = [CATransformLayer layer];
[transformLayer addSublayer:test.layer];
transformLayer.anchorPointZ = Layer_Size/-2;
[self addSubview:test];
[rootLayer addSublayer:transformLayer];
the button react but don't move with the rest of the cube
I understand the problem but don't know how to fix it...
Thanks !
What you're seeing is the difference between a UIButton, which inherits from UIResponder, and CALayer's, which do not make up a part of the responder chain directly.
Fortunately, there is a simple way to grab events from the responder chain and direct them towards your CALayer of choice, and it looks a little like this:
- (void)touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event
{
CGPoint p = [(UITouch*)[touches anyObject] locationInView:self.worldView];
for (CALayer *layer in self.worldView.layer.sublayers) {
if ([layer containsPoint:[self.worldView.layer convertPoint:p toLayer:layer]]) {
// do something
}
}
}
It's the containsPoint:convertPoint:toLayer: that's going to hold the essence of what you seek.
There's a bit more largely relevant discussion around this topic on this post too
To connect the dots of this to your invocation, when you add the button's layer to your other layers, all the visual aspects perform as expected, but no one is a member of the responder chain, and therefore no one receives touches to handle.
I am recieving memory warning using 100 of animating images so I tried to use Core Animation instead but that gives me the same problem. This is because I don't know how to use replaceSublayer in my current code
UIView* upwardView=[[UIView alloc]init];
[upwardView setFrame:CGRectMake(0, 0, 1024, 768)];
[self.view addSubview:upwardView];
NSArray *animationImages=[NSArray arrayWithObjects:[UIImage imageNamed:#"001.png"],[UIImage imageNamed:#"001.png"],[UIImage imageNamed:#"002.png"],[UIImage imageNamed:#"003.png"],....,nil];
CAKeyframeAnimation *animationSequence = [CAKeyframeAnimation animationWithKeyPath: #"contents"];
animationSequence.calculationMode = kCAAnimationLinear;
animationSequence.autoreverses = YES;
animationSequence.duration = 5.00;
animationSequence.repeatCount = HUGE_VALF;
NSMutableArray *animationSequenceArray = [[NSMutableArray alloc] init];
for (UIImage *image in animationImages)
{
[animationSequenceArray addObject:(id)image.CGImage];
}
CALayer *layer = [upwardView layer];
animationSequence.values = animationSequenceArray;
[layer addAnimation:animationSequence forKey:#"contents"];
I guess you need to add a few lines more. Just replace the last three lines and add the following line.
//Prepare CALayer
CALayer *layer = [CALayer layer];
layer.frame = self.view.frame;
layer.masksToBounds = YES;
[layer addAnimation:animationSequence forKey:#"contents"];
[upwardView.layer addSublayer:layer]; // Add CALayer to your desired view
For detail implementation check this reference