I want to animate an UIView with a given CAAnimation and interact with the view while it's animating (the view has a gesture recognizer).
If I understand correctly CAAnimation only animates the view's layer, but the view itself will remain in the original position.
How can I make the UIView move with the CAAnimation?
If you only care about visual "stickiness" you can do:
[myAnimation setRemovedOnCompletion:NO];
But this is only visual. It doesn't change the actual layer's properties.
If you want the layer's properties to be updated to new values also, you can do something like:
// You have code above that to register the property you want to animate...
[myAnimation setFromValue:[NSNumber numberWithFloat:0.0f]];
[myAnimation setToValue:[NSNumber numberWithFloat:1.0f]];
Rather than attempting to move it, you could expand your UIView to cover the area you want to receive touches in, and then animate its layer within it. Make sure to set the view opaque property to NO.
You may want to add a sublayer to view.layer rather than moving the view's own layer, for example if you want the layer to go outside the bounds of the view without affecting the layout of subviews of the view.
Related
I have a UIView which has an X origin that makes it off screen to the right. Then, I do a keyframe animation with CATransform3D:
[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(-view.width, 0, 0)]
The problem is, after the animation completes, the view's frame is visually in the correct place, but it still thinks it's off screen, so I can't interact with it. Logging its frame property also shows that it's offscreen, but visually, it's not.
The fill mode for the animation is kCAFillModeForwards, so the final value of the animation sticks.
What is the solution to this problem, that is, interacting with this view after the animation and notifying the view that it is indeed visible?
You can use CAAnimation delegate method -animationDidStop:finished: to fix it when the animation done:
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
...
}
The better answer is to use UIView animation methods like animateWithDuration:animations:completion: (and variants on that method.)
Those methods let you do animations on the actual view properties, and when the animation is complete, the view is at it's actual destination location.
The center property is the easiest way to move views around. The frame property isn't valid if you've applied a transform, but the center property IS always valid for both reading and writing.
Core Animation only creates the illusion that your views move. The animation takes place on a display-only copy of the layer tree. You can query the properties of an animating layer by reading those same properties from the layer's presentationLayer. However, the view objects will not respond to the user interaction at their apparent location. The views still think they are at their original locations.
As the other poster said, you could use the animation completion delegate method to move the view to it's final location once the animation is over, but that's a lot of fussy work to do something that UIView animation does for you much more cleanly and simply.
Can you interact with the view even before you animate it?
is the view.userInteractionEnabled is set to YES??
I'm trying out the animation stuff with the iPhone and I have a small app that has circles falling from the top of the screen to the bottom. I added the UIViewAnimationOptionAllowUserInteraction option to the animation and set userInteractionEnabled = YES on both my sub views and my main view. I am generating the subview programmatically everytime my NSTimer fires, which makes the circles.
The problem I am having is that even if I implement - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event on my main view and my subviews, the event only ever fires on the main view regardless of how hard or how many times I smash the falling circles.
How do I get that event to fire on my circles instead? Why doesn't the touch fire on the view on top?
The problem is that when you perform a "tween" animation with Core Animation (which occurs implicitly when you use the UIView animation methods), the new value is immediately applied to what's known as the model layer tree.
The animation is committed to Core Animation, and the next time the main run loop occurs, Core Animation does the necessary rendering to make it look as if an animation is occurring. In reality, though, the model values of your view (e.g., its frame or transform properties) are changed immediately.
Try tapping at the bottom of the screen where the buttons land (assuming they finish on screen). If you do this, it should respond to the interaction event as you expect.
You could manually change the frame of your circles by constantly firing a timer and applying small changes at each step. This, however, is likely not ideal.
Another option is to make use of your view's layer's presentationLayer method. This layer represents the state of the layer at any point in time, as we see it on the screen. Off the top of my head, I imagine that your main view's touch handling method can iterate through each subview and check to see if the touch point intersects the frame of the subview's layer's presentation layer. If it does, then that means someone "touched" your subview.
for (UIView *subview in self.subviews)
{
CALayer *presentationLayer = (CALayer *)[subview.layer presentationLayer];
if (CGRectContainsPoint(presentationLayer.frame, touchPoint)
{
// Found the subview the user touched
}
}
I should note that presentationLayer returns id, because the presentation layer may be CALayer or any of its subclasses. So, for example, if you're using CAShapeLayer, then -presentationLayer will return a CAShapeLayer. Still, it's fine to just cast it to a CALayer since all you care about for the purposes of this task is to check its frame property.
I'm doing UIView animation on individual subviews that have a number of sibling views that I don't want affected by the single-view animation. However layoutSubviews is being called on the containing superview when I do the animation, causing the other siblings to be rearranged as well.
(I should explain that I'm doing initial subview layout in the parent view's layoutSubviews method; I only want it to be called the first time I'm setting up the subviews, not when I'm animating them individually later on.)
Why is the parent view's layoutSubviews method being called when animating its subviews?
I can imagine "sorting a grid of icons", you'll just have to animate one icon and the rest works automatically.
On the other side: What autoresizing masks do you have set for the view you're animating? Perhaps it has to do with that. What type of UIView are you animating? Perhaps it changes shape and thus calls [self.superview setNeedsLayout] to tell the superview that it changed shape.
Other idea: Has your superview "autoresizedSubviews" set?
I've found that even setting transformations on the layers of a view can trigger the view's setLayoutSubviews. It took me by surprise too, but maybe just because I don't need the behavior right now. It might sometimes become handy, I guess…
I'm developing some kind of card game in which my view objects (cards, etc) are all CALayers. These objects are added as sublayers of a mainBoard (a CALayer), which, in turn, is a sublayer of the [UIView layer] property of my mainView. Everything is Ok, I can do hit testing to verify which layer is being touched through the touchesBegan:withEvent: callback of the mainView class normally, and so on.
However, I need to have a scroll inside my mainBoard to show "bigger" CALayers, so I tried first adding the "bigger" CALayer inside a CAScrollLayer, but I noticed that the CAScrollLayer doesn't really scroll (doesn't handle user input, neither draws scrollbars). So, the workaround would be to add an UIScrollView directly to the mainView UIView. The UIScrollView scrolls perfectly, until I try to add the "bigger" layer to it, by using [scrollView.layer addSublayer:<bigger layer>].
Does anyone has any idea of how I can have "scrollable" objects inside a CALayer?
Thanks!
nacho4d pointed the answer for my question.
Replying to mark: the "bigger" layer (a layer whose bounds is bigger than the area available in the screen (and so, needs to be contained in a scrollable area)).
The solution was to first wrap the "bigger" layer in a UIView:
UIView *wrapperView = ...
[wrapperView.layer addSublayer:<bigger_layer>];
afterwards, I can add the view as a subview of the UIScrollview:
[<uiscrollview> addSubview:wrapperView];
// set up scrolling properties
<uiscrollview>.contentSize = <bigger_layer>.frame.size;
The problem was that I was trying to add the "bigger" layer as a sublayer of the UIScrollview directly, instead, wrapping it in a UIView and adding it as a subview worked.
Thanks
I want to have a UIView subclass that has a border image, but I don't want or care about this 'new' frame/bounds around the border image itself.
What I wanted to do was just use drawRect and draw outside of the rect but all drawing is clipped and I don't see a way to not clip drawing outside of this context rect.
So now I have added a sublayer to the views layer, set [self clipsToBounds] on the view and override setFrame to control my sublayers frame and always keep it at the proper size (spilling over the views frame by 40px).
The problem with this is that setFrame on a uiview by default has no animation but seTFrame on a calayer does.
I cant just disable the animations on the calayers setFrame because if I were to call setFrame on the uiview inside a uiview animation block the calayer would still have its animation disabled.
The obvious solution is to look up the current animationDuration on the uiview animation and set a matching animation on the sublayer, but I don't know if this value is available. And even if it is, I'm afraid that calling an animation from within another animation is wrong.
Unfortunately the best solution is to not use a calayer at all and just add a uiview as a subview and draw into that just like I am drawing into my layer, and hope that with autoresizingMask set to height and width that everything will 'just work'. Just seems like unnecessary overhead for such a simple task.
My solution would be to override the initWithFrame: to add the surrounding border pixels and contain the content in a subview. It probably is unneccesary overhead but definietly the "cocoa" route. It's probably going to be easier in the end too since a subview structure will allow you to edit the content seperatly from the border so you dont have to redraw the border when you redraw the content. And keeping them seperate simply makes sense from a OOP perspective.
The clipsToBounds route is probably the easiest route besides the subview structure but managing the border and content in one drawing cycle and in one object will probably be a lot more work so it'll be worth the overhead.
Excuse any typos, typed this from my iPhone.