您的位置:首页 > 产品设计 > UI/UE

iOS动画和特效(一)UIView动画和CoreAnimation

2015-12-06 16:07 393 查看
UIView的方法中有几个易用的静态方法可以做出动画效果,分别是UIView.beginAnimations() -> UIView.commitAnimations() 和UIView.animateWithDuration()方法 我们以一个UIView,每点击一次向右移动100,变色,加速运动这个简单的动效作为例子。

使用UIView.beginAnimations() -> UIView.commitAnimations()实现
//开始动画配置
UIView.beginAnimations("view1Animation", context: nil)
//运动时间
UIView.setAnimationDuration(0.2)
//设置运动开始和结束的委托 animationDidStart and animationDidStop
UIView.setAnimationDelegate(self)
/*
缓动方式
EaseInOut // slow at beginning and end
EaseIn // slow at beginning
EaseOut // slow at end
Linear
*/
UIView.setAnimationCurve(.EaseIn)
//位置运动
theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)
//颜色渐变
theView.backgroundColor = UIColor.greenColor()
//透明度渐变
theView.alpha = 0.5
//动画开始
UIView.commitAnimations()


使用更简单的和UIView.animateWithDuration()实现
UIView.animateWithDuration(0.2, delay: 0.5, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in
//位置运动
theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)
//颜色渐变
theView.backgroundColor = UIColor.greenColor()
//透明度渐变
theView.alpha = 0.5
}) { (isCompletion) -> Void in
NSLog("completion")
}


animateWithDuration的方法有4个从载方法,参数不同,根据需要调用。其中最后一个代理一个阻尼系数和回弹系数,使用他可以做出更加逼真的运动效果
//usingSpringWithDamping 阻尼,范围0-1,阻尼越接近于0,弹性效果越明显
UIView.animateWithDuration(0.2, delay: 0, usingSpringWithDamping: 0.9, initialSpringVelocity: 1, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in
theView.frame = CGRect(x: theView.frame.origin.x+100, y: theView.frame.origin.y, width: theView.frame.size.width, height: theView.frame.height)
}, completion: nil)


本节介绍的几个方法,已经可以做出许多的简单动画效果了,这说明apple对高级别对象的动画api封装做的很不错。代码见QuickExampleViewController.swift


Core Animation的类图

基本动画 CABasicAnimation

还记得上一节简单的动画吗,一个uiview向左平移100,这节我们使用CABasicAnimation实现相同的效果





CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。

CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。

CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。

CATransition:转场动画,主要通过滤镜进行动画效果设置。

CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。

CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。


基本动画 CABasicAnimation


CABasicAnimation实现一个UIView向左平移100

UIView *animView =[UIView new];
animView.backgroundColor = [UIColor redColor];
animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);
[self.view addSubview:animView];

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];
[anim setFromValue:[NSValue valueWithCGPoint:CGPointMake(100, 0)]];
[anim setDuration:0.2];
anim.repeatCount = 1;

//这两个属性若不设置,动画执行后回复位
anim.removedOnCompletion = false;
anim.fillMode = kCAFillModeForwards;

[animView.layer addAnimation:anim forKey:nil];




其他注意几个地方

1:keyPath用于区分BasicAnimation动画类型
/*
可选的KeyPath
transform.scale = 比例轉換
transform.scale.x
transform.scale.y
transform.rotation = 旋轉
transform.rotation.x
transform.rotation.y
transform.rotation.z
transform.translation
transform.translation.x
transform.translation.y
transform.translation.z

opacity = 透明度
margin
zPosition
backgroundColor 背景颜色
cornerRadius 圆角
borderWidth
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
opacity
position
shadowColor
shadowOffset
shadowOpacity
shadowRadius

*/


2:动画执行后不恢复原位

//这两个属性若不设置,动画执行后回复位
baseAnimation.removedOnCompletion = false
baseAnimation.fillMode = kCAFillModeForwards



CABasicAnimation 组合动画

组合动画就是把一组CABasicAnimation组合使用,我们以组合移动、旋转、缩放特效为例

UIView *animView =[UIView new];
animView.backgroundColor = [UIColor redColor];
animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);
[self.view addSubview:animView];

CABasicAnimation *leftAnim = [CABasicAnimation animationWithKeyPath:@"position"];

[leftAnim setToValue:[NSValue valueWithCGPoint:CGPointMake(animView.layer.position.x+100, animView.layer.position.y)]];

//x轴旋转动画
CABasicAnimation *xAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
[xAnim setByValue:[NSNumber numberWithDouble:M_PI*500]];
xAnim.duration = 1.5;

//y轴旋转动画
CABasicAnimation *yAnim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
[yAnim setByValue:[NSNumber numberWithDouble:M_PI*200]];

//缩放动画
CABasicAnimation *sAnim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 动画选项设定
sAnim.autoreverses = YES; //动画结束时执行逆动画
sAnim.fromValue = [NSNumber numberWithDouble:0.1];//开始的倍率
sAnim.toValue = [NSNumber numberWithDouble:1.5];//结束的倍率

CAAnimationGroup *animGroup = [CAAnimationGroup animation];

animGroup.duration = 3.0;
animGroup.repeatCount = 1;
animGroup.animations = @[xAnim,yAnim,sAnim,leftAnim];
//这两个属性若不设置,动画执行后回复位
animGroup.removedOnCompletion = false;
animGroup.fillMode = kCAFillModeForwards;
animGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];//加速运动
animGroup.delegate = self;
[animView.layer addAnimation:animGroup forKey:nil];



关键帧动画 CAKeyframeAnimation

关键帧动画就是在动画控制过程中开发者指定主要的动画状态,至于各个状态间动画如何进行则由系统自动运算补充(每两个关键帧之间系统形成的动画称为“补间动画”),这种动画的好处就是开发者不用逐个控制每个动画帧,而只要关心几个关键帧的状态即可。

关键帧动画和基本动画也很相似,通过keyPath设置动画类型,才对齐进行一组关键值的设定。数据变化也有2种形式,一种是关键点,一种是路径,比如实例中的按一个贝塞尔弧移动view。

UIView *animView =[UIView new];
animView.backgroundColor = [UIColor redColor];
animView.frame = CGRectMake(self.view.frame.size.width/2, 100, 100, 100);
[self.view addSubview:animView];

UIPanGestureRecognizer *tap = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(anim:)];

[animView addGestureRecognizer:tap];


- (void)anim:(UIPanGestureRecognizer *)tap{

CAKeyframeAnimation *keyframeAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];

//线段的位置移动
//  keyframeAnim.values = @[[NSValue valueWithCGPoint:CGPointMake(10, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 100)],[NSValue valueWithCGPoint:CGPointMake(30, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 120)],[NSValue valueWithCGPoint:CGPointMake(60, 100)],[NSValue valueWithCGPoint:CGPointMake(106, 210)],[NSValue valueWithCGPoint:CGPointMake(106, 410)],[NSValue valueWithCGPoint:CGPointMake(300, 310)]];

//弧线位置移动
CGMutablePathRef mutablePath = CGPathCreateMutable();
CGPathMoveToPoint(mutablePath, nil, 50, 50);
CGPathAddCurveToPoint(mutablePath, nil, 50, 50, 700, 300, 30, 500);
keyframeAnim.path = mutablePath;

keyframeAnim.duration = 0.3;

[tap.view.layer addAnimation:keyframeAnim forKey:nil];
}


关键帧动画其他可以设置的参数

//keyTimes:各个关键帧的时间控制

//caculationMode:动画计算模式。
kCAAnimationLinear: 线性模式,默认值
kCAAnimationDiscrete: 离散模式
kCAAnimationPaced:均匀处理,会忽略keyTimes
kCAAnimationCubic:平滑执行,对于位置变动关键帧动画运行轨迹更平滑
kCAAnimationCubicPaced:平滑均匀执行



转场效果

转场动画就是从一个场景以动画的形式过渡到另一个场景。转场动画的使用一般分为以下几个步骤:

创建转场动画
设置转场类型、子类型(可选)及其他属性
设置转场后的新视图并添加动画到图层

场的效果transfer.type有很多选项,主要选项有

kCATransitionFade:淡入淡出,默认效果
kCATransitionMoveIn:新视图移动到就是图上方
kCATransitionPush:新视图推开旧视图
kCATransitionReveal:移走旧视图然后显示新视图

//苹果未公开的私有转场效果
cube:立方体
suckEffect:吸走的效果
oglFlip:前后翻转效果
rippleEffect:波纹效果
pageCurl:翻页起来
pageUnCurl:翻页下来
cameraIrisHollowOpen:镜头开
cameraIrisHollowClose:镜头关




除了淡入淡出以外,其余三个效果都存在方向性,所以还有个.subType可以设置方向类型

kCATransitionFromRight:
kCATransitionFromLeft:
kCATransitionFromTop:
kCATransitionFromBottom:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: