视图UIView动画

最新推荐文章于 2020-04-29 11:11:28 发布
原创 最新推荐文章于 2020-04-29 11:11:28 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uiview #动画

在iOS中，图形可分为以下几个层次：
这里写图片描述

越上层，封装程度越高，动画实现越简洁越简单，但是自由度越低；反之亦然。本文着重介绍Core Animation层的基本动画实现方案。

在iOS中，展示动画可以类比于显示生活中的“拍电影”。拍电影有三大要素：演员+剧本+开拍，概念类比如下：

演员--->CALayer，规定电影的主角是谁
剧本--->CAAnimation，规定电影该怎么演，怎么走，怎么变换
开拍--->AddAnimation，开始执行

一、概念介绍

1、使用CALayer

CALayer代表一个层，它提供了一个+layer类方法来创建CALayer层。

提示：所有的UIView都有一个默认的CALayer，通过UIView的layer属性即可访问UIView上的CALayer层。

使用CALayer的步骤非常简单，具体如下：

  1. 创建一个CALayer；
  2. 设置CALayer的contents属性即可设置该CALayer所显示的内容，该属性通常可指定一个CGImage，即代表CALayer将要显示的图片。如果需要自行绘制CALayer所显示的内容，可为CALayer指定delegate属性，该属性值应该是一个实现CALayerDelegate非正式协议的对象，重写该协议中的drawLayer:inContext:方法，即可完成CALayer的绘制。
  3. 为CALayer设置backgroundColor（背景色）、frame（设置大小和设置）、position（位置）、anchorPoint（锚点）、borderXxx（设置边框相关属性）、shadowXxx（设置阴影相关属性）等属性；
  4. 将该CALayer添加到父CALayer中即可。

与CALayer显示相关的还有如下几个常用属性：

  • （1）、contents：该属性控制CALayer显示的内容；
  • （2）、contentsRect：该属性控制CALayer的显示区域，其属性值是一个形如（0.0，0.0，1.0，1.0）的CGRect结构体，其中，1.0代表CALayer完整的宽和高；
  • （3）、contentsCenter：该属性控制CALayer的显示中心，其属性值是一个形如（0.0，0.0，1.0，1.0）的CGRect结构体，其中1.0代表CALayer完整的宽和高。通过该属性，可以把CALayer分成#字形网格，该属性指定的区域位置位于#字形中心。如果指定contentsCenter的contentsGravity属性为缩放模式，那么该CALayer被分成#字形的网格的上、下区域值进行水平缩放，#字形的网格的左、右区域只进行垂直缩放，中间区域进行两个方法的缩放，四个角则不进行缩放；
  • （4）、contentsGravity：该属性是一个NSString类型的常量值，用于控制CALayer中内容的缩放、对齐方式，它支持kCAGravityCenter等表示中心、上、下、左、右等对齐方式的属性值，也支持kCAGravityResizeXxx表示缩放的属性值；

具体详情请查看CALayer层

2、Core Animation动画基础

这里写图片描述
使用Core Animation创建动画不仅简单，而且具有更好地性能，原因有如下两个：

  • （1）、Core Animation动画在单独的线程中完成，不会阻塞主线程；
  • （2）、Core Animation动画只会重绘界面上变化的部分（局部刷新）；
    Core Animation动画的核心是CALayer，每个UIView都有自己的CALayer，而且每个CALayer都可以不断地添加子CALayer，CALayer所在的CALayer被称为父CALayer，CALayer的这种组织方式被称为Layer Tree（各Layer之间的结构就像一棵树）。

除此之外，Core Animation动画还涉及如下API：

  • （1）、CAAnimation：它是所有动画类的基类，它实现了CAMediaTiming协议，提供了动画的持续时间、数独和重复计数等。CAAnimation还实现了CAAction协议，该协议为CALayer动画触发的动作提供标准化响应；
  • （2）、CATransition：CAAnimation的子类，CAAnimation可通过预置的过渡效果来控制CALayer层的过渡动画；
  • （3）、CAPropertyAnimation：它是CAAnimation的一个子类，它代表一个属性动画，可通过+animationWithKeyPath:类方法来创建属性动画实例（程序一般创建该子类的实例），该方法需要指定一个CALayer支持动画的属性，然后通过它的子类（CABasicAnimation、CAKeyframeAnimation）控制CALayer的动画属性慢慢地改变，即可实现CALayer动画；
  • （4）、CABasicAnimation：CAPropertyAnimation的子类，简单控制CALayer层的属性慢慢改变，从而实现动画效果。很多CALayer层的属性值的修改默认会执行这个动画类。比如大小、透明度、颜色等属性；
  • （5）、CAKeyframeAnimation：CAPropertyAnimation的子类，支持关键帧的属性动画，该动画最大的特点在于可通过values属性指定多个关键帧，通过多个关键帧可以指定动画的各阶段的关键帧；
  • （6）、CAAnimationGroup：它是CAAnimation的子类，用于将多个动画组合在一起执行。

二、动画实现

1、使用UIView控制动画方式

实际上，控制UIView内子控件的过渡还有另一种方式，通过UIView的+ (void)beginAnimations:(NSString )animationID context:(void )context;与 + (void)commitAnimations;方法控制，——如果子组件的过渡动画不是特别复杂，只需要实现一些简单的动画，即可通过这种方式控制。步骤如下：

  1. 调用UIView的+ (void)beginAnimations:(NSString )animationID context:(void )context;方法开始动画；
  2. 调用UIView的+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;设置动画类型、+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;方法设置动画的变化曲线。除此之外，UIView还提供了系列setAnimationXxx方法来设置动画的持续时间、延迟时间、重复次数等属性；
  3. 调用UIView的+ (void)commitAnimations;方法提交动画；

上面的+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;方法用于控制UIView的过渡动画的动画方式，它支持如下动画方式：

  • ①、UIViewAnimationTransitionNone：不适用动画；
  • ②、UIViewAnimationTransitionFlipFromLeft：指定从左边滑入的动画过渡方式；
  • ③、UIViewAnimationTransitionFlipFromRight：指定从右边滑出的动画过渡方式；
  • ④、UIViewAnimationTransitionCurlUp：指定“翻开书页”的动画过渡方式；
  • ⑤、UIViewAnimationTransitionCurlDown：指定“放下书页”的动画过渡方式；

另：+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;方法用于控制动画的变化曲线，也就是控制动画的变化速度，该方法支持如下几种变化速度：

  • ①、UIViewAnimationCurveEaseInOut：动画先比较缓慢，然后逐渐加快；
  • ②、UIViewAnimationCurveEaseIn：动画逐渐变慢；
  • ③、UIViewAnimationCurveEaseOut：动画逐渐加快；
  • ④、UIViewAnimationCurveLinear：匀速动画；

例如：

- (void)curl:(UIButton *)sender{
    //开始执行动画
    [UIView beginAnimations:@"animation" context:nil];
    [UIView setAnimationDuration:1.0f];
    //控制UIView内过渡动画的类型
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
    //设置动画的变化曲线
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    //交换视图控制器所显示的UIView中两个子控件的位置
    [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
    [UIView commitAnimations];
}

2、CAAnimation

CAAnimation提供了如下属性和方法：

  • （1）、BOOL removedOnCompletion;该属性用于指定该动画完成时是否从目标CALayer上删除该动画
  • （2）、CAMediaTimingFunction *timingFunction;该属性用于指定一个CAMediaTimingFunction对象，该对象负责控制动画边长的步长；
  • （3）、- (void)animationDidStart:(CAAnimation *)anim;该动画开始时将会回调该方法。开发者可以重写该方法执行自定义处理；
  • （4）、- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;该动画结束时将会回调该方法。开发者可以重写该方法执行自定义处理；

3、 CAMediaTiming

  • （1）、 @property CFTimeInterval beginTime;

    • ①、如果一animation是在一个animation group中，则beginTime就是其parent object——animation group 开始的一个偏移。如果一个animation的beginTime为5，则此动画再group animation开始之后的5秒再开始动画

    • ②、如果一个animation是直接添加再layer上，beginTime同样是其parent object——layer开始的一个偏移，但是一个layer的beginning是一个过去的时间，因此不能简单的设置beginTime为5去延迟动画5s之后开始，因为可能layer的beginning加上5s之后也是过去的时间，因此，当要延迟一个添加layer上的动画的时候，需要定义一个addTime，先获取addTime如下：

      CFTimeInterval addTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

      然后延迟delay秒：

      animation.beginTime = addTime + delay;

  • （2）、 @property CFTimeInterval duration;设置时间；

    注意，我们设置的duration可能和动画进行的真是duration不一样，这个依赖于superLayer的time space或者就是speed；

  • （3）、 @property float speed;动画速度；

    注意：如果一个动画A：duration为1秒，speed为1；而另一个动画B：duration为2秒，speed为2。则这两个动画的效果是相同的；前提它们的super layer相同；

  • （4）、 @property CFTimeInterval timeOffset;
    假设一个3s的动画，它的状态为t0，t1，t2，t3，当没有timeOffset的时候，正常的状态序列应该为：t0->t1->t2->t3；当设置timeOffset为1的时候状态序列就变为：t1->t2->t3->t0；同理当timeOffset为2的时候状态序列就变味t2->t3->t0->t1;

  • （5）、 @property float repeatCount;动画重复次数；

  • （6）、 @property CFTimeInterval repeatDuration;动画重复时间；

  • （7）、 @property BOOL autoreverses;动画结束后是否返回到原来的位置；

4、使用CATransition控制过渡动画

CATransition通常用于通过CALayer控制UIView内子控件的过度画面，比如，删除子控件、添加子控件、切换两个子控件。继承CAAnimation

使用CATransition控制UIView内子控件的过度画面的步骤如下：

  1. 创建CATransition对象；
  2. 为CATransition设置type和subtype两个属性，其中，type指定动画类型，subtype指定动画移动方向；
  3. 如果不需要动画执行整个过程（就是只要动画执行到中间部分就停止），可以指定startProgress（动画的开始速度）、endProgress（动画的结束进度）属性；
  4. 调用UIView的layer属性的addAnimation:forKey:方法控制该UIView内子控件的过渡动画。addAnimation:forKey:方法的第一个参数为CAAnimation对象，第二个参数用于为该动画对象执行一个唯一标识。

提示：CATransition继承了CAAnimation，因此也支持指定CAAnimation的removedOnCompletion等属性；

CATransition属性如下：

  • （1）、 @property(copy) NSString *type;
    CATransition的type属性用于控制动画类型，它支持如下值（每个值代表一种类型的动画）。

    • ①、NSString * const kCATransitionFade;通过渐隐效果控制子组件的过渡。这是默认的属性值；
    • ②、NSString * const kCATransitionMoveIn;通过移入动画控制子组件的过渡；
    • ③、NSString * const kCATransitionPush;通过推入动画控制子组件的过渡；
    • ④、NSString * const kCATransitionReveal;通过揭开动画控制子组件的过渡；
      除此之外，该属性该支持如下私有动画：
    • ①、cube：通过立方体旋转动画控制子组件的过渡；
    • ②、suckEffect：通过收缩动画（就像被吸入的效果）控制子组件的过渡；
    • ③、oglFlip：通过翻转动画控制子组件的过渡；
    • ④、rippleEffect：通过水波动画控制子组件的过渡；
    • ⑤、pageCurl：通过页面揭开动画控制子组件的过渡；
    • ⑥、pageUnCurl：通过放下页面动画控制子组件的过渡；
    • ⑦、cameraIrisHollowOpen：通过镜头打开动画控制子组件的过渡；
    • ⑧、cameraIrisHollowClose：通过镜头关闭动画控制子组件的过渡；

  • （2）、 @property(nullable, copy) NSString *subtype;
    CATransition的subtype属性用于控制动画方向，它支持如下值：

    • ①、NSString * const kCATransitionFromRight;
    • ②、NSString * const kCATransitionFromLeft;
    • ③、NSString * const kCATransitionFromTop;
    • ④、 NSString * const kCATransitionFromBottom;

例如：

- (void)oglFlip:(UIButton *)sender{
    //开始执行动画
    CATransition* transition = [CATransition animation];
    transition.duration = 2.0f;
    //通过翻转动画控制子组件的过渡；
    transition.type = @"oglFlip";
    //指定动画方向，从下向上
    transition.subtype = kCATransitionFromBottom;
    [self.view.layer addAnimation:transition forKey:@"animation"];
    [self.view exchangeSubviewAtIndex:0 withSubviewAtIndex:1];
}

这里写图片描述

5、使用属性动画(CAPropertyAnimation)

属性动画由CAPropertyAnimation代表，该对象用于控制CALayer的动画属性（所有支持数值型属性值的属性几乎都可作为动画属性）持续改变，当CALayer的动画属性持续改变时，CALayer的外观就会持续改变——用户看上去就变成了动画。

CAPropertyAnimation提供了如下类方法来创建属性动画：

方法+ (id)animationWithKeyPath:(NSString *)path;仅需要一个参数，该参数只是一个字符串类型的值，指定CALayer的动画属性名，设置该属性动画控制CALayer的哪个动画属性持续改变。

除此之外，CAPropertyAnimation还支持如下属性：

  • （1）、@property(nullable, copy) NSString *keyPath;
    该属性值返回创建CAPropertyAnimation时指定的参数；
  • （2）、@property(getter=isAdditive) BOOL additive;
    该属性指定该属性动画是否以当前动画效果为基础；
  • （3）、@property(getter=isCumulative) BOOL cumulative;
    该属性指定动画是否为累加效果；
  • （4）、@property(nullable, strong) CAValueFunction *valueFunction;
    该属性值是一个CAValueFunction对象，该对象负责对属性改变的插值计算。系统已经提供了默认的插值计算方式，因此一般无需指定该属性。

如果要控制CALayer的位移动画，直接使用属性动画控制CALayer的postion持续改变即可。如果要控制该CALayer的缩放、旋转、斜切等效果，则需要控制如下属性。

  • （1）、affineTransform：该属性值指定一个CGAffineTransform对象，该对象代表对CALayer执行X、Y两个维度（也就是平面）上的旋转、缩放、位移、斜切、镜像等变换矩阵；
  • （2）、transform：该属性值指定一个CATransform3D对象，该对象代表对CALayer指定X、Y、Z三个维度（也就是三维空间）中的旋转、缩放、位移、斜切、镜像等变换矩阵。

一般来说，可使用Core Animation提供了如下属性来创建三维变换矩阵：

  • （1）、bool CATransform3DIsIdentity (CATransform3D t);判断t矩阵是否为单位矩阵；
  • （2）、bool CATransform3DEqualToTransform (CATransform3D a, CATransform3D b);判断连个变换矩阵是否相等；
  • （3）、CATransform3D CATransform3DMakeTranslation (CGFloat tx, CGFloat ty, CGFloat tz);创建在X方向上移动tx、Y方向上移动ty、Z方向上移动tz的变换矩阵；
  • （4）、CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy, CGFloat sz);创建在X方向上缩放sx、Y方向上缩放sy、Z方向上缩放sz的变换矩阵；
  • （5）、CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x, CGFloat y, CGFloat z);创建基于指定旋转轴旋转angle弧度的变换。其中参数x、y、z的值用于确定旋转轴的方向。比如（1，0，0）指定旋转轴为X轴，（1，1，0）指定以X轴、Y周夹角的中线为旋转轴；
  • （6）、CATransform3D CATransform3DTranslate (CATransform3D t, CGFloat tx, CGFloat ty, CGFloat tz);以已有t变换矩阵为基础进行位移变换；
  • （7）、CATransform3D CATransform3DScale (CATransform3D t, CGFloat sx, CGFloat sy, CGFloat sz);以已有t变换矩阵为基础执行缩放变换；
  • （8）、CATransform3D CATransform3DRotate (CATransform3D t, CGFloat angle, CGFloat x, CGFloat y, CGFloat z);以已有的t变换为基础执行旋转变换；
  • （9）、CATransform3D CATransform3DConcat (CATransform3D a, CATransform3D b);对a变换矩阵执行累加；
  • （10）、CATransform3D CATransform3DInvert (CATransform3D t);对已有的t变换执行反转；
  • （11）、CATransform3D CATransform3DMakeAffineTransform (CGAffineTransform m);将CGAffineTransform矩阵包装成CATransform3D变换矩阵，该CATransform3D也只有X、Y维度的变换；
  • （12）、bool CATransform3DIsAffine (CATransform3D t);如果t变换只是一个CGAffineTransform矩阵，则该函数返回YES；
  • （13）、CGAffineTransform CATransform3DGetAffineTransform (CATransform3D t);获取t变换矩阵所包含的CGAffineTransform变换矩阵。

使用属性动画控制CALayer的执行动画创建属性动画：

  • ①、利用animationWithKeyPath类方法创建属性动画；
  • ②、如果使用CABasicAnimation属性动画，则可指定fromValue、toValue两个属性值，其中，formValue指定动画属性开始时的属性值，toValue指定动画属性结束时的属性值；

  • ③、如果使用CAKeyframeAnimation属性动画，则指定values属性值，该属性值是一个NSArray属性，其中第一个元素指定动画属性开始时的属性值，toValue指定动画属性结束时的属性值，其他数组元素指定动画变化过程中的属性值。

    提示：CABasicAnimation，CAKeyframeAnimation都继承了CAPropertyAnimation，他们都是
属性动画，只是CABasicAnimation只能指定动画属性的开始值和结束值，该CALayer的动画属性
就由开始值变化到结束值；而CAKeyframeAnimation则可为动画属性指定多个值，该CALayer的
动画属性就从values的第一个属性值开始，依次经历每个属性值，知道变成最后一个属性值。

  • ④、调用CALayer的addAnimation:forKey:添加动画即可；

CALayer为动画支持提供了如下方法：

  • （1）、- (void)addAnimation:(CAAnimation )anim forKey:(NSString )key;为该CALayer添加一个动画，第二个参数为该动画指定key（相当于该动画的唯一标识，这样保证每个CALayer可绑定多个动画对象）；
  • （2）、- (CAAnimation )animationForKey:(NSString )key;控制该CALayer执行指定key所对应的动画；
  • （3）、- (void)removeAllAnimations;删除CALayer上添加的所有动画；
  • （4）、- (void)removeAnimationForKey:(NSString *)key;根据key删除该CALayer上指定的动画；
  • （5）、- (NSArray *)animationKeys;获取CALayer上添加的所有动画key所组成的数组；

1）、CABasicAnimation

  • ①、移动动画
- (void)move:(UIButton *)sender{
    //获取animationLayer的位置
    CGPoint fromPoint = animationLayer.position;
    CGPoint toPoint = CGPointMake(fromPoint.x + 80, fromPoint.y);
    //创建不断改变CALayer的position属性的属性动画
    CABasicAnimation* anim = [CABasicAnimation animationWithKeyPath:@"position"];
    //设置动画开始的属性值
    anim.fromValue = [NSValue valueWithCGPoint:fromPoint];
    //设置动画结束的属性值
    anim.toValue = [NSValue valueWithCGPoint:toPoint];
    anim.duration = 2;
    animationLayer.position = toPoint;
    anim.removedOnCompletion = YES;
    //添加动画到图层，注意key相当于给动画进行命名，以后获得该图层时可以使用此名称获取
    [animationLayer addAnimation:anim forKey:@"KCBasicAnimation_Translation"];
}
  • ②、旋转动画
- (void)rotationAnimation:(UIButton *)sender{
    //1.创建动画并指定动画属性
    CABasicAnimation *basicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //2.设置动画属性初始值、结束值
    //    basicAnimation.fromValue=[NSNumber numberWithInt:M_PI_2];
    basicAnimation.toValue=[NSNumber numberWithFloat:M_PI_2*3];
    //设置其他动画属性
    basicAnimation.duration=6.0;
    basicAnimation.autoreverses=true;//旋转后再旋转到原来的位置
    //4.添加动画到图层，注意key相当于给动画进行命名，以后获得该动画时可以使用此名称获取
    [animationLayer addAnimation:basicAnimation forKey:@"KCBasicAnimation_Rotation"];
}
  • ③、缩小放大
- (void)scaleAnimation:(UIButton *)sender{
    CABasicAnimation *pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    pulse.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    pulse.duration = 0.5 + (rand() % 10) * 0.05;
    pulse.repeatCount = 1;
    pulse.autoreverses = YES;
    pulse.fromValue = [NSNumber numberWithFloat:.8];
    pulse.toValue = [NSNumber numberWithFloat:1.2];
    [animationLayer addAnimation:pulse forKey:nil];
}

2）、CAKeyframeAnimation

- (void)scale:(UIButton *)sender{
    //创建不断改变CALayer的transform属性的属性动画
    CAKeyframeAnimation* anim = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    //设置CAKeyframeAnimation控制transform属性依次经过的属性值
    anim.values = [NSArray arrayWithObjects:[NSValue valueWithCATransform3D:imageLayer.transform],[NSValue valueWithCATransform3D:CATransform3DScale(imageLayer.transform, 0.2, 0.2, 1)],[NSValue valueWithCATransform3D:CATransform3DScale(imageLayer.transform, 2, 2, 1)],[NSValue valueWithCATransform3D:imageLayer.transform], nil];
    anim.duration = 5;
    anim.removedOnCompletion = YES;
    [imageLayer addAnimation:anim forKey:nil];
}

注意：path其他还有transform.scale = 比例转换、transform.scale.x = 宽的比例转换、transform.scale.y = 高的比例转换、transform.rotation.z = 平面圆的旋转、opacity = 透明度、backgroundColor=背景颜色、cornerRadius=圆角。。。

6、使用CAAnimationGroup控制动画方式

- (void)group:(UIButton *)sender{
    CGPoint fromPoint = imageLayer.position;
    CGPoint toPoint = CGPointMake(fromPoint.x + 80, fromPoint.y);
    //创建不断改变CALayer的position属性的属性动画
    CABasicAnimation* moveAnim = [CABasicAnimation animationWithKeyPath:@"positon"];
    //设置动画开始的属性值
    moveAnim.fromValue = [NSValue valueWithCGPoint:fromPoint];
    //设置动画结束的属性值
    moveAnim.toValue = [NSValue valueWithCGPoint:toPoint];
    moveAnim.duration = 6;
    imageLayer.position = toPoint;
    moveAnim.removedOnCompletion = YES;
    //--------------------
    //创建不断改变CALayer的transform属性的属性动画
    CABasicAnimation* transformAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    CATransform3D fromValue = imageLayer.transform;
    //设置动画开始的属性值
    transformAnim.fromValue = [NSValue valueWithCATransform3D:fromValue];
    //创建在X、Y两个方向上缩放为0.5的变换矩阵
    CATransform3D scaleValue = CATransform3DScale(fromValue, 0.5, 0.5, 1);
    //绕Z轴旋转180度的变换矩阵
    CATransform3D rotateValue = CATransform3DRotate(fromValue, M_PI, 0, 0, 1);
    //计算两个变换矩阵的和
    CATransform3D toValue = CATransform3DConcat(scaleValue, rotateValue);
    //设置动画结束的属性值
    transformAnim.toValue = [NSValue valueWithCATransform3D:toValue];
    //动画效果累加
    transformAnim.cumulative = YES;
    //动画重复执行次数，旋转360度
    transformAnim.repeatCount = 2;
    transformAnim.duration = 6;
    //位移、缩放、旋转组合起来执行
    CAAnimationGroup* animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:moveAnim,transformAnim, nil];
    animGroup.duration = 6;
    [imageLayer addAnimation:animGroup forKey:nil];
}

三、关于CAShapeLayer+ CAGradientLayer的动画

1、设定动画基础

- (void)viewDidLoad {
    [super viewDidLoad];
    CGFloat pathBorder = WIN_WIDTH/2;
    UIView* bgView = [[UIView alloc]initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20)];
    bgView.backgroundColor = [UIColor redColor];
    [self.view addSubview:bgView];
    //画出一个完成的进度的背景轨道
    //创建一个路径图层
    trackLayer = [CAShapeLayer layer];
    trackLayer.frame = CGRectMake(0, 100, pathBorder, pathBorder);
    trackLayer.fillColor = [[UIColor clearColor] CGColor];
    //指定path的渲染颜色
    trackLayer.strokeColor = [[UIColor redColor] CGColor];
    //背景同学你就甘心做背景吧，不要太明显了，透明度小一点
    trackLayer.opacity = 1;
    //指定线的边缘是圆的
    trackLayer.lineCap = kCALineCapRound;
    //线的宽度
    trackLayer.lineWidth = 4;
    //上面说明过了用来构建圆形
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(pathBorder/2, pathBorder/2) radius:(pathBorder-4)/2 startAngle:degreesToRadians(-360) endAngle:degreesToRadians(0) clockwise:YES];
    //把path传递給layer，然后layer会处理相应的渲染，整个逻辑和CoreGraph是一致的。
    trackLayer.path =[path CGPath];
    [bgView.layer addSublayer:trackLayer];

    //创建背景图层
    gradientLayer =  [CAGradientLayer layer];
    [gradientLayer setColors:[NSArray arrayWithObjects:
                              (id)[[[UIColor blackColor] colorWithAlphaComponent:1] CGColor],
                              (id)[[[UIColor yellowColor] colorWithAlphaComponent:1] CGColor],
                              (id)[[[UIColor purpleColor] colorWithAlphaComponent:1] CGColor],
                              (id)[[UIColor whiteColor] CGColor],
                              nil]];
    gradientLayer.frame = bgView.bounds;
    [gradientLayer setLocations:[NSArray arrayWithObjects:
                                 [NSNumber numberWithFloat:0.0],
                                 [NSNumber numberWithFloat:0.3],
                                 [NSNumber numberWithFloat:0.8],
                                 [NSNumber numberWithFloat:1.0],
                                 nil]];
    [gradientLayer setStartPoint:CGPointMake(0, 0.5)];
    [gradientLayer setEndPoint:CGPointMake(1, 0.5)];
    [bgView.layer addSublayer:gradientLayer];
    [gradientLayer setMask:trackLayer]; //用progressLayer来截取渐变层

    UIButton* btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(0, 20, self.view.frame.size.width, 40);
    [btn addTarget:self action:@selector(startGreenHeadAnimation) forControlEvents:UIControlEventTouchUpInside];
    [btn setTitle:@"动画跳转" forState:UIControlStateNormal];
    [self.view addSubview:btn];
}

2、移动路径图层动画

- (void)startGreenHeadAnimation{
    //动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 2;
    //获取animationLayer的位置
    CGPoint fromPoint = trackLayer.position;
    CGPoint toPoint = CGPointMake(fromPoint.x + WIN_WIDTH/2, fromPoint.y);
    //设置动画开始的属性值
    animation.fromValue = [NSValue valueWithCGPoint:fromPoint];
    //设置动画结束的属性值
    animation.toValue = [NSValue valueWithCGPoint:toPoint];
    trackLayer.position = toPoint;
    animation.removedOnCompletion = YES;
    [trackLayer addAnimation:animation forKey:@"position"];
}

这里写图片描述

总结：移动路径图层，背景图层不会跟着移动；

3、移动背景图层动画

- (void)startGreenHeadAnimation{
    //动画
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"position"];
    animation1.duration = 2;
    //获取animationLayer的位置
    CGPoint fromPoint1 = gradientLayer.position;
    CGPoint toPoint1 = CGPointMake(fromPoint1.x + WIN_WIDTH/2, fromPoint1.y);
    //设置动画开始的属性值
    animation1.fromValue = [NSValue valueWithCGPoint:fromPoint1];
    //设置动画结束的属性值
    animation1.toValue = [NSValue valueWithCGPoint:toPoint1];
    gradientLayer.position = toPoint1;
    animation1.removedOnCompletion = YES;
    [gradientLayer addAnimation:animation1 forKey:@"position"];
}

这里写图片描述

总结：移动背景图层，路径图层跟着移动；

4、同时移动路径图层和背景图层

- (void)startGreenHeadAnimation{

    //动画
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.duration = 2;
    //获取animationLayer的位置
    CGPoint fromPoint = trackLayer.position;
    CGPoint toPoint = CGPointMake(fromPoint.x + WIN_WIDTH/2, fromPoint.y);
    //设置动画开始的属性值
    animation.fromValue = [NSValue valueWithCGPoint:fromPoint];
    //设置动画结束的属性值
    animation.toValue = [NSValue valueWithCGPoint:toPoint];
    trackLayer.position = toPoint;
    animation.removedOnCompletion = YES;
    [trackLayer addAnimation:animation forKey:@"position"];

    //动画
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"position"];
    animation1.duration = 2;
    //获取animationLayer的位置
    CGPoint fromPoint1 = gradientLayer.position;
    CGPoint toPoint1 = CGPointMake(fromPoint1.x - WIN_WIDTH/2, fromPoint1.y);
    //设置动画开始的属性值
    animation1.fromValue = [NSValue valueWithCGPoint:fromPoint1];
    //设置动画结束的属性值
    animation1.toValue = [NSValue valueWithCGPoint:toPoint1];
    gradientLayer.position = toPoint1;
    animation1.removedOnCompletion = YES;
    [gradientLayer addAnimation:animation1 forKey:@"position"];
}

这里写图片描述

UIView动画
rccrx的博客
05-08 2844
UIView记录 对属性修改加动画：frame、bound、center、transform、alpha、backgroundColor UIViewAnimationOptions一些选项的使用示例、嵌套动画、transition动画、弹簧动画 关键帧动画 +performSystemAnimation:onViews:options:animations:completion: +performWithoutAnimation: +setAnimationsEnabled:
iOS动画篇：UIView动画
烽火连城的博客
05-12 559
iOS的动画效果一直都很棒很，给人的感觉就是很炫酷很流畅，起到增强用户体验的作用。在APP开发中实现动画效果有很多种方式，对于简单的应用场景，我们可以使用UIKit提供的动画来实现。 UIView动画简介 UIView动画实质上是对CoreAnimation的封装，提供简洁的动画接口。 UIView动画可以设置的动画属性有: 1、大小变化(frame) 2、拉伸变化(
UIView动画(过渡效果)的学习笔记 3
weixin_34232617的博客
02-20 284
UIView视图的动画功能，可以使在更新或切换视图时有放缓节奏、产生流畅的动画效果，进而改善用户体验。UIView可以产生动画效果的变化包括： 位置变化：在屏幕上移动视图。 大小变化：改变视图框架（frame）和边界。 拉伸变化：改变视图内容的延展区域。 改变透明度：改变视图的alpha值。 改变状态：隐藏或显示状态。 ...
Swift自定义UIView动画
12-23
在iOS开发中，Swift语言为开发者提供了丰富的工具来创建引人入胜的用户界面，其中自定义UIView动画是一项重要的技术。这篇博客文章“Swift自定义UIView动画”详细讲解了如何利用Swift来实现对UIView的动态效果，使得...
详解iOS开发中的转场动画和组动画以及UIView封装动画
09-03
总结来说，iOS开发中的转场动画和组动画提供了丰富的视图切换和复合动画效果，而UIView封装的动画则简化了日常开发中的动画实现。理解并熟练运用这些动画技术，能极大地提升应用的用户体验和视觉吸引力。
掌握UIView动画实现视图切换效果
涉及到的知识点主要聚焦于UIView动画和可能使用的工具或源码实践。由于描述部分没有提供详细内容，我们将从标题和标签提供的信息入手，同时参考压缩包子文件中的文件名称“UIViewDemo”进行知识点的展开。 ### 视图...
IOS 开发之UIView动画的实例详解
01-04
在你调用 beginAnimations:context:方法来启动一个动画后,动画并不会立即被执行,直 到你调用 UIView 类的 commitAnimations 类方法。你对一个视图对象执行的介于 beginAnimations:context:方法跟 commitAnimations...
安卓动画效果相关-android-transition非常酷的UI过渡动画.rar
07-29
android-transition非常酷的UI过渡动画.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
UIView的动画
Cola
03-10 400
iOS开发－UIView之动画效果的实现方法（合集） 前言：在开发APP中，我们会经常使用到动画效果。使用动画可以让我们的APP更酷更炫，最重要的是优化用户体验，但取决于动画的质量。像QQ、微信、新浪微博等APP，动画效果就很好了，至少我很喜欢它们的动画，让我使用起来感觉很顺畅，心情很开朗。本文会介绍UIView效果的实现方法，非核心动画。 一、使用
iOS－UIView动画
980404514_凡凡的专栏
04-06 1201
iOS－UIView动画 今天的主题是UIView的动画。 在iOS中UIView的动画是基于CALayer动画封装。 动画就是静态的图片通过一定频率显示，给人们动画的效果。 UIView动画有基于类方法的实现和基于Block方法块的实现。 一.UIView基于类方法的实现的使用 类方法列表： @interface UIView(UIViewAnimation) +
动画之UIView动画
webbzhao1的博客
09-12 420
动画之UIView动画UIView有三种类型的动画： animate动画 transition动画 animateKeyframes动画 animate动画它是对UIView的属性进行动画的一种方法，能进行动画显示的动画包括： - 位置和大小：bounds , frame , center - 背景与透明: backgroundColor , alpha - 转换: transform
iOS 视图（UIView）动画
weixin_46642112的博客
04-29 748
如果需要在视图（UIView）上进行一些简单动画，可以使用视图动画。视图动画底层也是使用Core Animation，只是动画的实现细节都封装起来了。UIKit类通常都有animated布尔型参数，它可以开启动画效果。 例： swift：func setOn(_ on:Bool,animated:Bool) objectiveC:-(void)setOn:(BOOL)on animated:(BO...
【动画1】UIView动画
dolacmeng的专栏
08-12 924
讲一下动画。将分为以下5篇博客。 一）UIView动画 二）Layer动画 三）3D动画 四）转场动画 五）第三方动画框架 一）UIView动画 UIKit已经给我们封装了动画，即UIView动画，使用起来十分方便： [UIView animateWithDuration:2.0 animations:^{ CGPoint point = CGP
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoxiaobukuang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值