App Store 顶部动画

App Store 中 Games、Apps、Updates 的顶部动画的特点:

  • 自然状态下是大标题,右边有一个 button
  • 顶上去时,变成小标题,右边按钮消失
  • 导航栏有毛玻璃效果的,可以透过底部的内容
  • 自然状态下,点击列表项进入下一级,大标题自动变为返回按钮,并有动画无缝衔接

网上提供的方案

网上提供的方案是在导航栏中以 subView 的方式加入一个 button,然后在 scrollview 的 scrollViewDidScroll 方法中,调整 button 的位置和大小。

和 App Store 的效果区别在,

  • 导航栏从大标题变为小标题过程中,按钮仍然是完全可见的。在 App Store 中,导航栏由大标题变为小标题的过程中,按钮是部分被截断的。
    于是自己打算自己写一个 Demo

尝试一(失败)

基本想法是把 Title 和 Button 作为 TableView 的 HeaderView,然后在 scrollViewDidScroll 中,设置 title。

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
if scrollView.contentOffset.y > 64 {
self.navigationItem.title = "Update"
} else {
self.navigationItem.title = nil
}
}

效果如下:

可以看到和 App Store 不同点在于,

  • 大标题下,点击跳转,没有动画。因为此时上一个 VC 的 Title 是 nil
  • 下拉过程中,标题没有变大的效果

尝试二

模仿网上的例子,使用系统的 largeTitleBar,在 navBar 上 addSubView

button 的 frame 不变,底部和 view 对齐。在滑动过程中,改变父 view 的大小,这样子可以有截断的效果,仍然保留了系统导航栏的下拉变大、控制器导航动画。效果如下:

但是仍有一个地方不好,就是 button 只有隐藏和显示两个状态,没有 alpha 值的变化。

加上 alpha 特效

根据返回手势的进度,调整 view 的 alpha 值即可。
navigationController 有一个手势属性 interactivePopGestureRecognizer。可以响应这个手势,得到转场动画的进度。

    navigationController?.interactivePopGestureRecognizer?.addTarget(self, action: #selector(type(of: self).onGesture(sender:)))

@objc func onGesture(sender: UIGestureRecognizer) {
switch sender.state {
case .began, .changed:
if let ct = navigationController?.transitionCoordinator {
topview.alpha = ct.percentComplete
}
case .cancelled, .ended:
return
case .possible, .failed:
break
}
}

效果如下:

参考

模仿 AppStore 顶部动画的更多相关文章

  1. 模仿京东顶部搜索条效果制作的一个小demo

    最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...

  2. JS实现回到页面顶部动画效果 2016.03.23

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS ...

  3. zepto返回顶部动画

    点击返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; v ...

  4. Android 模仿微信启动动画(转)

    本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的“七宗罪”: 第一宗罪,错字连篇,逻辑不清: 第二宗罪,文 ...

  5. Android 模仿微信启动动画

    本文内容 环境 项目结构 演示微信启动动画 本文演示微信启动动画.请点击此处下载,自行调试. 顺便抱怨一下,实践性(与研究性质的相对)技术博的"七宗罪": 第一宗罪,错字连篇,逻辑 ...

  6. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  7. chrome浏览器页面获取绑定返回顶部动画事件插件

    在chrome浏览器下页面加载: var top = $("body").scrollTop()  ; console.log(top)                      ...

  8. js 点击 返回顶部 动画

    附上效果图 触发前 触发后 HTML代码: CSS代码 JS代码 由于复制文本太丑了 所以直接放的图片  但是我在评论区把js代码又复制了一边 以便你们使用

  9. js回到顶部 动画速度 (自己记录)

    x=x-20; 设置回到每10s的速度, function gotoTop(){ var x=document.body.scrollTop||document.documentElement.scr ...

随机推荐

  1. github 如何添加项目代码

    1.点添加一个resporitory 2.添加的时候一定要选上下面的添加readme这个选项 3.点进去点code就能create file了.贴上代码就行.主要是第二步必须选对

  2. cubieboard安装小记

    1.1.使用ttl线 ttl线驱动程序:PL2303_Prolific_DriverInstaller_v1.7.0.exe(驱动精灵上下载) ttl终端:http://the.earth.li/~s ...

  3. 2018.09.16 bzoj3626: [LNOI2014]LCA(树链剖分)

    传送门 树链剖分好题. 对于每个点维护一个值vi" role="presentation" style="position: relative;"&g ...

  4. 2018.09.07 codeforces311B. Cats Transport(斜率优化dp)

    传送门 斜率优化dp好题. 对于第i只猫,显然如果管理员想从出发开始刚好接到它,需要在t[i]=h[i]−dist(1,i)" role="presentation" s ...

  5. linux week3

      2.如何快速的回到 上⼀一次所在的位置 cd An argument of - is equivalent to $OLDPWD.  cd -  #cd $OLDPWD cd - #快速的回到 上 ...

  6. C语言学生管理系统源码分享

    大家好 我就是如假包换的...陈玲 自从运营了C语言程序设计微信公众号 很多粉丝都给我备注 ...奇葩 实在是不敢当 也被人开始叫玲玲姐 我知道 很多人都想看我出境 我本人也有 年多的舞台演讲训练 实 ...

  7. 创建template模板

    创建一个自己常用的快捷键的模板. 1.选择window-->preferrence--搜索temp--java 2.点击new 3.根据自己的习惯起一个名字 4.比如syso 5.语法不会,就找 ...

  8. chandy-lamport 分布式一致性快照 算法详细介绍

    在一个分布式计算系统中,为了保证数据的一致性需要对数据进行一致性快照.Flink和spark在做流失计算的时候都借鉴了chandy-lamport算法的原理,这篇文章就是对chandy-lamport ...

  9. webuploader 文件上传总结

    $(function() { /** * 初始化Web Uploader */ var uploader = WebUploader.create({ swf : '../mobile/Uploade ...

  10. Qt .pro文件 详解

    1. TEMPLATE变量TEMPLATE描述了为建立目标文件而采用何种模板,即生成何种形式的Makefile文件.Qmake工具定义了5种模板:1. 应用程序App,为建立一个Qt应用程序创建Mak ...