CoreAnimation, moving UIImageView with animating shadow in iOS 5 Xcode 4 - objective-c

I am trying to add a (fake)3d like effect for an image (UIImageView moving from point A to B, during this movement I want at point C=(A+B)/2 for it to have the biggest shadow size (or larger shadow offset), so it looks like it is going up and down again.
when I try to even change the shadow size, it is not animating. could you help me how to edit this code:
NSValue *pointB = [NSValue valueWithCGPoint:CGPointMake(CGRectGetMinX(imageView.frame)+50, CGRectGetMinY(imageView.frame)+50)];
[self.view bringSubviewToFront:ImageView];
[UIView beginAnimations:#"UIImage Move" context:NULL];
CGPoint point = [pointB CGPointValue];
CGSize size =imageView.frame.size;
[UIView setAnimationDuration:1.0];
imageView.frame = CGRectMake(point.x, point.y, size.width, size.height);
imageView.layer.shadowOffset = CGSizeMake(0, 4); //actually I want this to happen in mid point and revert to offset 1
[UIView commitAnimations];
//sorry for possible problems with syntax, the code works fine, I had to rewrite and simplify it for understanding

You need to animate the shadowOffset of the layer by using CAAnimation. Here is an example on how to enlarge the shadowOffset while moving the object. This example uses a UIButton.
#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#interface ViewController : UIViewController
#property (nonatomic, retain) IBOutlet UIButton *button;
#end
In the M file I am calling the animations on the button from the buttons IBAction.
-(IBAction)shadowGrow:(id)sender {
CABasicAnimation *shadowGrow = [CABasicAnimation animationWithKeyPath:#"shadowRadius" ];
shadowGrow.delegate = self;
[shadowGrow setFromValue:[NSNumber numberWithFloat:3.0]];
[shadowGrow setToValue:[NSNumber numberWithFloat:20.0]];
[shadowGrow setDuration:1.0f];
shadowGrow.autoreverses = YES;
CABasicAnimation *move = [CABasicAnimation animationWithKeyPath:#"transform.translation.x" ];
move.delegate = self;
[move setFromValue:[NSNumber numberWithFloat:0]];
[move setToValue:[NSNumber numberWithFloat:50]];
[move setDuration:1.0f];
move.autoreverses = YES;
//Add animation to a specific element's layer. Must be called after the element is displayed.
[[button layer] addAnimation:shadowGrow forKey:#"shadowRadius"];
[[button layer] addAnimation:move forKey:#"transform.translation.x"];
}
One thing to remember with CoreAnimation is when animating the properties like this they are going to revert to their value from the start unless you set those values after the animation ends in the CAAnimation's Delegate Method.
- (void) animationDidStop:(NSString *)theAnimation finished:(NSNumber *)finished context:(void *)context
Here is some additional information on CALayer's animatable properties.
CALayer and CIFilter animatable properties

Related

Rotation Gesture on UIScrollView

I am working on Scroll View with gestures. I added a UIView in Scroll View whose size is equal to the ScrollView content size. I want to apply the pinch gesture and rotate gesture on the View which is subview of ScrollView. I have done the work of the pinch gesture by using zoom property and delegate of the ScrollView which give me same effect which I want. But Rotation Gesture is creating Problem. When I add rotation gesture on the view then zooming of the scroll view also get disturb.
So how can i apply the pinch gesture and Rotate gesture on the Scroll View's subview whose size must be equal to the content size of the ScrollView initially.
Can anybody give me the way to do this!
This is the code of .m file, when we rotate the view it become invisible
#import "ViewController.h"
#interface ViewController ()
{
UIView *backgroundView;
UIScrollView *scrollView;
CGFloat lastRotation;
}
#end
#implementation ViewController
-(void)loadView
{
[super loadView];
//Scroll View
scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
scrollView.contentSize = self.view.frame.size;
scrollView.delegate = self;
scrollView.backgroundColor = [UIColor grayColor];
//Zooming factors of the Scroll View
scrollView.minimumZoomScale = 1.0;
scrollView.maximumZoomScale = 5.0f;
scrollView.zoomScale = 1.0;
[self.view addSubview:scrollView];
//Scroll View's subview
backgroundView = [[UIView alloc] initWithFrame:scrollView.frame];
[backgroundView setBackgroundColor:[UIColor orangeColor]];
[scrollView addSubview:backgroundView];
UIRotationGestureRecognizer *bgRotationGstr = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:#selector(rotateBackgroundView:)];
bgRotationGstr.delegate = self;
bgRotationGstr.cancelsTouchesInView = NO;
[backgroundView addGestureRecognizer:bgRotationGstr];
//Child of background view
UIView *childView = [[UIView alloc] initWithFrame:CGRectMake(20, 50, 100, 100)];
childView.backgroundColor = [UIColor grayColor];
[backgroundView addSubview:childView];
}
//Rotation of the background view
-(void)rotateBackgroundView:(UIRotationGestureRecognizer*)gesture
{
CGFloat rotation = 0.0 - (lastRotation - [(UIRotationGestureRecognizer*)gesture rotation]);
CGAffineTransform currentTransform = backgroundView.transform;
CGAffineTransform newTransform = CGAffineTransformRotate(currentTransform,rotation);
[backgroundView setTransform:newTransform];
lastRotation = [(UIRotationGestureRecognizer*)gesture rotation];
if (gesture.state == UIGestureRecognizerStateBegan || gesture.state == UIGestureRecognizerStateChanged)
{
scrollView.scrollEnabled = NO;
}
else if (gesture.state == UIGestureRecognizerStateEnded)
{
lastRotation = 0.0;
scrollView.scrollEnabled = YES;
return;
}
}
#pragma mark<UIScrollViewDelegate>
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return backgroundView;
}
#pragma mark<UIGetsureRecognizer>
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
{
return YES;
}
#end
After many days of struggling I found a definitive solution in order to use UIScrollView integrated zoom behavior together with UIRotationGestureRecognizer working like a charm. You have to add a container dummy view as subview of the scroll view, and put the UIImageView as subview of the container view. Afterthat, return the container view in the viewForZoomingInScrollView method and add the UIRotationGestureRecognizer to the scrollview, applying CGAffineTransformRotate to the UIImageView. Finally, return true in the shouldRecognizeSimultaneouslyWithGestureRecognizer method. In this way the scrollView will capture both the two fingers rotation gesture and the pinch to zoom gesture: the zoom will be applied to the dummy view and rotation to the uiimageview, without conflicts between transformations.
In code: let's think to have a UIViewController presenting a UIScrollView. We want to use scrollview's zoom behaviour out of the box together with UIImageView rotation.
1) The controller (or any other object) containing UIScrollView must conforms to UIGestureRecognizerDelegate protocol.
In myViewController.h
#interface myViewController : UIViewController < UIGestureRecognizerDelegate> {
}
2) Create a UIScrollView, add a dummy view as subview and finally add a UIImageView as subview of the dummy view.
In myViewController.m
//Scrollview
myScrollView=[[UIScrollView alloc] initWithFrame:CGRectMake(0,0, view.frame.size.width, view.frame.size.height)];
myScrollView.delegate=self;
[view addSubview:myScrollView];
//Dummy View
UIView *dummyView=[[UIView alloc] initWithFrame:CGRectMake(0, 0, myScrollView.frame.size.width, myScrollView.frame.size.height)];
[self addSubview:dummyView];
//ImageView
imageView=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, dummyView.frame.size.width, dummyView.frame.size.height)];
imageView.contentMode=UIViewContentModeScaleAspectFit;
[dummyView addSubview:imageView];
//Add rotation gesture to the scrollView
rotationGestureRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:#selector(handleRotate:)];
[myScrollView addGestureRecognizer:_rotationGestureRecognizer];
//Set the controller as delegate of the recognizer
rotationGestureRecognizer.delegate=self;
[...]
#pragma UIScrollViewDelegate
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
//Set the dummy view (imageview's superview) as view for zooming
return imageView.superview;
}
[...]
#pragma Mark - UIGestureRecognizerDelegate
- (BOOL) gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
//Make it possibile to recognize simultaneously pinch and rotation gestures
return TRUE;
}
[...]
- (IBAction) handleRotate:(UIRotationGestureRecognizer*)recognizer {
//Apply the rotation to imageView
imageView.transform = CGAffineTransformRotate(imageView.transform, recognizer.rotation);
recognizer.rotation = 0;
}
For simplyfing purposes, I wrote everything in the same controller. You are free to subclass the UIScrollView. Remember that the tricks are:
1) returning the container dummy view as viewForZoomingInScrollView so zoom will affect the container view and rotation will affect the uiimageview.
2) set the viewcontroller containing the scrollview as delegate of the rotation gesture recognizer and return TRUE for shouldRecognizeSimultaneouslyWithGestureRecognizer.
Add this to your .m
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
Also make sure you dont have exclusive touch enabled on any gesture recognizers.
Try to put you scalable/rotatable content in a subview of your content view. ( Maybe you must set the "clip content" property of your content view to true - not sure )
This way the scrollview is not concerned anymore by transformations, since its content view stays still.
If you have to display the clipped content ( if you rotate a square, for example, the corners go out the initial area), recompute your content view and update the scrollview.
Since you gave the code, I suggest to try:
//Scroll View's subview
backgroundViewHolder = [[UIView alloc] initWithFrame:scrollView.frame];
[backgroundViewHolder setBackgroundColor:[UIColor orangeColor]];
[scrollView backgroundViewHolder];
//Holder View's subview
backgroundView = [[UIView alloc] initWithFrame:backgroundViewHolder.bounds];
[backgroundViewHolder addSubview:backgroundView];
Everything else should remain the same. This is just an idea... Not sure it is the right answer.
Add this to your implement file, make it a UIGestureRecognizerDelegate.
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{
return YES;
}
rotationGeustureRecognozier.delegate = self;// (the implement file)

UIButton displaying a triangle

I have a UIButton and i want it to display a triangle. Is there a function to make it a triangle? Since im not using a UIView class im not sure how to make my frame a triangle.
ViewController(m):
- (IBAction)makeTriangle:(id)sender {
UIView *triangle=[[UIView alloc] init];
triangle.frame= CGRectMake(100, 100, 100, 100);
triangle.backgroundColor = [UIColor yellowColor];
[self.view addSubview: triangle];
Do i have to change my layer or add points and connect them to make a triangle with CGRect?
If im being unclear or not specific add a comment. Thank you!
A button is a subclass of UIView, so you can make it any shape you want using a CAShape layer. For the code below, I added a 100 x 100 point button in the storyboard, and changed its class to RDButton.
#interface RDButton ()
#property (strong,nonatomic) UIBezierPath *shape;
#end
#implementation RDButton
- (id)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
self.titleEdgeInsets = UIEdgeInsetsMake(30, 0, 0, 0); // move the title down to make it look more centered
self.shape = [UIBezierPath new];
[self.shape moveToPoint:CGPointMake(0,100)];
[self.shape addLineToPoint:CGPointMake(100,100)];
[self.shape addLineToPoint:CGPointMake(50,0)];
[self.shape closePath];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = self.shape.CGPath;
shapeLayer.fillColor = [UIColor yellowColor].CGColor;
shapeLayer.strokeColor = [UIColor blueColor].CGColor;
shapeLayer.lineWidth = 2;
[self.layer addSublayer:shapeLayer];
}
return self;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
if ([self.shape containsPoint:[touches.anyObject locationInView:self]])
[super touchesBegan:touches withEvent:event];
}
The touchesBegan:withEvent: override restricts the action of the button to touches within the triangle.
A view's frame is always a rect, which is a rectangle. Even if you apply a transform to it so it no longer looks like a rectangle, the view.frame property will still be a rectangle -- just the smallest possible rectangle that contains the new shape you have produced.
So if you want your UIButton to look like a triangle, the simplest solution is probably to set its type to UIButtonTypeCustom and then to set its image to be a png which shows a triangle and is transparent outside of the triangle.
Then the UIButton itself will actually be rectangle, but will look like a triangle.
If you want to get fancy, you can also customize touch delivery so that touches on the transparent part of the PNG are not recognized (as I believe they would be by default), but that might be a bit trickier.

UIView "stuck" in UITabBarController view top left corner

I'm initializing a loader subview to match the height, width and position of the UITabBar I'm using to wrap my app:
// In UITabBarController implementation
LoaderView *loaderView = [[LoaderView alloc] initWithFrame:[self tabBar].viewForBaselineLayout.frame];
[[self view] addSubview:loaderView];
//
// LoaderView.h
#import <UIKit/UIKit.h>
#interface LoaderView : UIView
#property (nonatomic, strong) UILabel *messageLabel;
#property (nonatomic, strong) NSString *message;
#property (nonatomic) CGRect frame;
- (void)createLabel;
- (void)drawLoader;
- (void)setText:(NSString *)newMessage;
- (void)show:(NSNotification *)notification;
#end
//
// LoaderView.m
#import "LoaderView.h"
#implementation LoaderView
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
[self drawLoader];
}
return self;
}
- (void)drawLoader
{
UIColor *semiOpaqueGray = [[UIColor alloc] initWithRed:0.0f green:0.0f blue:0.0f alpha:0.8f];
[self setBackgroundColor:semiOpaqueGray];
[self createLabel];
}
- (void)createLabel
{
_messageLabel = [[UILabel alloc] initWithFrame: CGRectMake(15,9,([self frame].size.width - 10), 30)];
_messageLabel.textColor = [[UIColor alloc] initWithWhite:1.0 alpha:1];
_messageLabel.backgroundColor = [[UIColor alloc] initWithWhite:1.0 alpha:0.0];
[self addSubview:_messageLabel];
}
#end
The frame struct represents this incoming frame data:
2013-09-16 07:48:35.552 ---[97825:a0b] {{0, 519}, {320, 49}}
// Ostensibly 0,519 origin point and 320,49 w/h
The result is this. The mostly opaque dark box can be spotted in the top left corner. It looks like it's being positioned by its center point of the loader to the top left most point of the screen:
I can make the size of the box change, but I can't seem to move it from that top left position. Further, I set an animation on it, and that animation adjusts the frame (sliding it up an down from the tab bar area). That seems to have no effect either.
Thanks in advance for your help.
You can gently add your loadingView your application window. After set the frame of loaderView.
[loadView setFrame:CGRectMake(0,0,self.frame.size.width.,self.frame.size.height)];
[self.window addSubview:loaderView];
Then after loading finished.
[self.window removeSubview:loaderView];
Your superview is the problem. If you're adding it to your UINavigationController then the y-axis likely won't respond nicely. Try using the primary view of your controller
loaderView.frame = CGRectMake(x, 514, 40, 320); // made up numbers
[self.mapView addSubview:loaderView];
Also you're accessing your tabBar. Try using UIDevice window for getting your width and inherit the height from your labels on the bottom (or nest the labels within your LoaderView)
Also look into actually using UITabBar for handling this.

cocoa NSTableView in CustomView in SplitView size don't adjust

I have a NSSplitView as my "Superview". In this SplitView is a Custom View with a NSTableView. I'm try to load my Custom View from a Controller class and then adjust the size of the custom view and the Table. But the table and or the custom view don't get resized. What i'm doing wrong?
Here is my controller class method where i load and set the size of the custom view:
// Header File
#property (weak) IBOutlet NSView *navigationView;
#property (strong) AppsNavigationViewController *navigationViewController;
// Implementation
- (void) initNavigationView :(id)viewControllerClass :(NSString*) viewNibName {
_navigationViewController = [[viewControllerClass alloc]
initWithNibName:viewNibName bundle:nil];
// add the current custom view to the parent view
[_navigationView addSubview:[_navigationViewController view]];
[[_navigationViewController view] setAutoresizingMask:
NSViewHeightSizable|NSViewWidthSizable];
// set the bounds of the custom view to the size of the parent view
[[_navigationViewController view] setBounds:[_navigationView bounds]];
[_navigationViewController setDelegate:self]; // not relevant
[_splitView adjustSubviews]; // checked. contains the _navigationView
}
And here is how it looks:
EDIT
I subclassed some views and draw different backgrounds. And it's definitely the custom view which don't get the size!
It seems maybe your table's frame is not at the origin of its super view. First, try setting the frame instead of the bounds and you could call this after you do that.
[[_navigationViewController view] setFrameOrigin:NSMakePoint(0,0)];
Normally though I usually set the frame/bounds like this because your superview's bounds may not be at {0,0} of its superview...
NSRect newFrame;
newFrame.origin.x = 0;
newFrame.origin.y = 0;
newFrame.size.width = [[someView superview] frame].size.width;
newFrame.size.height = [[someView superview] frame].size.height;
[someView setFrame:newFrame];

How to animate a CALayer attached to UIImageView?

I am using this code proposed by Bartosz to add a mask to an UIImageView. It works fine.
#import <QuartzCore/QuartzCore.h>
CALayer *mask = [CALayer layer];
mask.contents = (id)[[UIImage imageNamed:#"mask.png"] CGImage];
mask.frame = CGRectMake(0, 0, 320.0, 100.0);
yourImageView.layer.mask = mask;
yourImageView.layer.masksToBounds = YES;
In addition, I want to animate the mask, e.g. sliding the mask to the right, so that at the end of the animation, the mask is not applied to the UIImageView any more.
In my specific case, the mask uses a fully transparent image, so the UIImageView is not visible at the initial state (which works fine), but is expected to be so at the end of the animation. However, the idea may be reused to any other use case were masks need to be animated.
The idea is to manipulate the x-origin portion of the frame of the mask. So, I came up with this code:
[UIView animateWithDuration: 0.2
delay: 0
options: UIViewAnimationCurveEaseInOut
animations:^{
CGRect maskFrame = yourImageView.layer.mask.frame;
maskFrame.origin.x = 320.0;
yourImageView.layer.mask.frame = maskFrame;
}
completion:^(BOOL finished){}];
Unfortunately, the mask is applied to the whole UIImageView at any time, it's not sliding to the right.
UPDATE 1:
This is the code I am actually using the set up the view and mask: It's a UITableViewCell.
APPCell.m (APPCell.h "extends" UITableViewCell)
#import "APPCell.h"
#import <QuartzCore/QuartzCore.h>
#interface APPCell()
#property (strong, nonatomic) UIImageView *menu;
#property (strong, nonatomic) CALayer *menuMask;
...
#end
#implementation APPCell
...
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self.menu = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320.0, 88.0)];
[self.menu setBackgroundColor:[UIColor clearColor]];
[self.menu setImage:[UIImage imageNamed:#"cell_back"]];
[self addSubview:self.menu];
self.menuMask = [CALayer layer];
self.menuMask.contents = (id)[[UIImage imageNamed:#"cell_mask"] CGImage];
self.menuMask.frame = CGRectMake(0, 0, 320.0, 88.0);
self.menu.layer.mask = self.menuMask;
self.menu.layer.masksToBounds = YES;
}
...
Instead of animating with the help of UIKit, I am now using implicit animation of CoreAnimation to move the mask layer:
APPCell.m
...
- (void)swipeLeft
{
self.menuMask.position = CGPointMake(-320.0, 0.0);
}
...
I can confirm that swipeLeft is called. I expect the mask "to be gone" and to see the [UIImage imageNamed:#"cell_back"]], which I do when I uncomment self.menu.layer.mask = self.menuMask.
Solution:
Instead of setting the content on the CALayer, I set the background color to white. This is the code I am using:
self.menuSubMenuMask = [CALayer layer];
self.menuSubMenuMask.backgroundColor = [[UIColor whiteColor] CGColor];
self.menuSubMenuMask.frame = CGRectMake(320.0, 0.0, 320.0, 88.0);
self.tableCellSubMenu.layer.mask = self.menuSubMenuMask;
self.tableCellSubMenu.layer.masksToBounds = YES;
In order to show the UIImageView the CALayer is applied to, the CALayer must NOT be "above" the UIImageView.
Animation with UIKit of UIViews is much more limited than using Core Animation directly. In particular what you are trying to animate is not one of animatable properties of a UIView. In addition as clarified in the View Programming Guide for iOS:
Note: If your view hosts custom layer objects—that is, layer objects without an associated view—you must use Core Animation to animate any changes to them.
This is the case in your example. You have added a CALayer to your view and UIKit will not be able to animate the result for you. On the other hand you can use Core Animation directly to animate the motion of your mask layer. You should be able to do this easily using implicit animation as described in the Core Animation Programming Guide. Please note that from the list of CALayer Animatable Properties that frame is not animatable. Instead you should use position.
You can achieve something you want by using CATransition, although this might not be the solution you want:
1) At first, set mask for your layer just as you did
2) When you want to remove mask and reveal your image, use the following code:
CATransition* transition = [CATransition animation];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromRight;
transition.duration = 1.0;
[mask addAnimation:transition forKey:kCATransition];
imageView.layer.mask.contents = [UIImage imageNamed:#"black.png"].CGImage;
The main trick here - we created transition animation for our mask layer, so this animation will be applied when you change any (i'm not sure about any) property of mask layer. Now we set mask's content to completely black image to remove masking at all - now we've got smooth pushing animation where our masked image is going to the left and unmasked image is getting into its place
The easiest way is to use CoreAnimation itself:
CGPoint fromPoint = mask.position;
CGPoint toPoint = CGPointMake(fromPoint.x*3.0, fromPoint.y);
mask.position = toPoint; // CoreAnimation animations do *not* persist
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"position"];
animation.fromValue = [NSValue valueWithCGPoint:fromPoint];
animation.toValue = [NSValue valueWithCGPoint:toPoint];
animation.duration = 4.0f;
[mask addAnimation:animation forKey:#"position"];