iOS动画-从UIView到Core Animation

时间:2022-07-29 19:32:47

首先,介绍一下UIView相关的动画。

  1. UIView普通动画:
[UIView beginAnimations: context:];
[UIView commitAnimations];

动画属性设置:

     //动画持续时间
[UIView setAnimationDuration:(NSTimeInterval)];
//动画的代理对象
[UIView setAnimationDelegate:(nullable id)];
//设置动画将开始时代理对象执行的SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
//设置动画延迟执行的时间
[UIView setAnimationDelay:(NSTimeInterval)];
//设置动画的重复次数
[UIView setAnimationRepeatCount:(float)];
//设置动画的曲线
/*
UIViewAnimationCurve的枚举值:
UIViewAnimationCurveEaseInOut, // 慢进慢出(默认值)
UIViewAnimationCurveEaseIn, // 慢进
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 匀速
*/
[UIView setAnimationCurve:(UIViewAnimationCurve)];
//设置是否从当前状态开始播放动画
/*假设上一个动画正在播放,且尚未播放完毕,我们将要进行一个新的动画:
当为YES时:动画将从上一个动画所在的状态开始播放
当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)*/
[UIView setAnimationBeginsFromCurrentState:YES];
//设置动画是否继续执行相反的动画
[UIView setAnimationRepeatAutoreverses:(BOOL)];
//是否禁用动画效果(对象属性依然会被改变,只是没有动画效果)
[UIView setAnimationsEnabled:(BOOL)];
//设置视图的过渡效果
/* 第一个参数:UIViewAnimationTransition的枚举值如下
UIViewAnimationTransitionNone, //不使用动画
UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页
UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页
UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页
UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页
第二个参数:需要过渡效果的View
第三个参数:是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染*/
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];

举2个例子:

     [UIView beginAnimations:@"xxx" context:nil];
[UIView setAnimationDuration:];
[UIView setAnimationRepeatCount:MAXFLOAT];
[UIView setAnimationDelegate:self];
[UIView setAnimationDelay:];
[UIView setAnimationWillStartSelector:@selector(animationWillStart)];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
[UIView setAnimationRepeatAutoreverses:YES]; self.iView.frame = CGRectMake(, , , ); [UIView commitAnimations];
     [UIView beginAnimations:@"xxx" context:nil];
[UIView setAnimationDuration:];
[UIView setAnimationRepeatCount:MAXFLOAT];
[UIView setAnimationDelegate:self];
//[UIView setAnimationDelay:3];
[UIView setAnimationWillStartSelector:@selector(animationWillStart)];
[UIView setAnimationCurve:UIViewAnimationCurveLinear];
//[UIView setAnimationRepeatAutoreverses:YES]; [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.iView cache:YES]; [UIView commitAnimations];

2.   UIView Block动画

 [UIView animateWithDuration:(NSTimeInterval)//动画时间
animations:^{
//执行的动画
}];
 [UIView animateWithDuration:(NSTimeInterval)//动画时间
animations:^{
//执行的动画
} completion:^(BOOL finished) {
//动画结束的回调
}];
 [UIView animateWithDuration:(NSTimeInterval)//动画时间
delay:(NSTimeInterval)//动画延迟时间
options:(UIViewAnimationOptions)//动画过渡效果
animations:^{
//执行动画
} completion:^(BOOL finished) {
//动画结束回调
}]
UIViewAnimationOptions的枚举值:
    UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画
UIViewAnimationOptionRepeat //无限重复执行动画
UIViewAnimationOptionAutoreverse //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值)
UIViewAnimationOptionCurveEaseIn //时间曲线,慢进
UIViewAnimationOptionCurveEaseOut //时间曲线,慢出
UIViewAnimationOptionCurveLinear //时间曲线,匀速 UIViewAnimationOptionTransitionNone //转场,不使用动画
UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页

这3个动画比较简单,不再多做叙述。

Spring动画
ios7.0以后新增了Spring动画(IOS系统动画大部分采用Spring Animation, 适用所有可被添加动画效果的属性)

[UIView animateWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
usingSpringWithDamping:(CGFloat)//震动效果,范围0~1,数值越小震动效果越明显
initialSpringVelocity:(CGFloat)//初始速度,数值越大初始速度越快
options:(UIViewAnimationOptions)//动画的过渡效果
animations:^{
//执行的动画
}
completion:^(BOOL finished) {
//动画执行提交后的操作
}];
[UIView animateWithDuration: delay: usingSpringWithDamping:0.2 initialSpringVelocity: options:UIViewAnimationOptionRepeat animations:^{
self.iView.frame = CGRectMake(, , , );
self.iView.transform = CGAffineTransformRotate(self.iView.transform, M_PI);
} completion:^(BOOL finished) { }];

Keyframes动画:

IOS7.0后新增了关键帧动画,支持属性关键帧,不支持路径关键帧
[UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
delay:(NSTimeInterval)//动画延迟执行的时间
options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
animations:^{
//执行的关键帧动画
}
completion:^(BOOL finished) {
//动画执行提交后的操作
}];

Core Animation

CABasicAnimation:

//  常用属性:

     duration:动画的持续时间
repeatCount:重复次数,无限循环可以设置HUGE_VALF或者MAXFLOAT
repeatDuration:重复时间
speed:动画速率,决定动画时间的倍率。当speed为2时,动画时间为设置的duration的1/。
timeOffset:动画时间偏移量。比如设置动画时长为3秒,当设置timeOffset为1.5时,当前动画会从中间位置开始,并在到达指定位置时,走完之前跳过的前半段动画。
removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwards
fillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后
kCAFillModeRemoved:这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards:当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards:在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。
kCAFillModeBoth:这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态 beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+,CACurrentMediaTime()为图层的当前时间
timingFunction:速度控制函数,控制动画运行的节奏 kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉
kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开
kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地
kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。 delegate:动画代理
autoreverses:动画完成后是否以动画形式回到初始值
fromValue:keyPath相应属性的初始值
toValue:keyPath相应属性的结束值
byValue:keyPath相应属性的改变值 `fromValue`,`toValue`和`byValue`属性可以用很多种方式来组合,但为了防止冲突,不能一次性同时指定这三个值。例如,如果指定了`fromValue`等于2,`toValue`等于4,`byValue`等于3,那么Core Animation就不知道结果到底是4(`toValue`)还是5(`fromValue + byValue`)了。他们的用法在`CABasicAnimation`头文件中已经描述的很清楚了,所以在这里就不重复了。总的说来,就是只需要指定`toValue`或者`byValue`,剩下的值都可以通过上下文自动计算出来。

实例化方法:

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

其中keyPath表示动画类型,常用的keyPath:

iOS动画-从UIView到Core Animation

举一个例子:

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
basicAnimation.duration = ;
basicAnimation.removedOnCompletion = NO;
basicAnimation.fillMode = kCAFillModeForwards;
// basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(, )];
basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(, )]; [self.iView.layer addAnimation:basicAnimation forKey:@"rotation"];

“position”也可以替换成上图其他的值,"fromvalue"/"toValue"/"byValue"要与动画类型'keypath'对应。

CAKeyframeAnimation:关键帧动画

关键帧动画和CABasicAnimation一样是CApropertyAnimation的子类,但是CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)或者添加一个增量数值(byValue),而CAKeyframeAnimation使用values数组可以设置多个关键帧,同时可以利用path可以进行位置或者锚点的动画操作。

常用属性:

values:关键帧数组对象,里面每一个元素即为一个关键帧,动画会在对应的时间段内,依次执行数组中每一个关键帧的动画。
path:动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,Path在动画中只会影响视图的Position。
keyTimes:设置关键帧对应的时间点,范围:-。如果没有设置该属性,则每一帧的时间平分。
timingFunctions:每一帧对应的动画节奏。
rotationMode:动画沿路径旋转方式。例如让一个视图按照一条三次贝塞尔曲线移动,如果rotationMode=kCAAnimationRotateAuto,那么这个视图会沿着曲线的切线移动,而不是直来直去的。如下图所示:

iOS动画-从UIView到Core AnimationiOS动画-从UIView到Core Animation

举例:

if (tag == ) {
//使用“values”
keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
keyFrameAni.duration = 0.3;
keyFrameAni.values = @[@(-() / 180.0*M_PI),@(() / 180.0*M_PI),@(-() / 180.0*M_PI)];
keyFrameAni.repeatCount=MAXFLOAT;
}else if (tag == ){
//使用“path”路径
keyFrameAni = [CAKeyframeAnimation animationWithKeyPath:@"position"];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_aniLayer.position];
[path addCurveToPoint:CGPointMake(, ) controlPoint1:CGPointMake(, ) controlPoint2:CGPointMake(, )];
keyFrameAni.path = path.CGPath;
keyFrameAni.duration = ; }
[_aniLayer addAnimation:keyFrameAni forKey:@"keyFrameAnimation"];

CASpringAnimation

CASpringAnimation是iOS9才引入的动画类,效果类似于UIView的spring动画,不过比其增加了质量,劲度系数等属性的扩展,继承于CABaseAnimation,用法也很简单:

CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position"];
//质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大
springAnimation.mass = ;
//刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
springAnimation.stiffness = ;
//阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
springAnimation.damping = ;
//初始速率,动画视图的初始速度大小 Defaults to zero
//速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
springAnimation.initialVelocity = ;
//settlingDuration:估算时间 返回弹簧动画到停止时的估算时间,根据当前的动画参数估算
springAnimation.duration = springAnimation.settlingDuration;
springAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(, , , )];
[self.iView.layer addAnimation:springAnimation forKey:@"spring"];

CATransition:转场动画

CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
动画属性:(有的属性是具备方向的,详情看下图)
type:动画过渡类型
subtype:动画过渡方向
startProgress:动画起点(在整体动画的百分比)
endProgress:动画终点(在整体动画的百分比)
 
iOS动画-从UIView到Core Animation
-(void)transitionAnimation{
self.index++;
if (self.index>) {
self.index=;
}
self.iImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.jpg",[NSNumber numberWithInteger:self.index]]];
CATransition *transition = [CATransition animation];
transition.type = @"cube";
//transition.subtype = @"fromRight";
transition.duration = ;
[self.iImageView.layer addAnimation:transition forKey:nil];
}

这里是以"cube"和"pageCurl"的效果图,就是上面的代码,没有做成gif图,可以想象一下哈!

iOS动画-从UIView到Core AnimationiOS动画-从UIView到Core Animation

CAAnimationGroup:动画组

动画组,是CAAnimation的子类,可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行

属性说明:
animations:用来保存一组动画对象的NSArray
默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间

示例:

CAAnimationGroup *group = [CAAnimationGroup animation];

    //    创建旋转动画对象
CABasicAnimation *retate = [CABasicAnimation animation];
// layer的旋转属性
retate.keyPath = @"transform.rotation";
// 角度
retate.toValue = @(M_PI); // 创建缩放动画对象
CABasicAnimation *scale = [CABasicAnimation animation];
// 缩放属性
scale.keyPath = @"transform.scale";
// 缩放比例
scale.toValue = @(0.0);
// 添加到动画组当中
group.animations = @[retate,scale];
// 执行动画时间
group.duration = 2.0;
// 执行完以后不要删除动画
group.removedOnCompletion = NO;
// 保持最新的状态
group.fillMode = kCAFillModeForwards; [self.view.layer addAnimation:group forKey:nil];

文章转载:https://www.jianshu.com/p/9fa025c42261