最近搞了幾個iOS的動畫效果,但是一直還沒有整體的總結(jié)一下.今天來大概的理一下思路:
我們動畫用到的框架有哪些 1.core Animation (核心動畫) 2.quartzCore(2d繪圖,CALAyer圖層)兩個.
今天主要來說一下core animation
coreAnimation 中可以直接使用的類有這么幾個:
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation
1.CABasicAnimation可以設(shè)定keyPath的起點泼菌，終點的值衅枫，動畫會沿著設(shè)定點進行移動，CABasicAnimation有點類似CAKeyFrameAnimation 但是不如他強大。
簡單使用
- (void)animaton{
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];//position屬性發(fā)生動畫
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 100)];//動畫要去的點
animation.duration = 2.0;//時間
[self.viewA.layer addAnimation:animation forKey:@"weiyi" ];//添加動畫 weiyi 是自定義的標識
}
這是位置偏移的效果
- (void)animaton{
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];//修改背景顏色
animation.toValue = (id)[UIColor yellowColor].CGColor;
animation.duration = 2.0;
self.viewA.layer.anchorPoint = CGPointMake(0, 1);
[self.viewA.layer addAnimation:animation forKey:@"weiyi" ];
}
//CATransform3D Key Paths : (example)transform.rotation.z
//rotation.x
//rotation.y
//rotation.z
//rotation 旋轉(zhuǎn)
//scale.x
//scale.y
//scale.z
//scale 縮放
//translation.x
//translation.y
//translation.z
//translation 平移
//CGPoint Key Paths : (example)position.x
//x
//y
//CGRect Key Paths : (example)bounds.size.width
//origin.x
//origin.y
//origin
//size.width
//size.height
//size
//opacity
//backgroundColor
//cornerRadius
//borderWidth
//contents
//Shadow Key Path:
//shadowColor
//shadowOffset
//shadowOpacity
//shadowRadius
可以移動化的形式修改這些屬性
2.CAKeyframeAnimation
這個就是沿著曲線運動 他可以和上面一樣 直接修改position 改變位置
同樣也可以通過某些特定的曲線
- (void)keyanimation{
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, Nil, 0, 0);
CGPathAddCurveToPoint(path, Nil, 300, 250, 300, 400, 0, 720);//設(shè)置路徑
CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.path = path;//匹配路徑
animation.duration = 3.0;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.viewA.layer addAnimation:animation forKey:@"dddd"];
}
3.CATransition 轉(zhuǎn)場動畫
轉(zhuǎn)場動畫谚咬，比UIVIew轉(zhuǎn)場動畫具有更多的動畫效果门粪，比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現(xiàn)。
CAKeyframeAnimation的重要屬性：
type：過渡動畫的類型
type的enum值如下：
kCATransitionFade 漸變
kCATransitionMoveIn 覆蓋
kCATransitionPush 推出
kCATransitionReveal 揭開
還有一些私有動畫類型至扰，效果很炫酷楞遏，不過不推薦使用茬暇。
私有動畫類型的值有："cube"、"suckEffect"寡喝、"oglFlip"糙俗、 "rippleEffect"、"pageCurl"预鬓、"pageUnCurl"等等巧骚。
subtype： 過渡動畫的方向
subtype的enum值如下：
kCATransitionFromRight 從右邊
kCATransitionFromLeft 從左邊
kCATransitionFromTop 從頂部
kCATransitionFromBottom 從底部
- (void)transitionAni {
CATransition * ani = [CATransition animation];
ani.type = kCATransitionFade;
ani.subtype = kCATransitionFromLeft;
ani.duration = 1.5;
self.centerShow.image = [UIImage imageNamed:@"Raffle"];
[self.centerShow.layer addAnimation:ani forKey:@"transitionAni"];
}
4.CASpringAnimation
CASpringAnimation是iOS9新加入動畫類型，是CABasicAnimation的子類珊皿，用于實現(xiàn)彈簧動畫网缝。
CASpringAnimation的重要屬性：
mass：質(zhì)量（影響彈簧的慣性，質(zhì)量越大蟋定，彈簧慣性越大粉臊，運動的幅度越大）
stiffness：彈性系數(shù)（彈性系數(shù)越大，彈簧的運動越快）
damping：阻尼系數(shù)（阻尼系數(shù)越大驶兜，彈簧的停止越快）
initialVelocity：初始速率（彈簧動畫的初始速度大小扼仲，彈簧運動的初始方向與初始速率的正負一致，若初始速率為0抄淑，表示忽略該屬性）
settlingDuration：結(jié)算時間（根據(jù)動畫參數(shù)估算彈簧開始運動到停止的時間屠凶，動畫設(shè)置的時間最好根據(jù)此時間來設(shè)置）
- (void)springAni {
CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
ani.mass = 10.0; //質(zhì)量，影響圖層運動時的彈簧慣性肆资，質(zhì)量越大矗愧，彈簧拉伸和壓縮的幅度越大
ani.stiffness = 5000; //剛度系數(shù)(勁度系數(shù)/彈性系數(shù))，剛度系數(shù)越大郑原，形變產(chǎn)生的力就越大唉韭，運動越快
ani.damping = 100.0;//阻尼系數(shù)，阻止彈簧伸縮的系數(shù)犯犁，阻尼系數(shù)越大属愤，停止越快 ani.initialVelocity = 5.f;//初始速率，動畫視圖的初始速度大小;速率為正數(shù)時酸役，速度方向與運動方向一致住诸，速率為負數(shù)時驾胆，速度方向與運動方向相反
ani.duration = ani.settlingDuration;
ani.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"boundsAni"];}
5.CAAnimationGroup
使用Group可以將多個動畫合并一起加入到層中，Group中所有動畫并發(fā)執(zhí)行贱呐，可以方便地實現(xiàn)需要多種類型動畫的場景丧诺。
以實現(xiàn)視圖的position、bounds和opacity改變的組合動畫為例
- (void)groupAni {
CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
posAni.toValue = [NSValue valueWithCGPoint:self.centerShow.center]; CABasicAnimation * opcAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
opcAni.toValue = [NSNumber numberWithFloat:1.0];
opcAni.toValue = [NSNumber numberWithFloat:0.7];
CABasicAnimation * bodAni = [CABasicAnimation animationWithKeyPath:@"bounds"];
bodAni.toValue = [NSValue valueWithCGRect:self.centerShow.bounds]; CAAnimationGroup * groupAni = [CAAnimationGroup animation]; groupAni.animations = @[posAni, opcAni, bodAni];
groupAni.duration = 1.0;
groupAni.fillMode = kCAFillModeForwards;
groupAni.removedOnCompletion = NO;
groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [self.cartCenter.layer addAnimation:groupAni forKey:@"groupAni"];
}
