动画特效三:搜索动画

本节我们看看搜索动画,也就是点击所搜框,上面的导航或者标题栏会被“顶”上去。先看看效果图。

业务描述:

1. 点击搜索框,上面的标题栏会被“顶”上去,同时会显示遮罩效果。

2. 然后你点击遮罩层或者“Cancel”按钮,标题栏又被弹回来。

大家也许会感觉到奇怪,这个动画效果,用UIView的block动画,实现起来并不困难。但这并不是本节讲述的重要。我这里的UI布局,是基于autolayout的;所以这里的动画是对约束的操作,并不是对frame的操作。基于此动画,我也会延伸讲解一下autolayout实现的基本原理。

一、UI布局。

上面的UI元素全都是使用autolayout布局。而本节中的动画效果其实就是针对NavView执行的动画。它的约束列表如下:

观察动画效果:我们可以发现,此动画其实就是将NavView推出父View并且推动的距离就是NavView自己的高度。所以我们可以连线 "Top Space to: Superview"这个约束,然后对其进行动画操作。约束连线代码如下:

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *navTop;

二、动画效果分析。

1. 先看看SearchBar部分的动画效果(注意到SearchBar获取焦点后,"Cancel" 按钮文字颜色变了,并且边框有了颜色)

边框颜色其实很简单,就是来回切换SearchBar的背景图片。

而“Cancel”按钮文字颜色则有点复杂,UISearchBar的文字颜色,你通过设置color等相关属性是不起作用的。其实它本身属于UIBarButtonItem范畴,所以我们可以通过改变appearance来达到目的。而且初始化的代码只需要执行一次,所以可以将代码放在initialize方法中,代码如下:

+ (void)initialize {
    UIBarButtonItem *item = [UIBarButtonItem appearance];

    NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
    attrs[NSForegroundColorAttributeName] = [UIColor colorWithRed:77/255.0 green:179/255.0 blue:179/255.0 alpha:1];
    [item setTitleTextAttributes:attrs forState:UIControlStateNormal];

    NSMutableDictionary *attrsDisabled = [NSMutableDictionary dictionary];
    attrsDisabled[NSForegroundColorAttributeName] = [UIColor grayColor];
    [item setTitleTextAttributes:attrsDisabled forState:UIControlStateDisabled];
}

2. 标题栏往上“顶”的动画效果。

即应该实现SearchBar的代理方法,完成动画。

-(void)searchBarTextDidBeginEditing:(UISearchBar *)searchBar {
    //[searchBar becomeFirstResponder];
    // 边框颜色
    searchBar.backgroundImage= [UIImage imageNamed:@"bg_login_textfield_hl"];
    // cancel 文字(它其实是UIBarButtonItem,所以要显示它,必须进行相印的设置(如字体颜色),在 + (void)initialize方法中)
    [searchBar setShowsCancelButton:YES animated:YES];

    self.navTop.constant = -62;
    [UIView animateWithDuration:0.25 animations:^{
        // 执行约束动画
        [self.view layoutIfNeeded];
        self.cover.alpha = 0.4;
    }];
}

观察约束动画与frame动画的不同点(frame动画是将最终动画结束的值放在UIView的block代码中,而约束动画是将约束最终改变的值事先赋值好,然后再执行动画)。

三、iOS中自动布局流程及相关方法

注意到:上面强制执行动画的代码是[self.view layoutIfNeeded].下面我就相关的几个方法及autolayout自动布局过程进行说明。

1、layoutSubviews

在iOS5.1和之前的版本,此方法的缺省实现不会做任何事情(实现为空),iOS5.1之后(iOS6开始)的版本,此方法的缺省实现是使用你设置在此view上面的constraints(Autolayout)去决定subviews的position和size。 UIView的子类如果需要对其subviews进行更精确的布局,则可以重写此方法。只有在autoresizing和constraint-based behaviors of subviews不能提供我们想要的布局结果的时候,我们才应该重写此方法。可以在此方法中直接设置subviews的frame。
我们不应该直接调用此方法,而应当用下面两个方法。而关于layoutSubviews的使用,我在《UICollectionView详解五:瀑布流》中也介绍过,可以实现横屏与竖屏的切换来到达在不同情况下,显示的瀑布流的列数不一致。

2、setNeedsLayout

此方法会将view当前的layout设置为无效的,并在下一个upadte cycle里去触发layout更新。

3、layoutIfNeeded

使用此方法强制立即进行layout,从当前view开始,此方法会遍历整个view层次(包括superviews)请求layout。因此,调用此方法会强制整个view层次布局。

基于约束的的方法:

1、setNeedsUpdateConstraints

当一个自定义view的某个属性发生改变,并且可能影响到constraint时,需要调用此方法去标记constraints需要在未来的某个点更新,系统然后调用updateConstraints.

2、needsUpdateConstraints

constraint-based layout system使用此返回值去决定是否需要调用updateConstraints作为正常布局过程的一部分。

3、updateConstraintsIfNeeded

立即触发约束更新,自动更新布局。

4、updateConstraints

自定义view应该重写此方法在其中建立constraints. 注意:要在实现在最后调用[super updateConstraints]

Auto Layout Process 自动布局过程与使用springs and struts(autoresizingMask)比较,Auto layout在view显示之前,多引入了两个步骤:updating constraints 和laying out views。每一个步骤都依赖于上一个。display依赖layout,而layout依赖updating constraints。 updating constraints->layout->display

第一步:updating constraints,被称为测量阶段,其从下向上(from subview to super view),为下一步layout准备信息。可以通过调用方法setNeedUpdateConstraints去触发此步。constraints的改变也会自动的触发此步。但是,当你自定义view的时候,如果一些改变可能会影响到布局的时候,通常需要自己去通知Auto layout,updateConstraintsIfNeeded。自定义view的话,通常可以重写updateConstraints方法,在其中可以添加view需要的局部的constraints。

第二步:layout,其从上向下(from super view to subview),此步主要应用上一步的信息去设置view的center和bounds。可以通过调用setNeedsLayout去触发此步骤,此方法不会立即应用layout。如果想要系统立即的更新layout,可以调用layoutIfNeeded。另外,自定义view可以重写方法layoutSubViews来在layout的工程中得到更多的定制化效果。

第三步:display,此步时把view渲染到屏幕上,它与你是否使用Auto layout无关,其操作是从上向下(from super view to subview),通过调用setNeedsDisplay触发,因为每一步都依赖前一步,因此一个display可能会触发layout,当有任何layout没有被处理的时候,同理,layout可能会触发updating constraints,当constraint system更新改变的时候。

需要注意的是,这三步不是单向的,constraint-based layout是一个迭代的过程,layout过程中,可能去改变constraints,有一次触发updating constraints,进行一轮layout过程。

注意:如果你每一次调用自定义layoutSubviews都会导致另一个布局传递,那么你将会陷入一个无限循环中。

如下图:

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 00:42:43

动画特效三:搜索动画的相关文章

分享web前端七款HTML5 Loading动画特效集锦

以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动画,那将是一件非常痛快的事情. 1.HTML5 Canvas发光Loading动画 之前我们分享过很多基于CSS3的Loading动画效果,相信大家都很喜欢.今天我们要来分享一款基于HTML5 Canvas的发光Loading加载动画特效.Loading旋转图标是在canvas画布上绘制的,整个lo

CSS3单选框动画特效实现步骤详解

在前端开发中,我们常常使用CSS3技术来实现单选框的动画特效,对于前端菜鸟而言,可能对这部分内容还不是很熟悉,今天就和大家分享一个这方面的案例,希望对大家学习CSS3技术有所帮助,一起来看看吧. 首先,来看一下我们的第一个特效 注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的.可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现. <divclass="radio-1"> <inp

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

有时候就是看不进论文-jQuery动画特效篇&amp;MySQL

hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为: $(selector).hide(speed,[callback])和$(selector).show(speed,[callback]) 参数speed设置隐藏或显示时的速度值,可为“slow”.“fast”或毫秒数值,可选项参数

10款基于jquery的web前端动画特效

1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要介绍的也是一款基于jQuery的横向手风琴图片切换动画,鼠标滑过图片时即可展开,并且图片上方有文字标题,非常实用. 在线演示 源码下载 2.jQuery/CSS3渐变颜色拾取器 之前我们向大家分享过一款功能十分强大的jQuery颜色拾取器,支持透明度的选取.今天要为大家介绍的同样是一款基于jQuer

Android ListView动画特效实现原理及源码

Android 动画分三种,其中属性动画为我们最常用动画,且能满足项目中开发几乎全部需求,google官方包支持3.0+,我们可以引用三方包nineoldandroids来失陪到低版本.本例子中就是用属性动画实现效果. 对普通的View做动画,我们只要定义好要的动画ObjectAnimator或AnimatorSet,然后设置属性启动及可.但是,对ListView做动画应该如何.什么时候.在什么地方.对哪个View做动画属性呢? github上有成熟的listview动画包 https://gi

仿Material UI框架的动画特效

Material UI是一款功能非常强大,界面却十分清新简洁的CSS框架,Material UI利用了Google的Material Design 全新设计语言,并且让每一个UI组件都变得非常独立,因此开发者使用Material UI也会比较简单.和Bootstrap类似,Material UI提供了很多常用的UI组件,除了最基本的菜单.按钮.滑动杆.进度条.单选框/复选框外,它还提供了一个非常有趣的日历组件,另外还提供了一些很有趣的图标. 不过,这里我并不打算介绍Material UI的使用,

Android Animation动画详解(二): 组合动画特效

前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一番,然后再过来跟着我一起学习如何把简单的动画效果组合在一起,做出比较酷炫的动画特效吧. 一. 动画的续播 如题,大家想想,如果一个页面上包含了许多动画,这些动画要求按顺序播放,即一个动画播放完成后,继续播放另一个动画,使得这些动画具有连贯性.那该如何实现呢? 有开发经验或者是逻辑思维的人肯定会想,对

Android的Activity切换动画特效库SwitchLayout,视图切换动画库,媲美IOS

由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动画的Android视图切换动画特效库!SwitchLayout!可以说是目前Android上第一个,也是唯一的一个强大的视图切换动画库引擎! 作者:谭东 QQ:852041173 项目开源!推荐使用jar包形式! 没有经过作者允许,不可修改项目库源码自行发布. 如果你的项目中使用了SwtichLay