iOS动画解析

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: iOS引入动画效果可以使我们的软件得到更好的用户体验,因此动画的深入研究无疑对于开发者一个很好的加分项。常见的iOS对动画的操作分为两类:CALayer层的操作UIView的操作 二者有何区别UIView里面包含有一个CALayer层UIView之所以能够在屏幕上显示出来,完全因为其内部拥有一个CALayer层CALayer层的操作更底层更轻量级、性能更高。

iOS引入动画效果可以使我们的软件得到更好的用户体验,因此动画的深入研究无疑对于开发者一个很好的加分项。

常见的iOS对动画的操作分为两类:

  1. CALayer层的操作

  2. UIView的操作

二者有何区别

  1. UIView里面包含有一个CALayer层

  2. UIView之所以能够在屏幕上显示出来,完全因为其内部拥有一个CALayer层

  3. CALayer层的操作更底层更轻量级、性能更高。

  4. UIView动画执行完毕之后不会反弹,而CALayer动画改变layer的状态位置,出现假象的改变,其实实际位置并没有改变

开发时如何选择二者:

  1. 每个UIView的操作其实是对CALayer层的封装,比较简单,优先选择UIView动画操作。

  2. 操作CALayer层更直接,能实现UIView所不能实现的功能

UIView动画

一、首尾式动画(经典的不能再经典啦)

    [UIView beginAnimations:nil context:nil] ;
    //需要执行动画的核心代码
     //设置动画执行时间
     [UIView setAnimationDuration:2.0];
     //设置代理
     [UIView setAnimationDelegate:self];
     //设置动画执行完毕调用的事件
     [UIView setAnimationDidStopSelector:@selector(didStopAnimation)];
    self.customView.center=CGPointMake(200, 300);
    [UIView commitAnimations];
+ (void)setAnimationDelegate:(id)delegate     设置动画代理对象,当动画开始或者结束时会发消息给代理对象

+ (void)setAnimationWillStartSelector:(SEL)selector   当动画即将开始时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector

+ (void)setAnimationDidStopSelector:(SEL)selector  当动画结束时,执行delegate对象的selector,并且把beginAnimations:context:中传入的参数传进selector

+ (void)setAnimationDuration:(NSTimeInterval)duration   动画的持续时间,秒为单位

+ (void)setAnimationDelay:(NSTimeInterval)delay  动画延迟delay秒后再开始

+ (void)setAnimationStartDate:(NSDate *)startDate   动画的开始时间,默认为now

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve  动画的节奏控制

+ (void)setAnimationRepeatCount:(float)repeatCount  动画的重复次数

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses  如果设置为YES,代表动画每次重复执行的效果会跟上一次相反

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache  设置视图view的过渡效果, transition指定过渡类型, cache设置YES代表使用视图缓存,性能较好

二、block动画(依旧也经典)

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

duration:动画的持续时间
delay:动画延迟delay秒后开始
options:动画的节奏控制
animations:将改变视图属性的代码放在这个block中
completion:动画结束后,会自动调用这个block
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion

duration:动画的持续时间
view:需要进行转场动画的视图
options:转场动画的类型
animations:将改变视图属性的代码放在这个block中
completion:动画结束后,会自动调用这个block

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

duration:动画的持续时间

options:转场动画的类型

animations:将改变视图属性的代码放在这个block中

completion:动画结束后,会自动调用这个block
options参数的详细的枚举

typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions) {
    UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // turn on user interaction while animating
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // start all views from current value, not initial value
    UIViewAnimationOptionRepeat                    = 1 <<  3, // repeat animation indefinitely
    UIViewAnimationOptionAutoreverse               = 1 <<  4, // if repeat, run animation back and forth
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // ignore nested duration
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing
    UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // do not inherit any options or animation type

    UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,
    UIViewAnimationOptionCurveLinear               = 3 << 16,

    UIViewAnimationOptionTransitionNone            = 0 << 20, // default
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
} NS_ENUM_AVAILABLE_IOS(4_0);

CALayer层动画

CALayer的两个属性:

  1. position位置(原点为父类的(0,0))

  2. anchorPoint 锚点(默认原点在自身长和宽各一半的交点(0.5,0.5))

什么是隐式动画

简单说,每个控件都有一个自带的CALayer层,这个层称为根层,与之相对于的就是非根层,非根层的的属性改变就会默认引发动画,这样的动画就可以称为隐式动画

若项目需求要求不能够动画效果,如何关闭隐式动画?

    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    //......这里修改你想修改的Layer属性就不会产生默认的隐式动画
    [CATransaction commit];

Layer层的动画分类这里写图片描述

CAAnimation是所有动画类的父类,它和CAPropertyAnimation不能直接使用,应该使用它的子类CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup

CABasicAnimation基础动画

  • fromValue:keyPath相应属性值的初始值

  • toValue:keyPath相应属性的结束值

  • byValue : 增加多少值(注意对比toValue的意思)

  • keyPath内容是CALayer的可动画Animation属性

 // 1.创建动画对象
    CABasicAnimation *anim = [CABasicAnimation animation];

    // 2.设置动画对象
    // keyPath决定了执行怎样的动画, 调整哪个属性来执行动画
    anim.keyPath = @"transform.translation.x";
    anim.toValue = @(100);
    //执行的时间
    anim.duration = 2.0;
    //加入下面两行,当动画结束时,layer所在的位置不会回到初始位置
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
     // 3.添加动画
    [self.layer addAnimation:anim forKey:nil];

CAKeyframeAnimation关键帧动画

CAKeyframeAnimation是CABasicAnimation的升级版,CABasicAnimation只能改变一组属性动画就停止了,而CAKeyframeAnimation可以运行关于一个属性的一个数组的数据(这里需要特别注意是同一个属性的一组数据)

  • values:所有的值

  • path:路线

  • keyTimes:可以为对应的关键帧制定对应的时间点,取值范围是0到1.0

注意:path和values二者是相互排斥的,二者选取一个即可

values例子:

        CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
        anim.keyPath = @"transform.rotation";
        anim.values = array;
        anim.duration = 0.25;
        // 动画的重复执行次数
        anim.repeatCount = MAXFLOAT;
          // 保持动画执行完毕后的状态
        anim.removedOnCompletion = NO;
        anim.fillMode = kCAFillModeForwards;
        [self.redView.layer addAnimation:anim forKey:nil];

path例子:

CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];

    anim.keyPath = @"position";
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.duration = 2.0;

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 200, 200));
    anim.path = path;
    CGPathRelease(path);

    // 设置动画的执行节奏
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.delegate = self;

    [self.redView.layer addAnimation:anim forKey:nil];

CAAnimationGroup 动画组

我们上面两个动画类都是只能对同一个属性进行修改产生动画,而不能同时修改两个参数属性。所有就引入了CAAnimationGroup动画组
最经典的莫过于:边旋转边缩放边移动的动画效果,其实就是前面的基础动画加入到动画组形成的

// 1.创建旋转动画对象
    CABasicAnimation *rotate = [CABasicAnimation animation];
    rotate.keyPath = @"transform.rotation";
    rotate.toValue = @(M_PI);

    // 2.创建缩放动画对象
    CABasicAnimation *scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    scale.toValue = @(0.0);

    // 3.平移动画
    CABasicAnimation *move = [CABasicAnimation animation];
    move.keyPath = @"transform.translation";
    move.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];

    // 4.将所有的动画添加到动画组中
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[rotate, scale, move];
    group.duration = 2.0;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;

    [self.myvie.layer addAnimation:group forKey:nil];

CATransition转场动画

提供移除屏幕和移入屏幕的动画效果

   /** 转场动画代码 */
    // 创建转场动画对象
    CATransition *anim = [CATransition animation];

    // 设置转场类型
    anim.type = @"pageCurl";

    // 设置动画的方向
    anim.subtype = kCATransitionFromLeft;

    anim.duration = 3;

    [_imageV.layer addAnimation:anim forKey:nil];
  • type:动画过渡类型
  • subtype:动画过渡方向

附一张type参照表

这里写图片描述

+(void)transitionWithView:(UIView*)view duration:(NSTimeInterval)duration options:
(UIViewAnimationOptions)options 
animations:(void(^)(void))animations 
completion:(void(^)(BOOLfinished))completion;
  • duration:动画的持续时间
  • view:需要进行转场动画的视图
  • options:转场动画的类型
  • animations:将改变视图属性的代码放在这个block中
  • completion:动画结束后,会自动调用这个block
+ (void)transitionFromView:(UIView*) fromView 
toView:(UIView*) toViewduration:(NSTimeInterval)durationoptions:(UIViewAnimationOptions) options 
completion:(void(^)(BOOLfinished))completion;
  • duration:动画的持续时间
  • options:转场动画的类型
  • animations:将改变视图属性的代码放在这个block中
  • completion:动画结束后,会自动调用这个block

动画代理

动画也是存在代理的,实现代理可以在动画开始的时候调用和动画结束的时候调用的时候做些事情

 anim.delegate = self;
 #pragma mark 动画开始的时候调用
- (void)animationDidStart:(CAAnimation *)anim
{

}
#pragma mark 动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{

}
相关文章
|
2月前
|
IDE Android开发 iOS开发
深入解析Android与iOS的系统架构及开发环境差异
本文旨在探讨Android和iOS两大主流移动操作系统在系统架构、开发环境和用户体验方面的显著差异。通过对比分析,我们将揭示这两种系统在设计理念、技术实现以及市场策略上的不同路径,帮助开发者更好地理解其特点,从而做出更合适的开发决策。
164 2
|
2月前
|
安全 Android开发 iOS开发
安卓与iOS的较量:技术特性与用户体验的深度解析
在移动操作系统的战场上,安卓和iOS一直占据着主导地位。本文将深入探讨这两大平台的核心技术特性,以及它们如何影响用户的体验。我们将从系统架构、应用生态、安全性能和创新功能四个方面进行比较,帮助读者更好地理解这两个系统的异同。
71 3
|
17天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
33 1
|
26天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
47 5
|
1月前
|
开发工具 Android开发 iOS开发
深入解析安卓与iOS开发环境的优劣
【10月更文挑战第4天】 本文将深入探讨安卓和iOS两大主流移动操作系统的开发环境,从技术架构、开发工具、用户体验等方面进行详细比较。通过分析各自的优势和不足,帮助开发者更好地理解这两个平台的异同,从而为项目选择最合适的开发平台提供参考。
24 3
|
19天前
|
安全 5G Android开发
安卓与iOS的较量:技术深度解析
【10月更文挑战第24天】 在移动操作系统领域,安卓和iOS无疑是两大巨头。本文将深入探讨这两个系统的技术特点、优势和不足,以及它们在未来可能的发展方向。我们将通过对比分析,帮助读者更好地理解这两个系统的本质和内涵,从而引发对移动操作系统未来发展的深思。
35 0
|
1月前
|
安全 Android开发 iOS开发
深入解析:安卓与iOS的系统架构及其对应用开发的影响
本文旨在探讨安卓与iOS两大主流操作系统的架构差异,并分析这些差异如何影响应用开发的策略和实践。通过对比两者的设计哲学、安全机制、开发环境及性能优化等方面,本文揭示了各自的特点和优势,为开发者在选择平台和制定开发计划时提供参考依据。
52 4
|
2月前
|
搜索推荐 Linux Android开发
深入解析安卓与iOS系统架构设计差异
本文旨在探讨Android和iOS两大主流操作系统在架构设计上的根本差异。通过分析两种系统的设计理念、核心组件以及实际应用表现,揭示它们如何反映不同的开发哲学和用户体验策略。我们将从系统层级结构、内存管理机制、用户界面设计三个方面入手,逐一对比Android的开放性和灵活性如何与其对手iOS的封闭性和一致性相互辉映。
|
5天前
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
16 2
|
1月前
|
缓存 Java 程序员
Map - LinkedHashSet&Map源码解析
Map - LinkedHashSet&Map源码解析
67 0

推荐镜像

更多