iOS中的转场动画

2024-05-06 05:08
文章标签 ios 动画 转场

本文主要是介绍iOS中的转场动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在iOS开发中有时会有一些动画的需求,本篇博客我们说一下动画效果。本篇博客中的动画是动画中的一种--转场动画(CATransition)。

1.为导航控制器添加动画。

在一般的开发中在一个控制器push到下一个控制器的时候苹果会有一个默认的动画即下一个控制器平移过来将上一个控制器覆盖,大多数的应用也使用了苹果给出的默认动画效果。然而有些项目在一个控制器push到下一个控制器的时候却需要添加一些特殊的动画效果。如何添加这些特殊动画呢?我们实际是将这些动画添加到了控制器的视图图层上。看代码:

CATransition * transition = [CATransition animation];

    /*

     pageCurl            向上翻页

     pageUnCurl          向下翻页

     rippleEffect        滴水效果

     suckEffect          收缩效果,如一块布被抽走

     cube                立方体效果

     oglFlip             上下翻转效果

     */

    transition.type = @"cube"// 动画效果

    transition.duration = 1;    // 动画持续时间

    /*

     kCATransitionFromTop

     

     kCATransitionFromBottom

     

     kCATransitionFromRight

     

     kCATransitionFromLeft

     */

    transition.subtype = kCATransitionFromRight;    // 动画子类型,动画的方向

    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];   // 动画的轨迹模式

    

    [self.navigationController.view.layer addAnimation:transition forKey:nil];

    NextViewController * nextVC = [[NextViewController alloc] init];

    [self.navigationController pushViewController:nextVC animated:YES];

在使用了以上的这些代码之后我们在进行push的时候就会有不一样的动画效果了。

效果如下图:

这是一个立方体的效果。

   二. 为切换视图添加动画

有时我们在切换两个视图的时候也需要添加动画,实际动画还是添加在了图层上了。切换的两个视图是添加在同一个视图控制器的view上的。看代码:

    CGContextRef context = UIGraphicsGetCurrentContext();

    [UIView beginAnimations:nil context:context];

    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];

    [UIView setAnimationDuration:kDuration];

    switch (tag) {

        case 105:

            [UIView setAnimationTransition:UIViewAnimationTransitionCurlDown forView:self.view cache:YES];

            break;

        case 106:

            [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];

            break;

        case 107:

            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.view cache:YES];

            break;

        case 108:

            [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:self.view cache:YES];

            break;

        default:

            break;

    }

    

    NSUInteger green = [[self.view subviews] indexOfObject:self.greenView];

    NSUInteger blue = [[self.view subviews] indexOfObject:self.blueView];

    [self.view exchangeSubviewAtIndex:green withSubviewAtIndex:blue];

    

    [UIView setAnimationDelegate:self];

    // 动画完毕后调用某个方法

    //[UIView setAnimationDidStopSelector:@selector(animationFinished:)];

    [UIView commitAnimations];

下面的代码动画效果会更丰富一些:

CATransition *animation = [CATransition animation];

    animation.delegate = self;

    animation.duration = kDuration;

    animation.timingFunction = UIViewAnimationCurveEaseInOut;

    

    switch (tag) {

        case 101:

            animation.type = kCATransitionFade;

            break;

        case 102:

            animation.type = kCATransitionPush;

            break;

        case 103:

            animation.type = kCATransitionReveal;

            break;

        case 104:

            animation.type = kCATransitionMoveIn;

            break;

        case 201:

            animation.type = @"cube";

            break;

        case 202:

            animation.type = @"suckEffect";

            break;

        case 203:

            animation.type = @"oglFlip";

            break;

        case 204:

            animation.type = @"rippleEffect";

            break;

        case 205:

            animation.type = @"pageCurl";

            break;

        case 206:

            animation.type = @"pageUnCurl";

            break;

        case 207:

            animation.type = @"cameraIrisHollowOpen";

            break;

        case 208:

            animation.type = @"cameraIrisHollowClose";

            break;

        default:

            break;

    }

    animation.subtype = kCATransitionFromRight;

    

    

    NSUInteger green = [[self.view subviews] indexOfObject:self.greenView];

    NSUInteger blue = [[self.view subviews] indexOfObject:self.blueView];

    [[self.view layer] addAnimation:animation forKey:@"animation"];

    [self.view exchangeSubviewAtIndex:green withSubviewAtIndex:blue];


这篇关于iOS中的转场动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/963496

相关文章

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

【iOS】MVC模式

MVC模式 MVC模式MVC模式demo MVC模式 MVC模式全称为model(模型)view(视图)controller(控制器),他分为三个不同的层分别负责不同的职责。 View:该层用于存放视图,该层中我们可以对页面及控件进行布局。Model:模型一般都拥有很好的可复用性,在该层中,我们可以统一管理一些数据。Controlller:该层充当一个CPU的功能,即该应用程序

用Unity2D制作一个人物,实现移动、跳起、人物静止和动起来时的动画:中(人物移动、跳起、静止动作)

上回我们学到创建一个地形和一个人物,今天我们实现一下人物实现移动和跳起,依次点击,我们准备创建一个C#文件 创建好我们点击进去,就会跳转到我们的Vision Studio,然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类,继承自MonoBehaviour{private Rigidbo

动画AnimationDrawable、转动

现实开发中:很多地方都用到 点击动画的特效; 本案例本人做了三个关于“动” 画 的效果; 先上图: 总体图: A: B: 1:点击图片按钮,效果是:图片闪动; 通过在xml中定义:标签:animation-list来实现点击动画的效果;  是否循环标签:oneshot ;   时间间隔标签:duration ; 要显示的图片标签:drawable ;

13 transition数组的动画使用

划重点 动画:transitiontransition-group :数组动画数组的 添加 / 删除 豆腐粉丝汤 清淡又健康 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><me