小項目：實現變速旋轉動畫
效果圖
項目要求：
- 剛開始加載資源的時候，齒輪速度從慢到快，不斷加速
- 加速到一定速度，就不在加速，以這個速度一直旋轉下去
- 當加載資源完成的時候，齒輪速度又開始從快變慢，不斷減速
- 減速完成直到沒速度的時候，關閉加載視圖
這里我是使用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"];
}
}
最后上一個美圖：
動漫美女，強迫癥，必須要有一個配圖
