iOS开发之各种动画各种页面切面效果

简介:

 因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦。今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画。说道动画其中有一个是仿射变换的概念,至于怎么仿射的怎么变换的,原理如何等在本篇博客中不做赘述。今天要分享的是如和用动画做出我们要做的效果。

  今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把。好废话少说切入今天的正题。

  一.封装动画方法

    1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之。

#pragma CATransition动画实现
- (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIView *) view
{
    //创建CATransition对象
    CATransition *animation = [CATransition animation];
    
    //设置运动时间
    animation.duration = DURATION;
    
    //设置运动type
    animation.type = type;
    if (subtype != nil) {
        
        //设置子类
        animation.subtype = subtype;
    }
    
    //设置运动速度
    animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;
    
    [view.layer addAnimation:animation forKey:@"animation"];
}

    代码说明:

      CATransition常用的属性如下:

        duration:设置动画时间

        type:稍后下面会详细的介绍运动类型

        subtype:和type匹配使用,指定运动的方向,下面也会详细介绍

        timingFunction :动画的运动轨迹,用于变化起点和终点之间的插值计算,形象点说它决定了动画运行的节奏,比如是

                 均匀变化(相同时间变化量相同)还是先快后慢,先慢后快还是先慢再快再慢.    

                    *  动画的开始与结束的快慢,有五个预置分别为(下同):

                       *  kCAMediaTimingFunctionLinear            线性,即匀速

                       *  kCAMediaTimingFunctionEaseIn            先慢后快

                       *  kCAMediaTimingFunctionEaseOut           先快后慢

                       *  kCAMediaTimingFunctionEaseInEaseOut     先慢后快再慢

                       *  kCAMediaTimingFunctionDefault           实际效果是动画中间比较快.

 

    2.用UIView的block回调实现动画的代码封装 

#pragma UIView实现动画
- (void) animationWithView : (UIView *)view WithAnimationTransition : (UIViewAnimationTransition) transition
{
    [UIView animateWithDuration:DURATION animations:^{
        [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
        [UIView setAnimationTransition:transition forView:view cache:YES];
    }];
}

 

    3.改变View的背景图,便于切换时观察

1 #pragma 给View添加背景图
2 -(void)addBgImageWithImageName:(NSString *) imageName
3 {
4     self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:imageName]];
5 }

 

  二.调用上面的方法实现我们想要的动画

    1.我们在View上添加多个Button,给不同的Button设置不同的Tag值,然后再ViewController中绑定同一个方法,点击不同的button实现不同的页面切换效果。storyBoard上的控件效果如下图所示:

    2.下面我们就开始编写点击button要回调的方法

      (1).定义枚举来标示按钮所对应的动画类型,代码如下:

typedef enum : NSUInteger {
    Fade = 1,                   //淡入淡出
    Push,                       //推挤
    Reveal,                     //揭开
    MoveIn,                     //覆盖
    Cube,                       //立方体
    SuckEffect,                 //吮吸
    OglFlip,                    //翻转
    RippleEffect,               //波纹
    PageCurl,                   //翻页
    PageUnCurl,                 //反翻页
    CameraIrisHollowOpen,       //开镜头
    CameraIrisHollowClose,      //关镜头
    CurlDown,                   //下翻页
    CurlUp,                     //上翻页
    FlipFromLeft,               //左翻转
    FlipFromRight,              //右翻转
    
} AnimationType;

  

    (2),获取Button的Tag值:

1     UIButton *button = sender;
2     AnimationType animationType = button.tag;


    (3).每次点击button都改变subtype的值,包括上,左,下,右
NSString *subtypeString;
    
    switch (_subtype) {
        case 0:
            subtypeString = kCATransitionFromLeft;
            break;
        case 1:
            subtypeString = kCATransitionFromBottom;
            break;
        case 2:
            subtypeString = kCATransitionFromRight;
            break;
        case 3:
            subtypeString = kCATransitionFromTop;
            break;
        default:
            break;
    }
    _subtype += 1;
    if (_subtype > 3) {
        _subtype = 0;
    }

 

    (4),通过switch结合上边的枚举来判断是那个按钮点击的

1 switch (animationType)
2 {
3     //各种Case,此处代码下面会给出  
4 }


3.调用我们封装的运动方法,来实现动画效果

    (1),淡化效果

1         case Fade:
2             [self transitionWithType:kCATransitionFade WithSubtype:subtypeString ForView:self.view];
3             break;
4         

  

    (2).Push效果

1         case Push:
2             [self transitionWithType:kCATransitionPush WithSubtype:subtypeString ForView:self.view];
3             break;
4             

     效果如下:

   

 

    (3).揭开效果:

1         case Reveal:
2             [self transitionWithType:kCATransitionReveal WithSubtype:subtypeString ForView:self.view];
3             break;

    效果图如下:

    

 

    (4).覆盖效果

1         case MoveIn:
2             [self transitionWithType:kCATransitionMoveIn WithSubtype:subtypeString ForView:self.view];
3             break;
4             

      效果图如下:

    

 

    (5).立方体效果

1         case Cube:
2             [self transitionWithType:@"cube" WithSubtype:subtypeString ForView:self.view];
3             break;

    效果如下:

    

 

    (6).吮吸效果

1         case SuckEffect:
2             [self transitionWithType:@"suckEffect" WithSubtype:subtypeString ForView:self.view];
3             break;

      效果如下:

  

 

    (7).翻转效果

1         case OglFlip:
2             [self transitionWithType:@"oglFlip" WithSubtype:subtypeString ForView:self.view];
3             break;

    图如下:

    

 

    8.波纹效果

1         case RippleEffect:
2             [self transitionWithType:@"rippleEffect" WithSubtype:subtypeString ForView:self.view];
3             break;

    

 

    (9).翻页和反翻页效果

case PageCurl:
            [self transitionWithType:@"pageCurl" WithSubtype:subtypeString ForView:self.view];
            break;
            
        case PageUnCurl:
            [self transitionWithType:@"pageUnCurl" WithSubtype:subtypeString ForView:self.view];
            break;

  

 

    (10).相机打开效果

case CameraIrisHollowOpen:
            [self transitionWithType:@"cameraIrisHollowOpen" WithSubtype:subtypeString ForView:self.view];
            break;
            
        case CameraIrisHollowClose:
            [self transitionWithType:@"cameraIrisHollowClose" WithSubtype:subtypeString ForView:self.view];
            break;

 

  (11),调用上面封装的第二个动画方法

case CurlDown:
            [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionCurlDown];
            break;
        
        case CurlUp:
            [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionCurlUp];
            break;
            
        case FlipFromLeft:
            [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionFlipFromLeft];
            break;
            
        case FlipFromRight:
            [self animationWithView:self.view WithAnimationTransition:UIViewAnimationTransitionFlipFromRight];
            break;

相关文章
|
13天前
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
107 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
|
1月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
127 66
|
23天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
1月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
152 3
|
1月前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
2月前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
2月前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
2月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
49 2

热门文章

最新文章