iOS Project popup Animation II
Last Update:2015-06-18
Source: Internet
Author: User
<span id="Label3"></p><p><p>In the iOS project pop-up animation is only implemented also function, and does not embody the object-oriented thinking, today try to encapsulate it, the content of the popup view can be customized, here is just uidatepicker to demonstrate</p></p><p><p>I'm uploading it to github, https://github.com/ywcui/YvanDatePicker.git.</p></p><p><p>first, a new class Ywdatepicker integrated UIView</p></p><pre><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">YvanDatePicker.h</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span><UIKit/UIKit.h><span style="color: #000000;"><span style="color: #000000;">typedef</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>(^selectdate) (nsdate *<span style="color: #000000;"><span style="color: #000000;">date);</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span><span style="color: #000000;"><span style="color: #000000;">Yvandatepicker:uiview</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Simple Interest</span></span>+ (yvandatepicker *<span style="color: #000000;"><span style="color: #000000;">) sharedmanager;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Block Pass value get selection time</span></span><span style="color: #000000;"><span style="color: #000000;">@property (nonatomic,strong) selectdate selectdate;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">time selection controls to set properties</span></span>@property (nonatomic,strong) Uidatepicker *<span style="color: #000000;"><span style="color: #000000;">datePicker;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">window Full Screen display</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) showinwindow;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Display in view</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) view;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">in the parent view, the relative position is frame</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) View withframe: (cgrect) frame;</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Vanishing View</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) dismissview;</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><pre><span style="color: #0000ff;"><span style="color: #0000ff;">#define</span></span>MaxHeight [uiscreen Mainscreen].bounds.size.height<span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">YvanDatePicker.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span><span style="color: #000000;"><span style="color: #000000;">Yvandatepicker ()</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@implementation</span></span><span style="color: #000000;"><span style="color: #000000;">Yvandatepicker</span></span>+ (yvandatepicker *<span style="color: #000000;"><span style="color: #000000;">) sharedmanager{</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Static</span></span>Yvandatepicker *sharedaccountmanagerinstance =<span style="color: #000000;"><span style="color: #000000;">nil; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Static</span></span><span style="color: #000000;"><span style="color: #000000;">dispatch_once_t predicate; Dispatch_once (</span></span>&predicate, ^<span style="color: #000000;"><span style="color: #000000;">{sharedaccountmanagerinstance</span></span>=<span style="color: #000000;"><span style="color: #000000;">[[self alloc] init]; Sharedaccountmanagerinstance.backgroundcolor</span></span>=[uicolor colorwithwhite:<span style="color: #800080;"><span style="color: #800080;">0.5</span></span>Alpha<span style="color: #800080;"><span style="color: #800080;">0.4</span></span><span style="color: #000000;"><span style="color: #000000;">]; }); </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">sharedaccountmanagerinstance;}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) showinwindow{[self showinview:[uiapplication sharedapplication].keywindow];}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) view{[self Showinview:view withframe:cgrectmake (</span></span><span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">, view.frame.size.width, view.frame.size.height)]; }</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">the position of the frame relative to the parent view</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) View Withframe: (cgrect) frame; { </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Here you can customize the view</span></span>Self.frame=<span style="color: #000000;"><span style="color: #000000;">cgrectmake (frame.origin.x, maxheight, frame.size.width, frame.size.height); [UIView animatewithduration:</span></span><span style="color: #800080;"><span style="color: #800080;">0.3</span></span>Delay<span style="color: #800080;"><span style="color: #800080;">0</span></span>Options:uiviewanimationoptioncurveeaseout animations:^<span style="color: #000000;"><span style="color: #000000;">{self.frame</span></span>=<span style="color: #000000;"><span style="color: #000000;">frame; } completion:nil]; UITapGestureRecognizer</span></span>*tapgesture=<span style="color: #000000;"><span style="color: #000000;">[[uitapgesturerecognizer alloc]initwithtarget:self action: @selector (dismissview)]; [self addgesturerecognizer:tapgesture]; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(_datepicker==<span style="color: #000000;"><span style="color: #000000;">Nil) {_datepicker</span></span>=<span style="color: #000000;"><span style="color: #000000;">[[uidatepicker alloc]init]; _datepicker.locale</span></span>=[[nslocale Alloc]initwithlocaleidentifier:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">ZH_HANS_CN</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; _datepicker.datepickermode</span></span>=<span style="color: #000000;"><span style="color: #000000;">uidatepickermodedate; _datepicker.timezone</span></span>=<span style="color: #000000;"><span style="color: #000000;">[nstimezone defaulttimezone]; } _datepicker.frame</span></span>=cgrectmake (<span style="color: #800080;"><span style="color: #800080;">0</span></span>, frame.size.height-<span style="color: #800080;"><span style="color: #800080;">216</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">); [self addsubview:_datepicker]; [view addsubview:self];}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Dismissview{_selectdate (_datepicker.date); [UIView animatewithduration:</span></span><span style="color: #800080;"><span style="color: #800080;">0.3</span></span>Delay<span style="color: #800080;"><span style="color: #800080;">0</span></span>Options:uiviewanimationoptioncurveeaseout animations:^<span style="color: #000000;"><span style="color: #000000;">{self.frame</span></span>=cgrectmake (<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">, maxheight, self.frame.size.width, self.frame.size.height); } completion:</span></span>^<span style="color: #000000;"><span style="color: #000000;">(BOOL finished) {[self removefromsuperview]; }]; }</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><p><p>second, Call</p></p><pre><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">VIEWCONTROLLER.M</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Yvandatepicker</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Created by city--online on 15/6/18.</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Copyright (c) 2015 Yvancui. All Rights Reserved.</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">ViewController.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">YvanDatePicker.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span><span style="color: #000000;"><span style="color: #000000;">Viewcontroller ()</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@implementation</span></span><span style="color: #000000;"><span style="color: #000000;">Viewcontroller</span></span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Viewdidload {[super viewdidload]; Self.navigationItem.rightBarButtonItem</span></span>=[[uibarbuttonitem alloc]initwithtitle:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">Popup</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">style:uibarbuttonitemstyledone target:self action: @selector (leftclick)];}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Leftclick{yvandatepicker</span></span>*picker=<span style="color: #000000;"><span style="color: #000000;">[yvandatepicker sharedmanager]; Picker.selectdate</span></span>=^ (nsdate *<span style="color: #000000;"><span style="color: #000000;">Date) {NSLog (</span></span><span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">%@</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">, date); };</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">1. Set the frame in the parent view</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">cgrect frame=cgrectmake (ten, self.view.bounds.size.height-260, self.view.bounds.size.width-20, 260);</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">[picker ShowInView:self.view withframe:frame];</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">2.Window Display</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">[picker showinwindow];</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span> <span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">3.View Full Screen display</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">[picker showInView:self.view]; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">4. Frame relative to Window</span></span>CGRect Frame1=cgrectmake (<span style="color: #800080;"><span style="color: #800080;">0</span></span>, [uiapplication sharedapplication].keywindow.bounds.size.height-<span style="color: #800080;"><span style="color: #800080;">260</span></span>, [uiapplication sharedapplication].keywindow.bounds.size.width,<span style="color: #800080;"><span style="color: #800080;">260</span></span><span style="color: #000000;"><span style="color: #000000;">); [picker showinview:[uiapplication Sharedapplication].keywindow withframe:frame1]; }</span></span>- (<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) didreceivememorywarning {[super didreceivememorywarning]; </span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">Dispose of any resources the can be Recreated.</span></span><span style="color: #000000;"><span style="color: #000000;">}</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><p><p>third, the Display effect</p></p><p><p></p></p><p><p>This can also be further optimized by adding a tag value that prevents the pop-up from continuing to click</p></p><pre><span style="color: #0000ff;"><span style="color: #0000ff;">#define</span></span>MaxHeight [uiscreen Mainscreen].bounds.size.height<span style="color: #0000ff;"><span style="color: #0000ff;">#import</span></span> <span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #800000;"><span style="color: #800000;">YvanDatePicker.h</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@interface</span></span><span style="color: #000000;"><span style="color: #000000;">yvandatepicker () @property (nonatomic,assign) BOOL openflag;</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@implementation</span></span><span style="color: #000000;"><span style="color: #000000;">Yvandatepicker</span></span>+ (yvandatepicker *<span style="color: #000000;"><span style="color: #000000;">) sharedmanager{</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Static</span></span>Yvandatepicker *sharedaccountmanagerinstance =<span style="color: #000000;"><span style="color: #000000;">nil; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">Static</span></span><span style="color: #000000;"><span style="color: #000000;">dispatch_once_t predicate; Dispatch_once (</span></span>&predicate, ^<span style="color: #000000;"><span style="color: #000000;">{sharedaccountmanagerinstance</span></span>=<span style="color: #000000;"><span style="color: #000000;">[[self alloc] init]; Sharedaccountmanagerinstance.backgroundcolor</span></span>=[uicolor colorwithwhite:<span style="color: #800080;"><span style="color: #800080;">0.5</span></span>Alpha<span style="color: #800080;"><span style="color: #800080;">0.4</span></span><span style="color: #000000;"><span style="color: #000000;">]; }); </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">sharedaccountmanagerinstance;}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) showinwindow{[self showinview:[uiapplication sharedapplication].keywindow];}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) view{[self Showinview:view withframe:cgrectmake (</span></span><span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">, view.frame.size.width, view.frame.size.height)]; }</span></span><span style="color: #008000;"><span style="color: #008000;">//</span></span><span style="color: #008000;"><span style="color: #008000;">the position of the frame relative to the parent view</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span>) Showinview: (uiview*<span style="color: #000000;"><span style="color: #000000;">) View Withframe: (cgrect) frame; { </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span><span style="color: #000000;"><span style="color: #000000;">(_openflag) {[self dismissview]; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">return</span></span><span style="color: #000000;"><span style="color: #000000;">; } _openflag</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">true</span></span><span style="color: #000000;"><span style="color: #000000;">; Self.frame</span></span>=cgrectmake (frame.origin.x,-<span style="color: #000000;"><span style="color: #000000;">frame.size.height, frame.size.width, frame.size.height); [UIView animatewithduration:</span></span><span style="color: #800080;"><span style="color: #800080;">0.5</span></span>Delay<span style="color: #800080;"><span style="color: #800080;">0</span></span>Options:uiviewanimationoptioncurveeaseout animations:^<span style="color: #000000;"><span style="color: #000000;">{self.frame</span></span>=cgrectmake (frame.origin.x,<span style="color: #800080;"><span style="color: #800080;">104</span></span><span style="color: #000000;"><span style="color: #000000;">, frame.size.width, frame.size.height);; } completion:nil]; [UIView animatewithduration:</span></span><span style="color: #800080;"><span style="color: #800080;">0.3</span></span>Delay<span style="color: #800080;"><span style="color: #800080;">0.4</span></span>Options:uiviewanimationoptioncurveeaseout animations:^<span style="color: #000000;"><span style="color: #000000;">{self.frame</span></span>=cgrectmake (frame.origin.x,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">, frame.size.width, frame.size.height);; } completion:nil]; UITapGestureRecognizer</span></span>*tapgesture=<span style="color: #000000;"><span style="color: #000000;">[[uitapgesturerecognizer alloc]initwithtarget:self action: @selector (dismissview)]; [self addgesturerecognizer:tapgesture]; </span></span><span style="color: #0000ff;"><span style="color: #0000ff;">if</span></span>(_datepicker==<span style="color: #000000;"><span style="color: #000000;">Nil) {_datepicker</span></span>=<span style="color: #000000;"><span style="color: #000000;">[[uidatepicker alloc]init]; _datepicker.locale</span></span>=[[nslocale Alloc]initwithlocaleidentifier:<span style="color: #800000;"><span style="color: #800000;">@"</span></span><span style="color: #800000;"><span style="color: #800000;">ZH_HANS_CN</span></span><span style="color: #800000;"><span style="color: #800000;">"</span></span><span style="color: #000000;"><span style="color: #000000;">]; _datepicker.datepickermode</span></span>=<span style="color: #000000;"><span style="color: #000000;">uidatepickermodedate; _datepicker.timezone</span></span>=<span style="color: #000000;"><span style="color: #000000;">[nstimezone defaulttimezone]; } _datepicker.frame</span></span>=cgrectmake (<span style="color: #800080;"><span style="color: #800080;">0</span></span>, frame.size.height-<span style="color: #800080;"><span style="color: #800080;">216</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span>,<span style="color: #800080;"><span style="color: #800080;">0</span></span><span style="color: #000000;"><span style="color: #000000;">); [self addsubview:_datepicker]; [view addsubview:self];}</span></span>-(<span style="color: #0000ff;"><span style="color: #0000ff;">void</span></span><span style="color: #000000;"><span style="color: #000000;">) Dismissview{_openflag</span></span>=<span style="color: #0000ff;"><span style="color: #0000ff;">false</span></span><span style="color: #000000;"><span style="color: #000000;">; _selectdate (_datepicker.date); [UIView animatewithduration:</span></span><span style="color: #800080;"><span style="color: #800080;">0.3</span></span>Delay<span style="color: #800080;"><span style="color: #800080;">0</span></span>Options:uiviewanimationoptioncurveeaseout animations:^<span style="color: #000000;"><span style="color: #000000;">{self.frame</span></span>=cgrectmake (<span style="color: #800080;"><span style="color: #800080;">0</span></span>,-<span style="color: #000000;"><span style="color: #000000;">self.frame.size.height, self.frame.size.width, self.frame.size.height); } completion:</span></span>^<span style="color: #000000;"><span style="color: #000000;">(BOOL finished) {[self removefromsuperview]; }]; }</span></span><span style="color: #0000ff;"><span style="color: #0000ff;">@end</span></span></pre><pre><pre>Yvandatepicker *picker=<span style="color: #000000;">[yvandatepicker sharedmanager]; Picker.selectdate</span>=^ (nsdate *<span style="color: #000000;">Date) { NSLog (</span><span style="color: #800000;">@ "</span><span style="color: #800000;">%@</span><span style="color: #800000;">"</span><span style="color: #000000;">, date); };</span> <span style="color: #008000;">//</span> <span style="color: #008000;">//</span> <span style="color: #008000;">1. Set the frame</span> in the parent view CGRect Frame=cgrectmake (<span style="color: #800080;">0</span><span style="color: #800080;">0</span><span style="color: #800080;">260</span><span style="color: #000000;">); [picker ShowInView:self.view withframe:frame];</span></pre></pre><p><p>Rebound effect</p></p><p><p></p></p><p><p></p></p><p><p>iOS Project popup Animation II</p></p></span>