今天給大家分享一篇有關動畫的知識, 主要是用storyboard寫的??.
因為沒有太多的時間, 我就不給大家詳細介紹storyboard的具體用法了(以后有空的話我會專門寫一篇有關storyboard的文章), 其實也可以用代碼代替的, 只要合理設置控件的坐標就好了.
首先, 我們需要創建一些控件.
先上圖吧, 這個是我在Main.storyboard里放置的所有控件, 在圖里都有備注.
各button都有自己的方法, 我們通過點擊不同的button使view產生不同的動畫, 比如改變尺寸,背景顏色, 透明度等等. 放置imageView是為了模仿音樂播放時的明星照片旋轉動畫的效果. 是不是很期待呢?
我們先將Main.storyboard里的控件拖到viewController里成為屬性.
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *MusicImageView;
@property (weak, nonatomic) IBOutlet UIView *testView;
@property (nonatomic, assign)BOOL isPlaying;
@end
各個Button的方法也從Main.storyboard里依次拖到viewController里. 各方法的實現內容如下:
尺寸動畫按鈕的方法:
//修改尺寸:
- (IBAction)didClickedSizeButton:(id)sender
{
[UIView animateWithDuration:2 animations:
^{
self.testView.frame = CGRectMake(120, 120, 50, 50);//可以在completion里繼續寫動畫
} completion:^(BOOL finished) {
[UIView animateWithDuration:1 animations:
^{
self.testView.frame = CGRectMake(0, 0, 50, 50);
} completion:^(BOOL finished) {
}];
}];
}
第一個參數意思是動畫的持續時間, 第二個參數的意思是動畫的內容, 上邊的實現結果是view尺寸改變為(50, 50)后跑到左上角(0, 0)的位置, 還可以繼續在completion里繼續寫動畫. 我在一些方法里NSLog了"動畫結束". 以此確定動畫是否結束.
顏色動畫按鈕方法:
//修改顏色:
- (IBAction)didClickedColorButton:(id)sender
{
[UIView animateWithDuration:3 animations:^{
self.testView.backgroundColor = [UIColor greenColor];
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
參數的意義不變, 3秒鐘后view的背景色變成綠色, 不用動畫方法直接一句self.testView.backgroundColor = [UIColor greenColor]只是硬生生的直接綠了, 動畫方法有一個漸變的過程.
透明度動畫按鈕方法:
//修改透明度:
- (IBAction)didClickedAlphaButton:(id)sender
{
[UIView animateWithDuration:3 animations:^{
self.testView.alpha = 0.3;
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
漸漸的就朦朧了, 對于我這個新手來說感覺真的很神奇啊!
那么問題來了, 變化之后該怎么回去呢? 所以我們還需要一個復原按鈕, 通過點擊它來實現復原的效果.
//復原:
- (IBAction)didClickedResetButton:(id)sender
{
// self.testView.frame = CGRectMake(120, 40, 240, 200);
// self.testView.backgroundColor = [UIColor orangeColor];
// self.testView.alpha = 1;
[UIView animateWithDuration:3 animations:^{
self.testView.frame = CGRectMake(120, 40, 240, 200);
self.testView.backgroundColor = [UIColor orangeColor];
self.testView.alpha = 1;
} completion:^(BOOL finished)
{
NSLog(@"動畫結束");
}];
}
只要在方法里復原下view的最初屬性就可以了.
基本按鈕方法:
- (IBAction)didClickedBaseAnimationButton:(id)sender
{
//開始動畫(動畫的代碼必須寫在開始和結束之間)
[UIView beginAnimations:@"move" context:nil];
//設置動畫的時長:
[UIView setAnimationDuration:2];
//設置代理人:
[UIView setAnimationDelegate:self];//(不用簽協議)
//動畫代碼:
self.testView.backgroundColor = [UIColor greenColor];
//結束動畫
[UIView commitAnimations];
}
必要的地方我都在代碼里寫好備注了, 既然設置了代理人, 那肯定也有它的一些代理方法吧.
//(基本按鈕)代理方法:
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
NSLog(@"動畫結束!");
}
- (void)animationWillStart:(NSString *)animationID context:(void *)context
{
NSLog(@"動畫開始");
}
這個大家看看就行了.
動畫位移按鈕方法:
- (IBAction)didClickedMoveButton:(id)sender
{
//移動:(不累加)
// self.testView.transform = CGAffineTransformMakeTranslation(0, 300);//復原后不能移動了
//移動:(累加)
self.testView.transform = CGAffineTransformTranslate(self.testView.transform, 0, 50);
}
這里注釋掉的那個方法復原后不能再移動了, 也就是不能累加, 下面那個是可以累加的.
動畫縮放按鈕方法:
- (IBAction)didClickedScaleButton:(id)sender
{
//縮放:(不累加)
// self.testView.transform = CGAffineTransformMakeScale(1.5, 1.5);//因為沒有參考上一次的方法所以復原后不能使用了
//縮放:(累加):參數為縮放倍數
self.testView.transform = CGAffineTransformScale(self.testView.transform, 1.5, 1.5);
}
同理, 也有累加和不累加兩種, 不能累加的原因, 我也只是個菜鳥, 不敢妄下結論, 個人覺得應該是缺了前邊的參照.
動畫旋轉按鈕方法:
- (IBAction)didClickedTurnButton:(id)sender
{
self.testView.transform = CGAffineTransformRotate(self.testView.transform, -M_PI_4);
//正數順時針,負數逆時針轉,π/4
}
正負數和方向有關系, PI就是π.
關鍵幀按鈕方法:
- (IBAction)didClickedImportantButton:(id)sender
{
// spring動畫:
// 參數1 : 動畫時長
// 參數2 : 延遲的時間
// 參數3 : 彈力系數(0~1)
// 參數4 : 視圖移動的速度(<= 200)
// 參數5 : 視圖出現的效果
[UIView animateWithDuration:2 delay:0.0 usingSpringWithDamping:2 initialSpringVelocity:15 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.testView.center = CGPointMake(200, 400);
} completion:^(BOOL finished) {
NSLog(@"動畫結束!");
}];
//關鍵幀動畫:
// [UIView animateKeyframesWithDuration:2 delay:0.0 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
// [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.25 animations:^{
// self.testView.center = self.view.center;
// self.testView.backgroundColor = [UIColor yellowColor];
// }];
// } completion:^(BOOL finished)
// {
// NSLog(@"動畫結束!");
// }];
}
寫了兩種方法, 大家都可以試試, 第一種方法是有彈性動畫的那種, 我個人更喜歡一些.
按鈕方法寫完了, 還有一個問題, 我們要模仿音樂播放時歌手寫真圖旋轉的效果, 代碼都在viewDidLoad里.
//修改邊界
self.MusicImageView.layer.cornerRadius = 100;
self.MusicImageView.layer.masksToBounds = YES;//允許修改邊界
self.MusicImageView.userInteractionEnabled = YES;
//添加手勢
UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(playPauseAction)];
[self.MusicImageView addGestureRecognizer:tapGesture];
[NSTimer scheduledTimerWithTimeInterval:0.05 target:self selector:@selector(imageTurning) userInfo:nil repeats:YES];
//獲取testView的尺寸:
NSLog(@"%@", NSStringFromCGRect(self.testView.frame));
上邊添加了一個手勢方法和imageTurning(讓圖片旋轉)的方法, 在viewDidLoad外邊實現.
#pragma mark -- 暫停播放手勢方法:
-(void)playPauseAction
{
self.isPlaying = !_isPlaying;
}
#pragma mark -- 圖片旋轉一度:
-(void)imageTurning
{
if (_isPlaying == YES)
{
self.MusicImageView.transform = CGAffineTransformRotate(self.MusicImageView.transform, M_PI / 180);
}
}
這樣, 我們的效果就完成了. 暫停的時候點擊圖片它就停止了轉動, 再點一下又會繼續"播放".
怎么樣, 看著控件這么活潑飄逸, 是不是很有趣呢.
其實我也是剛接觸不久, 很多東西都不太明白, 還要向大家多多請教, 以后我會在空閑的時候繼續給大家分享一些我所學的一些知識, 希望能和大家一起交流學習, 共同進步!
