最近搞了幾個(gè)iOS的動(dòng)畫效果,但是一直還沒有整體的總結(jié)一下.今天來大概的理一下思路:
我們動(dòng)畫用到的框架有哪些 1.core Animation (核心動(dòng)畫) 2.quartzCore(2d繪圖,CALAyer圖層)兩個(gè).
今天主要來說一下core animation
coreAnimation 中可以直接使用的類有這么幾個(gè):
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation
1.CABasicAnimation可以設(shè)定keyPath的起點(diǎn)，終點(diǎn)的值，動(dòng)畫會沿著設(shè)定點(diǎn)進(jìn)行移動(dòng)，CABasicAnimation有點(diǎn)類似CAKeyFrameAnimation 但是不如他強(qiáng)大。
簡單使用
- (void)animaton{
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];//position屬性發(fā)生動(dòng)畫
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 100)];//動(dòng)畫要去的點(diǎn)
animation.duration = 2.0;//時(shí)間
[self.viewA.layer addAnimation:animation forKey:@"weiyi" ];//添加動(dòng)畫 weiyi 是自定義的標(biāo)識
}
這是位置偏移的效果
- (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
可以移動(dòng)化的形式修改這些屬性
2.CAKeyframeAnimation
這個(gè)就是沿著曲線運(yùn)動(dòng) 他可以和上面一樣 直接修改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)場動(dòng)畫
轉(zhuǎn)場動(dòng)畫，比UIVIew轉(zhuǎn)場動(dòng)畫具有更多的動(dòng)畫效果，比如Nav的默認(rèn)Push視圖的效果就是通過CATransition的kCATransitionPush類型來實(shí)現(xiàn)。
CAKeyframeAnimation的重要屬性：
type：過渡動(dòng)畫的類型
type的enum值如下：
kCATransitionFade 漸變
kCATransitionMoveIn 覆蓋
kCATransitionPush 推出
kCATransitionReveal 揭開
還有一些私有動(dòng)畫類型，效果很炫酷，不過不推薦使用。
私有動(dòng)畫類型的值有："cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"等等。
subtype： 過渡動(dòng)畫的方向
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新加入動(dòng)畫類型，是CABasicAnimation的子類，用于實(shí)現(xiàn)彈簧動(dòng)畫。
CASpringAnimation的重要屬性：
mass：質(zhì)量（影響彈簧的慣性，質(zhì)量越大，彈簧慣性越大，運(yùn)動(dòng)的幅度越大）
stiffness：彈性系數(shù)（彈性系數(shù)越大，彈簧的運(yùn)動(dòng)越快）
damping：阻尼系數(shù)（阻尼系數(shù)越大，彈簧的停止越快）
initialVelocity：初始速率（彈簧動(dòng)畫的初始速度大小，彈簧運(yùn)動(dòng)的初始方向與初始速率的正負(fù)一致，若初始速率為0，表示忽略該屬性）
settlingDuration：結(jié)算時(shí)間（根據(jù)動(dòng)畫參數(shù)估算彈簧開始運(yùn)動(dòng)到停止的時(shí)間，動(dòng)畫設(shè)置的時(shí)間最好根據(jù)此時(shí)間來設(shè)置）
- (void)springAni {
CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
ani.mass = 10.0; //質(zhì)量，影響圖層運(yùn)動(dòng)時(shí)的彈簧慣性，質(zhì)量越大，彈簧拉伸和壓縮的幅度越大
ani.stiffness = 5000; //剛度系數(shù)(勁度系數(shù)/彈性系數(shù))，剛度系數(shù)越大，形變產(chǎn)生的力就越大，運(yùn)動(dòng)越快
ani.damping = 100.0;//阻尼系數(shù)，阻止彈簧伸縮的系數(shù)，阻尼系數(shù)越大，停止越快 ani.initialVelocity = 5.f;//初始速率，動(dòng)畫視圖的初始速度大小;速率為正數(shù)時(shí)，速度方向與運(yùn)動(dòng)方向一致，速率為負(fù)數(shù)時(shí)，速度方向與運(yùn)動(dòng)方向相反
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可以將多個(gè)動(dòng)畫合并一起加入到層中，Group中所有動(dòng)畫并發(fā)執(zhí)行，可以方便地實(shí)現(xiàn)需要多種類型動(dòng)畫的場景。
以實(shí)現(xiàn)視圖的position、bounds和opacity改變的組合動(dòng)畫為例
- (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"];
}
