How would I do this iOS animation on OSX? - macos

I have a very simple animation in iOS that fades a view, resizes a container to fit another view, then fades that other view back in. It's quite easy to do and very straightforward.
I've been trying to do something pretty much exactly like this on OSX, but I haven't been able to figure out how to do it. The animation stuff on OSX feels so clunky and difficult compared to iOS.
Any help would be much appreciated!!
Thanks! :)
// Fade out viewOne, resize frame to fit viewTwo, fade in viewTwo
[UIView animateWithDuration: 0.15
animations: ^{
[viewOne setAlpha:0.0];
}
completion: ^(BOOL finished) {
[UIView animateWithDuration: 0.2
animations: ^{
[self setFrame: [viewTwo frame]];
}
completion: ^(BOOL finished) {
[viewTwo setAlpha: 0.0];
[self addSubview: viewTwo];
[UIView animateWithDuration: 0.15
animations: ^{
[viewTwo setAlpha:1.0];
}];
}];
}];

I've written a small class that uses blocks to accomplish essentially the same thing as above when using the animator proxy on OSX.
Please note, this class is not thread safe and hasn't undergone any specific or stressful tests.
//Interface
#interface MZAnimator : NSObject{}
+ (void)animateWithDuration:(NSTimeInterval)duration
animation:(void (^)(void))animationBlock;
+ (void)animateWithDuration:(NSTimeInterval)duration
animation:(void (^)(void))animationBlock
completion:(void (^)(void))completionBlock;
#end
//Implementation
#interface MZAnimator ()
+ (void)runEndBlock:(void (^)(void))completionBlock;
#end
#implementation MZAnimator
+ (void)animateWithDuration:(NSTimeInterval)duration
animation:(void (^)(void))animationBlock
{
[self animateWithDuration:duration animation:animationBlock completion:nil];
}
+ (void)animateWithDuration:(NSTimeInterval)duration
animation:(void (^)(void))animationBlock
completion:(void (^)(void))completionBlock
{
[NSAnimationContext beginGrouping];
[[NSAnimationContext currentContext] setDuration:duration];
animationBlock();
[NSAnimationContext endGrouping];
if(completionBlock)
{
id completionBlockCopy = [[completionBlock copy] autorelease];
[self performSelector:#selector(runEndBlock:) withObject:completionBlockCopy afterDelay:duration];
}
}
+ (void)runEndBlock:(void (^)(void))completionBlock
{
completionBlock();
}
#end

You can use:
[NSAnimationContext runAnimationGroup:^(NSAnimationContext *context) {
[context setDuration:2.0];
//Animation code
} completionHandler:^{
//Completion Code
NSLog(#"Completed");
}];

Related

Xcode custom segue - Opposite of Cover Vertical (top to bottom) - COMPLETE NEWBIE

I have been trying for some time to create a custom segue that does the opposite of the cover vertical (to create a from top to bottom effect animation).I had looked through other questions, google and youtube but cannot get it working.I am completely new to the classes etc. so any help in a step by step guide or video would be so good. I believe that this URL is trying to do something similar to what I want:
http://jrwren.wrenfam.com/blog/2012/02/01/storyboard-custom-segue-for-custom-pushviewcontroller-animation/ , I just cannot get it working.
If any of you know a way to create a segue that is a top to bottom version of the cover vertical segue could you please help me out?
Well, you would want to create a subclass of UIStoryBoardSegue, like the walkthrough shows you, however under the Storyboard class' .m file(implementation) you would want the following code as your -(void)perform: method -
-(void)perform{
UIViewController *sourceViewController = (UIViewController *) self.sourceViewController;
UIViewController *destinationViewController = (UIViewController *) self.destinationViewController;
[sourceViewController.view addSubview:destinationViewController.view];
[destinationViewController.view setFrame:sourceViewController.view.window.frame];
[destinationViewController.view setTransform:CGAffineTransformMakeTranslation(0, -sourceViewController.view.frame.size.height)];
[destinationViewController.view setAlpha:1.0];
[UIView animateWithDuration:0.75
delay:0.0
options:UIViewAnimationOptionTransitionFlipFromTop
animations:^{
[destinationViewController.view setTransform:CGAffineTransformMakeTranslation(0, 0)];
[destinationViewController.view setAlpha:1.0];
}
completion:^(BOOL finished){
[destinationViewController.view removeFromSuperview];
[sourceViewController presentViewController:destinationViewController animated:NO completion:nil];
}];}
Hopefully this is helpful.
Building on #dmason82's answer, translating to Swift, and simplifying a little, this works for me:
class UIStoryboardSegueFromTop: UIStoryboardSegue {
override func perform() {
let src = self.sourceViewController as UIViewController
let dst = self.destinationViewController as UIViewController
src.view.superview?.insertSubview(dst.view, aboveSubview: src.view)
dst.view.transform = CGAffineTransformMakeTranslation(0, -src.view.frame.size.height)
UIView.animateWithDuration(1.0, animations: {
dst.view.transform = CGAffineTransformMakeTranslation(0, 0)
}) { (Finished) in
src.presentViewController(dst, animated: false, completion: nil)
}
}
}
Here is my implementation of an Opposite Cover Vertical Segue using Storyboards
https://github.com/viccarre/OppositeCoverVerticalSegue
Hi I just tried the two other answer but it doesn't work as you ask.
In order to create a custom segue looking the exact reverse of cover vertical (modal segue default) I created this code :
- (void)perform
{
UIViewController *sourceViewController = self.sourceViewController;
UIViewController *destinationViewController = self.destinationViewController;
[sourceViewController presentViewController:destinationViewController animated:NO completion:nil];
[destinationViewController.view addSubview:sourceViewController.view];
[sourceViewController.view setTransform:CGAffineTransformMakeTranslation(0, 0)];
[sourceViewController.view setAlpha:1.0];
[UIView animateWithDuration:0.75
delay:0.0
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
[sourceViewController.view setTransform:CGAffineTransformMakeTranslation(0,destinationViewController.view.frame.size.height)];
[sourceViewController.view setAlpha:1.0];
}
completion:^(BOOL finished){
[sourceViewController.view removeFromSuperview];
}];
}
#end
To complete dmason's answer and have your controller unwind in the opposite direction - going back up from where it came, do this in the presented view controller:
[UIView animateWithDuration:0.75
delay:0.0
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
[self.view setTransform:CGAffineTransformMakeTranslation(0, -self.view.frame.size.height)];
}
completion:^(BOOL finished){
[self dismissViewControllerAnimated:NO completion:nil];
}
];
Bergy's answer didn't work for me.
dmason's answer is great, and if you want to add an unwind segue so your modal animates properly when it's closed, your perform action could look like this (in a new custom segue class)
- (void)perform
{
UIViewController *sourceViewController = self.sourceViewController;
UIViewController *destinationViewController = self.destinationViewController;
[sourceViewController dismissViewControllerAnimated:NO completion:nil];
[destinationViewController.view addSubview:sourceViewController.view];
[UIView animateWithDuration:0.75
animations:^{
sourceViewController.view.center = CGPointMake(sourceViewController.view.center.x, sourceViewController.view.center.y-600);
}
completion:^(BOOL finished){
[sourceViewController.view removeFromSuperview];
}
];
}
I advise you to use the Hero library to achieve this. It adds a lot of animations and transitions, notably between view controllers : https://github.com/lkzhao/Hero/blob/master/README.md
There is an transition called "Cover", and you can choose the direction (left, top, right, bottom)

setNeedsDisplay for DrawRect after button press

I have this in a custom class on my NSView and when I press a button using my drawMyRec IBAction I want to change the color of my NSRect however this is not working, can anyone help?
#import "myView.h"
#implementation myView
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
RectColor = [[NSColor blackColor] init];
}
return self;
}
- (IBAction)drawMyRec:(id)sender;
{
NSLog(#"pressed");
RectColor = [[NSColor blueColor] init];
[self setNeedsDisplay:YES];
}
- (void)drawRect:(NSRect)dirtyRect
{
NSRectFill(dirtyRect);
[RectColor set];
}
#end
Your drawRect function is incorrect. change to this:
- (void)drawRect:(NSRect)dirtyRect
{
[RectColor set];
NSRectFill(dirtyRect);
}
First, why are you calling -init on an NSColor? Second, you're setting the color after you've drawn the rect, so it won't take affect until the next redraw. 3rd, what's dirtyRect when -drawRect: is called? Why not just fill the entire rect regardless of what's dirty?

Keyboard behavior when forced open with inputAccessoryView?

I have a device connected to my iPad that is acting as an external keyboard, however, I still need a soft keyboard in my program. I have had some luck using the following article: Show iphone soft keyboard even thought a hardware keyboard is connected, but iOS 5 has broken this method. The bottom of the soft keyboard is slightly cut off in most views, but others only half the keyboard appears inside the window and not where you would expect it to.
All of the following code works in my AppDelegate.m file in iOS4, but not in iOS5.
forceKeyboard is called after UITextFieldTextDidBeginEditingNotification is sent.
-(void) textFieldBegan: (NSNotification *) theNotification
{
UITextField *theTextField = [theNotification object];
theTextField.inputAccessoryView = inputAccessoryView;
[self performSelector:#selector(forceKeyboard) withObject:nil afterDelay:0];
}
//Change the inputAccessoryView frame
-(void) forceKeyboard
{
inputAccessoryView.superview.frame = CGRectMake(0, 502, 1024, 265);
int movementDistance = 1;
float movementDuration = 0.3f;
[UIView beginAnimations: #"kb_anim_open" context: nil];
[UIView setAnimationBeginsFromCurrentState: YES];
[UIView setAnimationDuration: movementDuration];
inputAccessoryView.superview.frame = CGRectOffset(inputAccessoryView.superview.frame, 0, movementDistance);
[UIView commitAnimations];
}
Close Keyboard is called after UITextFieldTextDidEndEditingNotification is sent.
-(void) textFieldEnd: (NSNotification *) theNotification
{
UITextView *theTextView = [theNotification object];
[theTextView resignFirstResponder];
[self performSelector:#selector(forceCloseKeyboard) withObject:nil afterDelay:0];
}
-(void) forceCloseKeyboard
{
inputAccessoryView.superview.frame = CGRectMake(0, 502, 1024, 265);
int movementDistance = 502;
float movementDuration = 0.3f;
[UIView beginAnimations: #"kb_anim_close" context: nil];
[UIView setAnimationBeginsFromCurrentState: YES];
[UIView setAnimationDuration: movementDuration];
inputAccessoryView.superview.frame = CGRectOffset(inputAccessoryView.superview.frame, 0, movementDistance);
[UIView commitAnimations];
}
Any ideas on how I can tame a soft keyboard would be greatly appreciated; I've tried wrestling with the superview.frame values for awhile but with no luck.
Thanks for reading.
UPDATE
I have figured out a setup that opens and closes the keyboard in iOS 4 and 5, but does not animate. Again, this is all in the AppDelegate where "textFieldBegan" and "textFieldEnd" are called by notifications sent when a user begins and ends editing respectively.
-(void) textFieldBegan: (NSNotification *) theNotification
{
UITextField *theTextField = [theNotification object];
if (!inputAccessoryView) {
inputAccessoryView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 1024, 1)];
}else{
inputAccessoryView.frame = CGRectMake(0, 0, 1024, 1);
}
theTextField.inputAccessoryView = inputAccessoryView;
[self performSelector:#selector(forceKeyboard) withObject:nil afterDelay:0];
}
-(void) textFieldEnd: (NSNotification *) theNotification
{
NSString *classstr = NSStringFromClass([[theNotification object] class]);
UITextView *theTextView = [theNotification object];
[self performSelector:#selector(forceCloseKeyboard) withObject:nil afterDelay:0];
[theTextView resignFirstResponder];
}
//Change the inputAccessoryView frame
-(void) forceKeyboard
{
//default center = 512, 591
inputAccessoryView.superview.frame = CGRectMake(0, 415, 1024, 353);
[UIView animateWithDuration:0.3 animations: ^ { [inputAccessoryView.superview transform]; }];
}
-(void) forceCloseKeyboard //Unnecessary?
{
inputAccessoryView.frame = CGRectMake(0, 0, 1024, 0);
[UIView animateWithDuration:0.3 animations: ^ { [inputAccessoryView transform]; }];
}
It looks as if the "forceCloseKeyboard" method isn't really doing anything as it looks like when the textField resigns responder it closes the keyboard anyway. I leave it here in case someone can come up with a way to animate the keyboard opening and closing.

How to flash a custom NSMenuItem view after selection?

I need to assign a view to an NSMenuItem and do some custom drawing. Basically, I'm adding a little delete button next to the currently selected menu item, among other things. But I want my custom menu item to look and behave like a regular menu item in all other ways. According to the doc:
A menu item with a view does not draw
its title, state, font, or other
standard drawing attributes, and
assigns drawing responsibility
entirely to the view.
Ok, so I had to duplicate the look of the state column and the selection gradient, which wasn't that hard. The part I'm having trouble with is the way the menu item "flashes" or "blinks" after it is selected. I'm using an NSTimer to try to mimic this little animation, but it just feels off. How many times does it blink? What time interval should I use? I've experimented a lot and it just feels out of whack.
Has anyone done this before or have other suggestions on how to add a button to a menu item? Maybe there should be a stack exchange site just for custom cocoa drawing...
I know this is over a year old, but this was the first hit on my Google search and was unanswered, so I'm posting my answer for sake of those still looking for a solution.
For my app, I used Core Animation with a custom NSView for the NSMenuItem view. I created a new layer-backed view, set the background color, and added it to my custom view. I then animated the layer (the flashing part). Then in the -(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag callback, I removed the overlay and closed the menu. This doesn't perfectly match the default NSMenu's flash, but I wanted a 37Signals/Stack Overflow Yellow Fade Technique, so it works for me. Here it is in code:
-(void) mouseUp:(NSEvent *)theEvent {
CALayer *layer = [CALayer layer];
[layer setDelegate:self];
[layer setBackgroundColor:CGColorCreateGenericRGB(0.0, 0.0, 1.0, 1.0)];
selectionOverlayView = [[NSView alloc] init];
[selectionOverlayView setWantsLayer:YES];
[selectionOverlayView setFrame:self.frame];
[selectionOverlayView setLayer:layer];
[[selectionOverlayView layer] setNeedsDisplay];
[selectionOverlayView setAlphaValue:0.0];
[self addSubview:selectionOverlayView];
CABasicAnimation *alphaAnimation1 = [CABasicAnimation animationWithKeyPath: #"alphaValue"];
alphaAnimation1.beginTime = 0.0;
alphaAnimation1.fromValue = [NSNumber numberWithFloat: 0.0];
alphaAnimation1.toValue = [NSNumber numberWithFloat: 1.0];
alphaAnimation1.duration = 0.07;
CABasicAnimation *alphaAnimation2 = [CABasicAnimation animationWithKeyPath: #"alphaValue"];
alphaAnimation2.beginTime = 0.07;
alphaAnimation2.fromValue = [NSNumber numberWithFloat: 1.0];
alphaAnimation2.toValue = [NSNumber numberWithFloat: 0.0];
alphaAnimation2.duration = 0.07;
CAAnimationGroup *selectionAnimation = [CAAnimationGroup animation];
selectionAnimation.delegate = self;
selectionAnimation.animations = [NSArray arrayWithObjects:alphaAnimation1, alphaAnimation2, nil];
selectionAnimation.duration = 0.14;
[selectionOverlayView setAnimations:[NSDictionary dictionaryWithObject:selectionAnimation forKey:#"frameOrigin"]];
[[selectionOverlayView animator] setFrame:[selectionOverlayView frame]];
}
-(void) animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {
[selectionOverlayView removeFromSuperview];
NSMenuItem *enclosingMenuItem = [self enclosingMenuItem];
NSMenu *enclosingMenu = [enclosingMenuItem menu];
[enclosingMenu cancelTracking];
[enclosingMenu performActionForItemAtIndex:[enclosingMenu indexOfItem:enclosingMenuItem]];
}
It is actually possible to have your custom view flash like a regular NSMenuItem without implementing the animation manually.
Note: this uses a private API and also fixes a handful of other strange NSMenuItem quirks related to custom views.
NSMenuItem.h
#import <AppKit/AppKit.h>
#interface NSMenuItem ()
- (BOOL)_viewHandlesEvents;
#end
Bridging Header
#import "NSMenuItem.h"
MenuItem.swift
class MenuItem: NSMenuItem {
override func _viewHandlesEvents() -> Bool {
return false
}
}
This API really ought to be public, and if you're not developing for the App Store, it might be worth having a look at.
Here is my code that flashes a custom menu item.
int16_t fireTimes;
BOOL isSelected;
- (void)mouseEntered:(NSEvent*)event
{
isSelected = YES;
}
- (void)mouseUp:(NSEvent*)event {
fireTimes = 0;
isSelected = !isSelected;
[self setNeedsDisplay:YES];
NSTimer *timer = [NSTimer timerWithTimeInterval:0.05 target:self selector:#selector(animateDismiss:) userInfo:nil repeats:YES];
[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSEventTrackingRunLoopMode];
}
-(void)animateDismiss:(NSTimer *)aTimer
{
if (fireTimes <= 2) {
isSelected = !isSelected;
[self setNeedsDisplay:YES];
} else {
[aTimer invalidate];
[self sendAction];
}
fireTimes++;
}
- (void)drawRect:(NSRect)dirtyRect {
if (isSelected) {
NSRect frame = NSInsetRect([self frame], -4.0f, -4.0f);
[[NSColor selectedMenuItemColor] set];
NSRectFill(frame);
[itemNameFld setTextColor:[NSColor whiteColor]];
} else {
[itemNameFld setTextColor:[NSColor blackColor]];
}
}
- (void)sendAction
{
NSMenuItem *actualMenuItem = [self enclosingMenuItem];
[NSApp sendAction:[actualMenuItem action] to:[actualMenuItem target] from:actualMenuItem];
NSMenu *menu = [actualMenuItem menu];
[menu cancelTracking];
// [self setNeedsDisplay:YES]; // I'm not sure of this
}

how to create horizontal spinner+timer like this?

is it possible to create a design something like this?
any help regarding this would be very helpful for me.the functionality i want is to rotate the wheel left-to-right or right to left for selecting time...yellow is selection color and red is shows the remaining time when countdown is running
Use a Gallery view object. Just fill it with the images you want to scroll horizontally.
This would be a good approximation to what you're looking to achieve.
See my video
http://www.youtube.com/watch?v=4acFshAlGJ8
I have use
https://lh3.googleusercontent.com/-WZEDMSmfrK0/TeeD93t8qYI/AAAAAAAAAKw/X9D6jRkLfLk/s800/MUKScale.png
image as Scale in the scrollView this is an incomplete example just to show how can it is achievable.
here is some helpful piece of code,
in this approx everything is static but for the real work one should to work more,
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:scrollView];
UIImageView *backImgg = [[UIImageView alloc] initWithFrame:CGRectMake(x,y,886,15)];
[backImgg setImage: [UIImage imageNamed:#"MUKScale.png"]];//Image in the link above
[scrollView addSubview:backImgg];
[backImgg release];
[scrollView setContentSize:CGSizeMake(886,15)];
return;
}
NSTimer *timer ;
float timeSet =0 ;
-(IBAction) btnPressed
{
timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:#selector(showTimeInLbl) userInfo:nil repeats:YES];
}
-(void)showTimeInLbl
{
CGRect visibleRect;
visibleRect.origin = scrollView.contentOffset;
visibleRect.size = scrollView.contentSize;
NSLog( #"Visible rect: %#", NSStringFromCGRect(visibleRect) );
float time = visibleRect.origin.x / 8;
timeSet = time;
lblTime.text = [NSString stringWithFormat:#"%f",time];
[UIView animateWithDuration: .1
animations: ^{
[scrollView setContentOffset:CGPointMake(visibleRect.origin.x - 8,0) animated:NO];
}completion: ^(BOOL finished){
}
];
timeSet-=0.1;
lblTime.text = [NSString stringWithFormat:#"%f",timeSet];
if(timeSet<=0)
{
[timer invalidate];
lblTime.text = #"0";
[UIView animateWithDuration: .1
animations: ^{
[scrollView setContentOffset:CGPointMake(0,0) animated:NO];
}completion: ^(BOOL finished){
}
];
}
}
You can use a Never Ended scrollView (For example this you have in it like off paging).
Now by this you will achieve the scale and by using page no or coordinates of the scrollview you can find the scale reading to show on above.
On start count down create animation of UIView contentOffset CGPointMake(10, 100).
for example:
[UIView animateWithDuration: 1.5 /* Give Duration which was also on top */
animations: ^{
[scrollView setContentOffset:CGPointMake(0,0) animated:NO];
}completion: ^(BOOL finished){ }];

Resources