iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >详解 iOS 系统中的视图动画
  • 492
分享到

详解 iOS 系统中的视图动画

ios视图动画 2022-05-16 09:05:24 492人浏览 独家记忆
摘要

目录哪些属性可以添加动画效果为视图的属性变化添加动画使用 Begin/Commit 方法做动画使用 lambda (block based method) 做动画嵌套动画实现动画的自

动画为用户界面的状态转换提供了流畅的可视化效果, 在 iOS 中大量使用了动画效果, 包括改变视图位置、 大小、 从可视化树中删除视图, 隐藏视图等。 你可以考虑用动画效果给用户提供反馈或者用来实现有趣的特效。

ioS 系统中, Core Animation 提供了内置的动画支持, 创建动画不需要任何绘图的代码, 你要做的只是激发指定的动画, 接下来就交给 Core Animation 来渲染, 总之, 复杂的动画只需要几行代码就可以了。

哪些属性可以添加动画效果

根据 iOS 视图编程指南中说明, UIView 内置支持为下列属性添加动画效果:

  • Frame 可以改变视图相对于上一级视图的位置和大小。 (如果视图已经经过了缩放、 旋转、平移之类的变换, 则需要修改 Center 和 Bounds 属性)
  • Bounds 改变视图大小。
  • Center 改变视图相对于上级视图的位置。
  • TransfORM 相对于中心点进行视图缩放、旋转和平移, 这个属性只能进行二维转换。 (如果要进行三维转换, 则必须用 CoreAnimation 操作视图的 Layer 属性。)
  • Alpha 改变视图的透明度。
  • BackgroundColor 修改视图的背景色。
  • ContentStretch 改变视图内容在视图的可用空间内的拉伸方式。

为视图的属性变化添加动画

为了给属性的变化添加动画效果, 需要把修改这些属性的代码放到指定的动画代码段 (animation block) 中。 只有在动画代码段中修改支持动画的属性, 才能添加动画效果。

使用 Begin/Commit 方法做动画

在 iOS 3.0 以及之前的系统中, 必须使用 UIView 的类方法 beginAnimations:context: 和 commitAnimations 来定义动画代码段, 在 begin 和 commit 之间的代码会在特殊的动画线程中运行, 因此不会阻塞主线程, 比如说要切换两个视图, 代码应该是这样子的:


[UIView beginAnimations:@"ToggleViews" context:nil];
[UIView setAnimationDuration:1.0];
 
// Make the animatable changes.
firstView.alpha = 0.0;
secondView.alpha = 1.0;
 
// Commit the changes and perform the animation.
[UIView commitAnimations];

在 Xamarin.iOS (MonoTouch) 平台下, begin/end 方法对应的绑定为:

  • public static void BeginAnimations (string animation)
  • public static void BeginAnimations (string animationID, IntPtr context)
  • public static void CommitAnimations ()

上面的切换视图的 C# 版本代码为:


UIView.BeginAnimations("ToggleViews");
UIView.SetAnimationDuration(1.0)
this.FirstView.Alpha = 0.0;
this.SecondView.Alpha = 1.0;
UIView.CommitAnidations();

在 Begin/Commit 函数之间, 可以通过下面的方法设置动画的参数和选项:

  • setAnimationStartDate:
  • setAnimationDelay:
  • setAnimationDuration:
  • setAnimationCurve:
  • setAnimationRepeatCount:
  • setAnimationRepeatAutoreverses:
  • setAnimationDelegate:
  • setAnimationWillStartSelector:
  • setAnimationDidStopSelector:
  • setAnimationBeginsFromCurrentState:

注意: 如果不是为了支持很旧的设备, 则推荐使用下面的 lambda (block based method) 来实现动画效果, 虽然 begin/commit 还能够使用, 按照官方的说法, 对新系统来说是不推荐的了。

使用 lambda (block based method) 做动画

在 iOS 4.0 以后, 引入了代码块 (code block) 的概念, 可以使用代码块来初始化动画, 这也是在 iOS 4.0 之后苹果推荐的做法, iOS SDK 提供的 api 如下:

  • animateWithDuration:animations:
  • animateWithDuration:animations:completion:
  • animateWithDuration:delay:options:animations:completion:

而在 Xamarin.iOS (MonoTouch) 平台下, 这些方法被绑定为下列方法:

  • public static void Animate(double duration, NSAction animation)
  • public static void Animate (double duration, NSAction animation, NSAction completion)
  • public static void Animate (double duration, double delay, UIViewAnimationOptions options, NSAction animation, NSAction completion)

还是切换视图的动画, 如果用 objective-c 的代码块来实现, 则应该是这样子的:


[UIView animateWithDuration:1.0 animations:^{
  self.firstView.alpha = 0.0;
  self.secondView.alpha = 1.0;
}];

如果用 C# 来实现的话, 应该是这样:


UIView.Animate(1.0, () => {
  this.FirstView.Alpha = 0.0f;
  this.SecondView.Alpha = 1.0f;
});

这样就实现了一个简单的渐变动画, 并且只能运行一次, 通常不能满足需求, 再来一个复杂点儿的:


[UIView animateWithDuration:1.0
    delay:0.0
    options:UIViewAnimationOptionCurveEaseIn
    animations:^{
      self.firstView.alpha = 0.0;
    }
    completion:^(BOOL finished){
      [UIView animateWithDuration:1.0
          delay:1.0
          options:UIViewAnimationOptionCurveEaseOut animations:^{
            self.firstView.alpha = 1.0;
          }
          completion:nil];
}];

对应的 C# 代码如下:


UIView.Animate(
  1.0,
  0.0,
  UIViewAnimationOptions.CurveEaseIn,
  () => this.FirstView.Alpha = 0.0f,
  () => {
    UIView.Animate(
      1.0,
      1.0,
      UIViewAnimationOptions.CurveEaseOut,
      () => this.FirstView.Alpha = 1.0f,
      null
    );
  }
);

嵌套动画

iOS 支持嵌套的动画, 也就是说在一个动画代码段中, 可以再开始另外一个动画代码段, 而不必等当前动画完成, 嵌套的动画会同时开始运行, 默认继承原来动画的延时、 时间长度、 加速曲线等, 不过这些选项也能被覆盖。 例如:


[UIView animateWithDuration:1.0
  delay:1.0
  options:UIViewAnimationOptionCurveEaseOut animations:^{
    self.firstView.alpha = 0.0f;
    // 这里开始一个新的动画
    [UIView animateWithDuration:1.0
      delay:0.0
      options:UIViewAnimationOptionOverrideInheritedCurve |
        UIViewAnimationOptionCurveLinear |
        UIViewAnimationOptionOverrideInheritedDuration |
        UIViewAnimationOptionRepeat |
        UIViewAnimationOptionAutoreverse
      animations:^{
        [UIView setAnimationRepeatCount:2.5];
        self.secondView.alpha = 0.0f;
      }
      completion:nil];
  }
  completion:nil
];

对应的 C# 代码如下:


UIView.Animate(
  1.0,
  1.0,
  UIViewAnimationOptions.CurveEaseIn,
  () => {
    this.FirstView.Alpha = 0.0;
    UIView.Animate(
      1.0,
      1.0,
      UIViewAnimationOptions.OverrideInheritedCurve |
      UIViewAnimationOptions.CurveLinear |
      UIViewAnimationOptions.OverrideInheritedDuration |
      UIViewAnimationOptions.Repeat |
      UIViewAnimationOptions.Autoreverse,
      () => {
        UIView.SetAnimationRepeatCount(2.f);
        this.SecondView.Alpha = 0.0;
      },
      null
    );
  },
  null
);

对于使用 Begin/Commit 方法的动画, 也可以嵌套调用 Begin/Commit 方法来实现嵌套的动画, 例如:


UIView.BeginAnimations("Animation1");
// Animation code Goes here
  // Start another animation
  UIView.BeginAnimations("Nested animation");
  // nested animations code goes here.
  UIView.CommitAnimations();
// other code
UIView.CommitAnimations();

这段 C# 代码对应的 ObjC 代码很简单, 就不写出来了。

实现动画的自动翻转

当创建自动翻转指定次数的动画时, 考虑将重复次数设置为非整数值。 因为对于自动翻转的动画来说, 每次循环都是从原始值变化到目标值再变化回原始值, 如果希望动画结束之后停留在目标值, 需要将重复次数设置加上 0.5 , 否则, 动画回慢慢变回原始值, 再迅速变化到目标值, 这可能不是原来期望的动画效果。

创建视图切换动画

视图切换动画可以减少修改可视化树时引起的界面上的突变, iOS 系统中大量使用了视图切换动画, 视图切换动画主要有下面两种场景:

  • 修改子视图
  • 替换子视图

注意: 不要把视图切换和视图控制器的切换混淆(显示一个模式对话框、将视图控制器推入导航堆栈等), 视图切换改变的仅仅是视图的可视化树, 视图控制器是不变的, 更多信息可以参考iOS视图控制器编程指南。

修改子视图

可以修改子视图的可见性用来表示当前视图的不同的状态, 看下面的两个视图切换的例子,在 iOS 4.0 之前, 需要将视图切换动画添加到 Begin/Commit 动画之间, 代码如下:

在 iOS 4.0 之后, 可以使用 transitionWithView:duration:options:animations:completion:


[UIView beginAnimations:@"toggleView" context:nil];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
[UIView setAnimationDuration:1.0];
// animation goes here
self.currentView.hidden = YES;
self.swapView.hidden = NO;
[UIView commitAnimations];

这里只有动画部分的代码, 动画完成之后请参考 setAnimationDelegate: 方法设置并实现 UIAnimationDelegate 。

替换子视图

要进行子视图的替换, 需要用到 transitionFromView:toView:duration:options:completion: 方法, 示例代码如下:


UIView *fromView = (self.displayPrimary ? self.view : self.secondView);
UIView *toView = (self.displayPrimary ? self.secondView : self.view);
UIViewAnimationOptions option = (self.displayPrimary ? UIViewAnimationOptionTransitionFlipFromRight
                : UIViewAnimationOptionTransitionFlipFromLeft);
[UIView transitionFromView:fromView toView:toView duration:1.0 options:option
  completion:^(BOOL finished) {
    if (finished) {
    self.displayPrimary = !self.displayPrimary;
    }
  }
];

链接多个动画

有了上面的知识, 链接多个动画就非常简单了:

  • 对于 lambda 或 block-based 方法的动画, 使用 complete 回调函数即可;
  • 对于 Begin/Commit 方法的动画, 需要实现一个 UIAnimationDelegate , 然后调用 setAnimationDelegate 方法设置 Delegate 即可。

以上就是详解 iOS 系统中的视图动画的详细内容,更多关于iOS 视图动画的资料请关注编程网其它相关文章!

--结束END--

本文标题: 详解 iOS 系统中的视图动画

本文链接: https://www.lsjlt.com/news/30491.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • iOS如何实现逐帧动画做loading视图
    这篇文章给大家分享的是有关iOS如何实现逐帧动画做loading视图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下我封装了一个可复用的loading视图组件,用于按照一定周期逐帧播放加载动画。代码如下...
    99+
    2023-06-15
  • oracle中的视图详解
    视图是Oracle数据库中的一种虚拟表,它是由一个或多个表的列组成的查询结果集。视图可以用来简化复杂的查询、隐藏表的细节、保护数据以...
    99+
    2023-08-14
    oracle
  • 详解在Python中创建条形图追赶动画
    目录前言方法一:使用 pause() 函数方法二:使用 FuncAnimation() 函数线性图动画Python 中的条形图追赶动画Python 中的散点图动画:条形图追赶的水平移...
    99+
    2024-04-02
  • 详解iOS如何让Lottie使用网络资源做动画的实现
    目录背景方案1. 实现LOTAnimationDelegate代理2. 生成LOTComposition3. 初始化LOTAnimationView背景 手上有需求需要使用CDN资源...
    99+
    2023-02-03
    iOS Lottie网络资源做动画 iOS Lottie
  • springMVC中的view视图详细解析
    目录1、ThymleafView2、转发视图3、重定向视图4、视图控制器view-controllerSpring MVC中的视图是view接口,视图的作用是渲染数据,将模型mode...
    99+
    2024-04-02
  • 横向滑动视图HorizontalScrollView精炼详解
    横向滑动视图(HorizontalScrollView)是一种Android中用于实现水平滑动效果的视图容器。它可以包含多个子视图,...
    99+
    2023-09-14
    详解
  • iOS RN启动中管理Native Module详解
    目录1. 全局的 native module 注册表2. RCTBridgeModule 协议 3. RCTModuleClasses中Class数据的处理4. Modul...
    99+
    2024-04-02
  • GoJs中的动画使用示例详解
    目录前言GoJs动画的使用使用默认的动画通过AnimationTrigger修改属性动画删除节点的动画提示性的回弹动画总结前言 在可视化图形的使用过程中,在图形初次渲染的时候、增加节...
    99+
    2023-05-18
    GoJs动画使用 GoJs动画
  • 动画详解Vue3的Composition Api
    目录回顾Option ApiOption Api的缺陷Composition Api 众所周知,Vue3.0带来了一个全新的特性——Composition A...
    99+
    2024-04-02
  • vue3过渡动画的详解
    目录一、vue中动画简单介绍二、vue的transition动画三、transition组件的实现原理四、transition过渡动画的class属性五、class的添加时机和命名规...
    99+
    2024-04-02
  • Sql Server中如何使用系统视图
    Sql Server中如何使用系统视图,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。一:那些系统视图1. 系统视图是干什么呢?...
    99+
    2024-04-02
  • 图文详解Clip-path实现按钮流动边框动画
    div::after, div::before{ - left: calc(110px - 120px); - top: calc(32px - 42px); - inset: -10px; }为伪元素添加动画效果,实现clip-pa...
    99+
    2023-05-14
    Clip-path
  • MySQL中数据视图操作详解
    目录1.视图概述1.1创建视图1.2视图的查询2.操作视图2.1通过视图操作数据2.2修改视图定义2.3删除视图1.视图概述 视图是从一个或多个表(或视图)导出的表。视图与表(有时为...
    99+
    2022-11-13
    MySQL数据视图操作 MySQL 视图操作 MySQL 视图
  • 详解django中视图函数的FBV和CBV
    目录1.什么是FBV和CBV2.普通FBV形式3.CBV形式3.1 CBV形式的路由3.2 CBV形式的视图函数4.CBV源码分析5.CBV添加装饰器的三种方式1.什么是FBV和CB...
    99+
    2024-04-02
  • iOS 11开发中iOS11应用视图的示例分析
    这篇文章给大家分享的是有关iOS 11开发中iOS11应用视图的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在iPhone或者iPad中,用户看到的和摸到的都是视图。视图是用户界面的重要组成元素。本节将...
    99+
    2023-06-04
  • 详解jQuery的animate动画方法及动画排队问题解决
    目录animate()动画方法 动画排队 delay()延迟方法 stop()停止动画方法 清空动画排队 动画排队问题 animate()动画方法 作用:执行css属性集...
    99+
    2024-04-02
  • mysql视图之创建可更新视图的方法详解
    本文实例讲述了mysql视图之创建可更新视图的方法。分享给大家供大家参考,具体如下: 我们知道,在mysql中,视图不仅是可查询的,而且是可更新的。这意味着我们可以使用insert或update语...
    99+
    2024-04-02
  • 详解Android系统启动过程
    目录计算机是如何启动的引导阶段加载内核阶段Android的启动过程init进程init.rc 文件service_manager 进程surface_flinger 进程media_...
    99+
    2024-04-02
  • PythonMatplotlib绘制动画的代码详解
    目录matplotlib 动画人口出生率男女人口总数雨滴matplotlib 动画 我们想制作一个动画,其中正弦和余弦函数在屏幕上逐步绘制。首先需要告诉matplotlib我们想要制...
    99+
    2024-04-02
  • ios开发 swift5 苹果系统自带的图标 SF Symbols
    文章目录 1.官网app的下载和使用2.使用代码 1.官网app的下载和使用 苹果官网网址:SF Symbols 通过上面的网址可以下载dmg, 安装到自己的mac上 貌似下面这样不能展示出动画,还是要使用动画的代码 .b...
    99+
    2023-08-30
    ios
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作