- UIView 動(dòng)畫
- CALay 動(dòng)畫
image.png
UIView 動(dòng)畫:
UIView 動(dòng)畫:UIView的屬性動(dòng)畫 就是在一定時(shí)間內(nèi)改變其屬性值從而達(dá)到動(dòng)畫的效果
[UIView animateWithDuration:0.3 delay:0.3 options:UIViewAnimationOptionCurveEaseOut animations:^{
[self.progressV setAlpha:0.0f];
} completion:^(BOOL finished) {
[self.progressV setProgress:0.0f animated:YES];
}];
CALay 動(dòng)畫:
相關(guān)類結(jié)構(gòu)圖:
image.png
對一個(gè)view進(jìn)行core animation動(dòng)畫，本質(zhì)上是對該view的.layer進(jìn)行動(dòng)畫操縱
1.CABasicAnimation動(dòng)畫:
- 通過設(shè)定起始點(diǎn)禀忆，終點(diǎn)塑崖，時(shí)間甜孤，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)。
- 可以實(shí)現(xiàn)如:旋轉(zhuǎn),翻轉(zhuǎn),位移,縮放,顏色變化,內(nèi)容變化等動(dòng)畫.
常用KeyPath總結(jié)
KeyPath值 說明 使用形式- swift 3.0
transform.scale 比例縮放 0.8
transform.scale.x 縮放寬的比例 0.8
transform.scale.y 縮放高的比例 0.8
transform.rotation.x 圍繞x軸旋轉(zhuǎn) 2 * M_PI
transform.rotation.y 圍繞y軸旋轉(zhuǎn) 2 * M_PI
transform.rotation.z 圍繞z軸旋轉(zhuǎn) 2 * M_PI
backgroundColor 背景顏色的變化 UIColor.red.cgColor
bounds 大小縮放永品，中心不變 NSValue(cgRect: CGRect(x: 800, y: 500, width: 90, height: 30))
position 位置(中心點(diǎn)的改變) NSValue(cgPoint: CGPoint(x: 40, y: 240))
contents 內(nèi)容，比如UIImageView的圖片 UIImage(named: "to")?.cgImage
opacity 透明度 0.4
contentsRect.size.width 橫向拉伸縮放 0.6
contentsRect.size.height 縱向拉伸縮放 0.5
2.CAKeyframeAnimation :
關(guān)鍵幀動(dòng)畫其實(shí)通過一組動(dòng)畫類型的值（或者一個(gè)指定的路徑）和這些值對應(yīng)的時(shí)間節(jié)點(diǎn)以及各時(shí)間節(jié)點(diǎn)的過渡方式來控制顯示的動(dòng)畫。關(guān)鍵幀動(dòng)畫可以通過path屬性和values屬性來設(shè)置動(dòng)畫的關(guān)鍵幀悦施。
- 通過path設(shè)置動(dòng)畫
path只能控制CGPoint類型的動(dòng)畫屬性。如position去团、anchorPoint抡诞、transform.translation等 - 通過values設(shè)置動(dòng)畫
values指定了一組離散的關(guān)鍵幀，這些關(guān)鍵幀之間的需要通過插值來進(jìn)行過渡土陪。這些插值計(jì)算方式calculationMode設(shè)置
例子:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_layer.position];
//確定拋物線的最高點(diǎn)位置 controlPoint
[path addQuadCurveToPoint:finishPoint controlPoint:CGPointMake(ScreenWidth/2 , rect.origin.y-80)];
//關(guān)鍵幀動(dòng)畫
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = path.CGPath;
- (void)setValuesAnimation
{
CGPoint center = self.view.center;
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 4;
animation.repeatCount = CGFLOAT_MAX;
animation.delegate = self;
// 計(jì)算方式1: kCAAnimationLinear 直線相連進(jìn)行插值計(jì)算
animation.calculationMode = kCAAnimationLinear;
animation.values = @[[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y-100)],
[NSValue valueWithCGPoint:CGPointMake(center.x+100, center.y-100)],
[NSValue valueWithCGPoint:CGPointMake(center.x+100, center.y+100)],
[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y+100)],
[NSValue valueWithCGPoint:CGPointMake(center.x-100, center.y-100)]];
animation.keyTimes = @[@(0),@(0.25),@(0.5),@(0.75),@(1)];
animation.timingFunctions = @[[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault]];
[self.layer addAnimation:animation forKey:@""];
if (!_displayLink) {
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
}
}
3.CATrasition(轉(zhuǎn)場動(dòng)畫):
用于做過渡動(dòng)畫或者轉(zhuǎn)場動(dòng)畫昼汗，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果。 其中最主要的就是 type 和 subType 這兩個(gè)屬性鬼雀。
- 公共Type（官方的SDK其實(shí)只提供了四種過渡效果）:
CA_EXTERN NSString * const kCATransitionFade; 淡出效果
CA_EXTERN NSString * const kCATransitionMoveIn; 新視圖移動(dòng)到舊視圖上
CA_EXTERN NSString * const kCATransitionPush; 新視圖推出舊視圖
CA_EXTERN NSString * const kCATransitionReveal; 移開舊視圖顯示新視圖
- 私有 type:
NSString *const kCATransitionCube = @"cube";
NSString *const kCATransitionSuckEffect = @"suckEffect";
NSString *const kCATransitionOglFlip = @"oglFlip";
NSString *const kCATransitionRippleEffect = @"rippleEffect";
NSString *const kCATransitionPageCurl = @"pageCurl";
NSString *const kCATransitionPageUnCurl = @"pageUnCurl";
NSString *const kCATransitionCameraIrisHollowOpen = @"cameraIrisHollowOpen";
NSString *const kCATransitionCameraIrisHollowClose = @"cameraIrisHollowClose";
- SubType： 動(dòng)畫類型的方向
CA_EXTERN NSString * const kCATransitionFromRight;
CA_EXTERN NSString * const kCATransitionFromLeft;
CA_EXTERN NSString * const kCATransitionFromTop;
CA_EXTERN NSString * const kCATransitionFromBottom;
- 例子:
CATransition *animation = [CATransition animation];
animation.type = kCATransitionPush;//設(shè)置動(dòng)畫的類型
animation.subtype = kCATransitionFromRight; //設(shè)置動(dòng)畫的方向
animation.duration = 1.0f;
[testView.layer addAnimation:animation forKey:@"pushAnimation"];
4.CAAnimationGroup (動(dòng)畫組):
Group也就是組合的意思顷窒，就是把對這個(gè)Layer的所有動(dòng)畫都組合起來。
例子:
CAAnimationGroup *groups = [CAAnimationGroup animation];
groups.animations = @[animation,rotateAnimation];
groups.duration = 2.0f;
groups.removedOnCompletion=NO;
groups.fillMode=kCAFillModeForwards;
groups.delegate = self;
[layer addAnimation:groups forKey:@"group"];
5.CASpringAnimation:
彈簧動(dòng)畫
6.加入購物車動(dòng)畫效果
見 demo
