iOS 动画(core Animation) 一
最近搞了几个iOS的动画效果,但是一直还没有整体的总结一下.今天来大概的理一下思路:
我们动画用到的框架有哪些 1.core Animation (核心动画) 2.quartzCore(2d绘图,CALAyer图层)两个.
今天主要来说一下core animation
coreAnimation 中可以直接使用的类有这么几个:
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation
1.CABasicAnimation可以设定keyPath的起点，终点的值，动画会沿着设定点进行移动，CABasicAnimation有点类似CAKeyFrameAnimation 但是不如他强大。
简单使用
- (void)animaton{
CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];//position属性发生动画
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 100)];//动画要去的点
animation.duration = 2.0;//时间
[self.viewA.layer addAnimation:animation forKey:@"weiyi" ];//添加动画 weiyi 是自定义的标识
}
这是位置偏移的效果
7月-07-2016 13-28-48.gif
- (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 旋轉
//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);//设置路径
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 转场动画
转场动画，比UIVIew转场动画具有更多的动画效果，比如Nav的默认Push视图的效果就是通过CATransition的kCATransitionPush类型来实现。
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的子类，用于实现弹簧动画。
CASpringAnimation的重要属性：
mass：质量（影响弹簧的惯性，质量越大，弹簧惯性越大，运动的幅度越大）
stiffness：弹性系数（弹性系数越大，弹簧的运动越快）
damping：阻尼系数（阻尼系数越大，弹簧的停止越快）
initialVelocity：初始速率（弹簧动画的初始速度大小，弹簧运动的初始方向与初始速率的正负一致，若初始速率为0，表示忽略该属性）
settlingDuration：结算时间（根据动画参数估算弹簧开始运动到停止的时间，动画设置的时间最好根据此时间来设置）
- (void)springAni {
CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
ani.mass = 10.0; //质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大
ani.stiffness = 5000; //刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快
ani.damping = 100.0;//阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快 ani.initialVelocity = 5.f;//初始速率，动画视图的初始速度大小;速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
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中所有动画并发执行，可以方便地实现需要多种类型动画的场景。
以实现视图的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"];
}
