1: 轉(zhuǎn)場動(dòng)畫
- 單個(gè)視圖過度:當(dāng)改變視圖的某些屬性需要加上動(dòng)畫效果時(shí)使用
view.backgroundColor = [UIColor redColor];
[UIView transitionWithView:view duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut animations:^{
view.backgroundColor = [UIColor greenColor];
} completion:^(BOOL finished) {
}];
- 多個(gè)視圖過度:當(dāng)我們需要實(shí)現(xiàn)類似隱藏 A 視圖顯示 B 視圖時(shí)使用
[UIView transitionFromView:fromView toView:toView duration:1.0f options:UIViewAnimationOptionTransitionCurlDown | UIViewAnimationOptionCurveEaseOut completion:^(BOOL finished) {
}];
options 參數(shù)指示動(dòng)畫的效果,常見可使用于轉(zhuǎn)場動(dòng)畫屬性,其中動(dòng)畫速度與轉(zhuǎn)場類型可使用 | 方法,兩種效果都有
UIViewAnimationOptions 是一個(gè) NS_OPTIONS 枚舉
其中 0 << 16,0 << 24是一個(gè)標(biāo)志位
我們可以通過 UIViewAnimationOptionsXXX & 0 << 16 來確定究竟是哪一個(gè)動(dòng)畫速度控制枚舉,UIViewAnimationOptionsXXX & 0 << 24 來確定究竟是哪一個(gè)動(dòng)畫轉(zhuǎn)場類型枚舉
// 動(dòng)畫速度控制(可從其中選擇一個(gè)設(shè)置)時(shí)間函數(shù)曲線相關(guān)**時(shí)間曲線函數(shù)**
// 0 << 16 開始
UIViewAnimationOptionCurveEaseInOut:動(dòng)畫先緩慢,然后逐漸加速。
UIViewAnimationOptionCurveEaseIn :動(dòng)畫逐漸變慢。
UIViewAnimationOptionCurveEaseOut:動(dòng)畫逐漸加速。
UIViewAnimationOptionCurveLinear :動(dòng)畫勻速執(zhí)行,默認(rèn)值。
// 轉(zhuǎn)場類型(僅適用于轉(zhuǎn)場動(dòng)畫設(shè)置,可以從中選擇一個(gè)進(jìn)行設(shè)置,基本動(dòng)畫、關(guān)鍵幀動(dòng)畫不需要設(shè)置)**轉(zhuǎn)場動(dòng)畫相關(guān)的**
// 0 << 20 開始
UIViewAnimationOptionTransitionNone:沒有轉(zhuǎn)場動(dòng)畫效果。
UIViewAnimationOptionTransitionFlipFromLeft :從左側(cè)翻轉(zhuǎn)效果。
UIViewAnimationOptionTransitionFlipFromRight:從右側(cè)翻轉(zhuǎn)效果。
UIViewAnimationOptionTransitionCurlUp:向后翻頁的動(dòng)畫過渡效果。
UIViewAnimationOptionTransitionCurlDown :向前翻頁的動(dòng)畫過渡效果。
UIViewAnimationOptionTransitionCrossDissolve:舊視圖溶解消失顯示下一個(gè)新視圖的效果。
UIViewAnimationOptionTransitionFlipFromTop :從上方翻轉(zhuǎn)效果。
UIViewAnimationOptionTransitionFlipFromBottom:從底部翻轉(zhuǎn)效果。
2:彈簧動(dòng)畫
在 iOS 開發(fā)中有時(shí)我們需要展示視圖的位置變化但是僅僅是位置變化動(dòng)畫有些生硬,這時(shí)候可以加彈簧動(dòng)畫!類似于一個(gè)球掉在地上會(huì)彈一下的那種效果
[UIView animateWithDuration:1.f /* 動(dòng)畫時(shí)長 */
delay:0.f /* 延時(shí) */
usingSpringWithDamping:0.3f /* 彈性 */
initialSpringVelocity:0.3f /* 初始速度 */
options:kNilOptions animations:^{
tap.view.frame = frame;
}
completion:^(BOOL finished) {
}];
3:關(guān)鍵幀動(dòng)畫
- 基礎(chǔ)變換動(dòng)畫
分三種,縮放動(dòng)畫,旋轉(zhuǎn)動(dòng)畫,平移動(dòng)畫
- (void)doAnimation:(kRHAnimationType) type atView:(UIView *)view {
CABasicAnimation *basicAnimation = [CABasicAnimation animation];
switch (type) {
case kRHAnimationTypeBounds:
// 縮放動(dòng)畫
basicAnimation.keyPath = @"bounds";
basicAnimation.toValue = [NSValue valueWithCGRect:kEndFrame];
break;
case kRHAnimationTypeTransform:
// 旋轉(zhuǎn)動(dòng)畫
basicAnimation.keyPath = @"transform";
basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
break;
case kRHAnimationTypePosition:
// 平移動(dòng)畫
basicAnimation.keyPath = @"position";
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
default:
break;
}
basicAnimation.duration = .8f;
basicAnimation.removedOnCompletion = NO;
basicAnimation.fillMode = kCAFillModeForwards;
[view.layer addAnimation:basicAnimation forKey:nil];
}
- CAAnimationGroup,動(dòng)畫組合,平移,縮放,旋轉(zhuǎn)組合動(dòng)畫!
- (void)groupAnimationAction:(UITapGestureRecognizer *)tap {
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.animations = @[
[self animation:kRHAnimationTypeBounds],
[self animation:kRHAnimationTypePosition],
[self animation:kRHAnimationTypeTransform]
];
animationGroup.duration = 1;
animationGroup.fillMode = kCAFillModeBackwards; // 恢復(fù)原態(tài)
animationGroup.removedOnCompletion = NO;
[tap.view.layer addAnimation:animationGroup forKey:@"animationGroup"];
}
- (CABasicAnimation *)animation:(kRHAnimationType) type {
CABasicAnimation *basicAnimation = [CABasicAnimation animation];
switch (type) {
case kRHAnimationTypeBounds:
// 縮放動(dòng)畫
basicAnimation.keyPath = @"bounds";
basicAnimation.toValue = [NSValue valueWithCGRect:kEndFrame];
break;
case kRHAnimationTypeTransform:
// 旋轉(zhuǎn)動(dòng)畫
basicAnimation.keyPath = @"transform";
basicAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];
break;
case kRHAnimationTypePosition:
// 平移動(dòng)畫
basicAnimation.keyPath = @"position";
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
default:
break;
}
basicAnimation.duration = .8f;
basicAnimation.removedOnCompletion = NO;
basicAnimation.fillMode = kCAFillModeForwards;
return basicAnimation;
}
- 按照軌跡變化動(dòng)畫
// 貝塞爾曲線軌跡運(yùn)動(dòng)
- (void)keyFrameAnimationAction:(UITapGestureRecognizer *)tap {
CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:tap.view.center];
[bezierPath addCurveToPoint:CGPointMake(130, 600) controlPoint1:CGPointMake(30, 300) controlPoint2:CGPointMake(500, 500)];
anim.path = bezierPath.CGPath;
// 動(dòng)畫的執(zhí)行節(jié)奏
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
anim.duration = 2.0f;
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
anim.delegate = self;
[tap.view.layer addAnimation:anim forKey:nil];
}
// 按照點(diǎn)的 value 軌跡運(yùn)動(dòng)
- (void)keyFrameAnimationAction:(UITapGestureRecognizer *)tap {
CAKeyframeAnimation * anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
NSValue *v1 = [NSValue valueWithCGPoint:tap.view.center];
NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(100, 300)];
NSValue *v4 = [NSValue valueWithCGPoint:tap.view.center];
anim.values = @[v1,v2,v3,v4];
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
anim.duration = 2.0f;
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
anim.delegate = self;
[tap.view.layer addAnimation:anim forKey:nil];
}
4:一般動(dòng)畫
最常用的一般動(dòng)畫效果,設(shè)置視圖的frame 或者其他變化,設(shè)置動(dòng)畫時(shí)間
[UIView animateWithDuration:0.8f animations:^{
}];