CoreAnimation變速齒輪旋轉動畫實現

小項目:實現變速旋轉動畫


效果圖

項目功能要求:

剛開始加載資源的時候,齒輪速度從慢到快,不斷加速

加速到一定速度,就不在加速,以這個速度一直旋轉下去

當加載資源完成的時候,齒輪速度又開始從快變慢,不斷減速

減速完成直到沒速度的時候,關閉加載視圖

這里我是使用CoreAnimation實現的,感覺麻煩,不過好在實現了功能

首先,我們分析該動畫過程,一共需要3個動畫:

開始加載動畫

正在加載動畫

結束加載動畫

下面的loadingGearView就是上面GIF圖的那個輪子

首先我們來看下開始加載動畫:

#pragma mark 圖片開始加載動畫

- (void)startLoadingAnimation{

if (loadingGearView)

{

//先移除之前的動畫

[loadingGearView.layer removeAllAnimations];

//創建旋轉動畫

CABasicAnimation* startRotation =

[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

startRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];

startRotation.duration = 2.0;

//設置旋轉動畫是開始先慢后面越來越快的動畫運動時間函數

startRotation.timingFunction =

[CAMediaTimingFunction functionWithName:@"easeIn"];

startRotation .delegate = self;

//設置標志來區別是否是即將停止

[startRotation setValue:@NO forKey:@"isStop"];

//添加動畫

[loadingGearView.layer addAnimation:startRotation forKey:@"startRotationAnimation"];

? ? }

}

我們上面設置了代理,我們再代理方法中實現正在加載動畫

#pragma mark 動畫結束的動畫代理方法中,添加圖片正在加載動畫

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag

{

if ([[anim valueForKey:@"isStop"] boolValue]) {

[self hideView];

return;

}

CABasicAnimation* rotationAnimation =

[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];

rotationAnimation.duration = 1.0;

rotationAnimation.cumulative = YES;

rotationAnimation.repeatCount = HUGE_VALF;

[loadingGearView.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

}

結束加載動畫和開始加載動畫差不多,不同的是easeOut的動畫時間函數

#pragma mark 圖片結束加載動畫

- (void)stopLoadingAnimation{

if (loadingGearView)

{

[loadingGearView.layer removeAllAnimations];

//創建結束旋轉動畫

CABasicAnimation* stopRotation =

[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

stopRotation.toValue = [NSNumber numberWithFloat: M_PI * 2.0 ];

stopRotation.duration = 2.0;

stopRotation.delegate = self;

//前面的都一樣,這里開始就和開始旋轉動畫不同了

stopRotation.timingFunction = [CAMediaTimingFunction functionWithName:@"easeOut"];

[stopRotationsetValue:@YES forKey:@"isStop"];

[loadingGearView.layer addAnimation:stopRotation forKey:@"stopRotationAnimation"];

?}

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • iOS動畫篇之CoreAnimation動畫 9月 22, 2016發布在Objective-C App如果想被大...
    白水灬煮一切閱讀 2,135評論 0 0
  • IOS動畫+轉場動畫 #import "ViewController.h" #import "secondView...
    iOS小開發閱讀 925評論 0 1
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,147評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,573評論 6 30
  • 我愿你做一葉孤舟,飄蕩在大海之上,我愿你披荊斬棘,去迎風破浪,到達理解的彼岸。
    林下生風閱讀 995評論 5 18