300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > iOS动画-从UIView到Core Animation

iOS动画-从UIView到Core Animation

时间:2019-08-07 17:07:00

相关推荐

iOS动画-从UIView到Core Animation

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

UIView普通动画:

[UIView beginAnimations: context:];[UIView commitAnimations];

动画属性设置:

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

举2个例子:

1[UIView beginAnimations:@"xxx" context:nil]; 2[UIView setAnimationDuration:5]; 3[UIView setAnimationRepeatCount:MAXFLOAT]; 4[UIView setAnimationDelegate:self]; 5[UIView setAnimationDelay:3]; 6[UIView setAnimationWillStartSelector:@selector(animationWillStart)]; 7[UIView setAnimationCurve:UIViewAnimationCurveEaseIn]; 8[UIView setAnimationRepeatAutoreverses:YES]; 910self.iView.frame = CGRectMake(200, 400, 100, 100);1112[UIView commitAnimations];

1[UIView beginAnimations:@"xxx" context:nil]; 2[UIView setAnimationDuration:2]; 3[UIView setAnimationRepeatCount:MAXFLOAT]; 4[UIView setAnimationDelegate:self]; 5//[UIView setAnimationDelay:3]; 6[UIView setAnimationWillStartSelector:@selector(animationWillStart)]; 7[UIView setAnimationCurve:UIViewAnimationCurveLinear]; 8//[UIView setAnimationRepeatAutoreverses:YES]; 910[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.iView cache:YES];1112[UIView commitAnimations];

2. UIView Block动画

1 [UIView animateWithDuration:(NSTimeInterval)//动画时间2animations:^{3 //执行的动画4}];

1 [UIView animateWithDuration:(NSTimeInterval)//动画时间2 animations:^{3 //执行的动画4} completion:^(BOOL finished) {5 //动画结束的回调6}];

1 [UIView animateWithDuration:(NSTimeInterval)//动画时间2 delay:(NSTimeInterval)//动画延迟时间3options:(UIViewAnimationOptions)//动画过渡效果4 animations:^{5 //执行动画6} completion:^(BOOL finished) {7 //动画结束回调8}]

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:3 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:5 options:UIViewAnimationOptionRepeat animations:^{self.iView.frame = CGRectMake(200, 400, 100, 100);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或者MAXFLOATrepeatDuration:重复时间speed:动画速率,决定动画时间的倍率。当speed为2时,动画时间为设置的duration的1/2。timeOffset:动画时间偏移量。比如设置动画时长为3秒,当设置timeOffset为1.5时,当前动画会从中间位置开始,并在到达指定位置时,走完之前跳过的前半段动画。removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillModeForwardsfillMode:决定当前对象在非active时间段的行为。比如动画开始之前或者动画结束之后kCAFillModeRemoved:这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态kCAFillModeForwards:当动画结束后,layer会一直保持着动画最后的状态kCAFillModeBackwards:在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。kCAFillModeBoth:这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,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:

举一个例子:

CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"position"];basicAnimation.duration = 5;basicAnimation.removedOnCompletion = NO;basicAnimation.fillMode = kCAFillModeForwards;// basicAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];[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:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。

timingFunctions:每一帧对应的动画节奏。

rotationMode:动画沿路径旋转方式。例如让一个视图按照一条三次贝塞尔曲线移动,如果rotationMode=kCAAnimationRotateAuto,那么这个视图会沿着曲线的切线移动,而不是直来直去的。如下图所示:

举例:

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

CASpringAnimation

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

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

CATransition:转场动画

CATransition是CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点

UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果

动画属性:(有的属性是具备方向的,详情看下图)

type:动画过渡类型

subtype:动画过渡方向

startProgress:动画起点(在整体动画的百分比)

endProgress:动画终点(在整体动画的百分比)

-(void)transitionAnimation{self.index++;if (self.index>7) {self.index=1;}self.iImageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%@.jpg",[NSNumber numberWithInteger:self.index]]];CATransition *transition = [CATransition animation];transition.type = @"cube";//transition.subtype = @"fromRight";transition.duration = 2;[self.iImageView.layer addAnimation:transition forKey:nil];}

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

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];

文章转载:/p/9fa025c42261

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。