iOS開發學習之簡單動畫
編輯：IOS開發綜合
UIActivityIndicatorView
UIImageView的序列幀動畫
UIView動畫
時鐘動畫
一、UIActivityIndicatorView
1⃣️屬性
－isAnimating屬性判斷是否正在動畫
2⃣️第三方庫SVProgressHUD
[SVProgressHUD dismiss]
[SVProgressHUD showWithStatus:@“網絡加載中” maskType:SVProgressHUDMashTypeGradient]；(後面的參數是否遮擋，可以不用)
3⃣️NSTimer
[NSTimer scheduledTimerWithTimeInterval:1 target:2 selector:3 userInfo:4 repeats:5];
1.時間間隔 2.self 3.觸發時調用的方法 4.用戶信息 5.是否重復
[timer invalidate];
復制代碼
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
// 使用了SVProgress的maskType屬性，當前視圖無法接受觸摸事件
// 需要想辦法關閉
// 使用NSTimer
if ([_indicatorView isAnimating]) {
[SVProgressHUD dismiss];
[_indicatorView stopAnimating];
} else {
[SVProgressHUD showWithStatus:@"等會~~~" maskType:SVProgressHUDMaskTypeGradient];
// 指示器一啟動，就無法交互了，要把時鐘放在這裡
[_indicatorView startAnimating];
[NSTimer scheduledTimerWithTimeInterval:2.0 target:self selector:@selector(updateTimer:) userInfo:nil repeats:NO];
}
}
// NSTimer調用方法的參數，只能是NSTimer，使用參數，在當前示例中，就不需要使用成員變量了
- (void)updateTimer:(NSTimer *)timer
{
[SVProgressHUD dismiss];
[_indicatorView stopAnimating];
// 關閉時鐘
[timer invalidate];
}
復制代碼
二、UIImageView的序列幀動畫
1⃣️屬性說明
－animationImages：要顯示的一組圖盤
－animationDuration：顯示所有圖片需要的時間(如果中間由修改速度，需要先停止、設置、開始)
－animationRepeatCount：動畫的執行次數
2⃣️相關方法
－-(void)startAnimating;
－-(void)stopAnimating
－-(void)isAnimating;
1.趙雲動畫
復制代碼
// 創建趙雲的序列幀動畫
- (void)createZhaoyunImage
{
// Do any additional setup after loading the view, typically from a nib.
// 設置ImageView的序列幀動畫
// 1. 需要一個數組
NSMutableArray *images = [NSMutableArray array];
for (int i = 1; i < 11; i++) {
NSString *fileName = [NSString stringWithFormat:@"/images/zy/%d.png", i];
UIImage *image = [UIImage imageNamed:fileName];
[images addObject:image];
}
[_zhaoyunImage setImage:images[0]];
// 設置圖像數組
[_zhaoyunImage setAnimationImages:images];
// 設置10張圖片播放的時長
[_zhaoyunImage setAnimationDuration:1.0f];
// 開始動畫
[_zhaoyunImage startAnimating];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
if ([_zhaoyunImage isAnimating]) {
// 序列幀動畫每次停止的時候，都會顯示設置的圖像，而不是當前播放到的圖像
[_zhaoyunImage stopAnimating];
} else {
[_zhaoyunImage startAnimating];
}
}
復制代碼
2.燕子動畫
復制代碼
#pragma mark - 拖拽燕子
- (void)dragBird:(UIPanGestureRecognizer *)sender
{
// 先需要知道手指的位置
CGPoint location = [sender locationInView:self.view];
// 手勢狀態改是UIGestureRecognizerStateChanged的時候，手指還沒有離開屏幕
// 這個時候，可以修改鳥的位置，同時讓鳥撲騰
if (sender.state == UIGestureRecognizerStateChanged) {
// 注意：如果要修改播放中的序列幀動畫
// 1. 需要先停止動畫
[_birdImage stopAnimating];
// 2. 修改動畫頻率
[_birdImage setAnimationDuration:0.2f];
// 3. 重新啟動動畫
[_birdImage startAnimating];
// 修改燕子的動畫頻率
// 設置燕子的位置
[_birdImage setCenter:location];
} else if (sender.state == UIGestureRecognizerStateEnded) {
// 恢復燕子慢悠悠
// 1. 需要先停止動畫
[_birdImage stopAnimating];
// 2. 修改動畫頻率
[_birdImage setAnimationDuration:1.2f];
// 3. 重新啟動動畫
[_birdImage startAnimating];
}
}
// 設置燕子的序列幀動畫，並設置燕子的拖拽手勢監聽
- (void)createBirdImage
{
// 設置燕子的序列幀動畫
NSArray *images = @[[UIImage imageNamed:@"/images/素材/燕子1.png"],
[UIImage imageNamed:@"/images/素材/燕子2.png"]];
[_birdImage setAnimationImages:images];
[_birdImage setAnimationDuration:1.2f];
[_birdImage startAnimating];
// 定義手勢
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(dragBird:)];
[_birdImage addGestureRecognizer:pan];
// 設置燕子圖片允許用戶交互
[_birdImage setUserInteractionEnabled:YES];
}
復制代碼
三、UIView動畫
四、時鐘動畫（CADisplayLink）
－是一種以屏幕刷新屏幕觸發的時鐘機制，每秒鐘執行大約60次
－倒入QuartzCore框架
1⃣️使用方法
－定義CADisplayLink並制定觸發調用方法
－將顯示鏈接添加到主運行循環隊列
2⃣️兩種判斷時間間隔的方法
－以成員變量的方式判斷
－以全局變量的方式判斷
復制代碼
@interface ViewController ()
{
// 游戲時鐘
CADisplayLink *_gameTimer;
// 時鐘觸發的初始時間
CFTimeInterval _startTime;
}
@end
@implementation ViewController
#pragma mark - 使用指定時間處理CADisplayLink觸發時間的方法（1）
- (void)updateTimer:(CADisplayLink *)sender
{
// 如果_startTime=0，說明是第一次觸發時鐘，需要記錄時鐘的時鐘戳記
if (_startTime == 0) {
_startTime = sender.timestamp;
}
// 時鐘觸發的時間差值
CFTimeInterval deltaTime = sender.timestamp - _startTime;
if (deltaTime > 1.0) {
NSLog(@"時鐘觸發了 %f", sender.timestamp);
// 更新_startTime的數值，記錄本次執行任務的時間
_startTime = sender.timestamp;
}
}
#pragma mark - 使用指定時間處理CADisplayLink觸發時間的方法（2）
- (void)step
{
// 假定每隔一秒觸發一次方法
if (steps % (10 * 60 * 60) == 1) {
NSLog(@"時鐘觸發了！ %ld", steps);
}
steps++;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 首先將啟動的時間點設置為0
_startTime = 0.0f;
// 將屏幕刷新總次數設置為0
steps = 0;
// 初始化游戲時鐘
_gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
// 初始化時鐘之後，有一個必須要做的，就是把游戲時鐘，添加到主運行循環
[_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
復制代碼
3⃣️使用步驟
方法1:
－初始化一個游戲時鐘，並且加入主隊列中
－自己制定時間間隔，去執行操作
1.需要一個成員變量，記錄時鐘起始的“時間點”：CFTimeInterval _startTime;
2.計算成員變量去與時鐘觸發時的時間差，如果大於制定的時間差，再去執行操作
方法2:
－定義一個全局的每秒中執行的次數
－如果執行了這個次數，就執行要執行的操作
復制代碼
steps = 0;
// 初始化雪花圖像
_snowImage = [UIImage imageNamed:@"/images/素材/雪花"];
// 初始化時鐘
_gameTimer = [CADisplayLink displayLinkWithTarget:self selector:@selector(step)];
[_gameTimer addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
復制代碼
復制代碼
#pragma mark - 時鐘處理方法
- (void)step
{
// 假設每秒鐘繪制6個雪花
if (steps % 10 == 0) {
// 繪制雪花
UIImageView *imageView = [[UIImageView alloc]initWithImage:_snowImage];
// 指定雪花出現的位置
CGPoint startPoint = CGPointMake(arc4random() % 320, -30.0);
// 指定雪花結束的位置
CGPoint endPoint = CGPointMake(arc4random() % 320, 490);
/**
新問題
1. 雪花太大
2. 雪花太亮，需要改一下透明度
3. 如果雪花會轉就更好了
*/
CGFloat r = arc4random() % 5 + 10;
[imageView setFrame:CGRectMake(0, 0, r, r)];
// 設置起始點
[imageView setCenter:startPoint];
// 把雪花圖像添加到視圖
[self.view addSubview:imageView];
[UIView animateWithDuration:6.0f delay:0.0f options:UIViewAnimationOptionCurveEaseIn animations:^{
[imageView setCenter:endPoint];
[imageView setAlpha:0.2f];
[imageView setTransform:CGAffineTransformMakeRotation(M_PI)];
} completion:^(BOOL finished) {
// 從父視圖刪除，這個千萬不要忘了
[imageView removeFromSuperview];
}];
}
}
相關文章
+