再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

时间:2022-09-04 09:40:37

本系列文章中,我们将尝试再造手机QQ的侧滑菜单,力争最大限度接近手Q的实际效果,并使用 Auto Layout 仿造左侧菜单,实现和主视图的联动。

代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ

最终效果:

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

开发环境

本系列文章的开发环境为:

* OS X 10.10.3

* Xcode Version 6.3 (6D570)

基本数据采集

初步体验,手Q采用的应该是线性动画,即缩放比例等随着手指滑动的距离以一次方程的形式变化。动画达到最大幅度时截图如下(4.7 寸):

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

提取基本数据:

  1. 右侧主视图左边界距离屏幕左边界的距离占屏幕宽度的比例为:78%
  2. 右侧主视图的高度占屏幕高度的比例为:77%

找出线性关系

1. 比例与手指移动距离的关系

字比较丑 o(╯□╰)o。注意:式(1)中的 x 表示“手指移动距离”这个变量,和上面图中表示屏幕宽度的 x 意义不同。

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

2. 矩形中心向右移动距离和手指移动距离相等

实现侧滑

1. 新建项目,在 StoryBoard 中新增一个 View Controller,并新增一个名为 HomeViewController 的 UIViewController 类,并在 StoryBoard 中完成绑定。

2. 给 HomeViewController 设置背景颜色以示区分。也可以像我一样设一个大 Label 作为更明显的区分。

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

3. 给 HomeViewController 拖放一个 UIPanGestureRecognizer 并绑定到代码。

从右下角拖一个 Pan Gesture Recognizer 到主窗体上,这一步会让它与 HomeViewController.view 自动绑定。下图为第二步,绑定到代码。

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

3. 编写代码实现效果:

新建 Common.swift,存储屏幕宽度、高度:

import UIKit

struct Common {
static let screenWidth = UIScreen.mainScreen().applicationFrame.maxX
static let screenHeight = UIScreen.mainScreen().applicationFrame.maxY
}

修改 ViewController:

import UIKit

class ViewController: UIViewController {

    var homeViewController: HomeViewController!
var distance: CGFloat = 0 let FullDistance: CGFloat = 0.78
let Proportion: CGFloat = 0.77 override func viewDidLoad() {
super.viewDidLoad() // 给主视图设置背景
let imageView = UIImageView(image: UIImage(named: "back"))
imageView.frame = UIScreen.mainScreen().bounds
self.view.addSubview(imageView) // 通过 StoryBoard 取出 HomeViewController 的 view,放在背景视图上面
homeViewController = UIStoryboard(name: "Main", bundle: nil).instantiateViewControllerWithIdentifier("HomeViewController") as! HomeViewController
self.view.addSubview(homeViewController.view) // 绑定 UIPanGestureRecognizer
homeViewController.panGesture.addTarget(self, action: Selector("pan:"))
} override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
} // 响应 UIPanGestureRecognizer 事件
func pan(recongnizer: UIPanGestureRecognizer) {
let x = recongnizer.translationInView(self.view).x
let trueDistance = distance + x // 实时距离 // 如果 UIPanGestureRecognizer 结束,则激活自动停靠
if recongnizer.state == UIGestureRecognizerState.Ended { if trueDistance > Common.screenWidth * (Proportion / 3) {
showLeft()
} else if trueDistance < Common.screenWidth * -(Proportion / 3) {
showRight()
} else {
showHome()
} return
} // 计算缩放比例
var proportion: CGFloat = recongnizer.view!.frame.origin.x >= 0 ? -1 : 1
proportion *= trueDistance / Common.screenWidth
proportion *= 1 - Proportion
proportion /= 0.6
proportion += 1
if proportion <= Proportion { // 若比例已经达到最小,则不再继续动画
return
}
// 执行平移和缩放动画
recongnizer.view!.center = CGPointMake(self.view.center.x + trueDistance, self.view.center.y)
recongnizer.view!.transform = CGAffineTransformScale(CGAffineTransformIdentity, proportion, proportion)
} // 封装三个方法,便于后期调用 // 展示左视图
func showLeft() {
distance = self.view.center.x * (FullDistance + Proportion / 2)
doTheAnimate(self.Proportion)
}
// 展示主视图
func showHome() {
distance = 0
doTheAnimate(1)
}
// 展示右视图
func showRight() {
distance = self.view.center.x * -(FullDistance + Proportion / 2)
doTheAnimate(self.Proportion)
}
// 执行三种试图展示
func doTheAnimate(proportion: CGFloat) {
UIView.animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
self.homeViewController.view.center = CGPointMake(self.view.center.x + self.distance, self.view.center.y)
self.homeViewController.view.transform = CGAffineTransformScale(CGAffineTransformIdentity, proportion, proportion)
}, completion: nil)
} }

4. 查看效果

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果

再造 “手机QQ” 侧滑菜单(一)——实现侧滑效果的更多相关文章

  1. 再造 &OpenCurlyDoubleQuote;手机QQ” 侧滑菜单(三)——视图联动

    代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ 本 文中,我们将一起使用 UINavigationController 来管理主视图,并实现点击 ...

  2. 再造 &OpenCurlyDoubleQuote;手机QQ” 侧滑菜单(二)——高仿左视图

    代码示例:https://github.com/johnlui/SwiftSideslipLikeQQ 本篇文章中,我们将一起使用 Auto Layout 高仿手Q的左侧视图,力争达成从布局到动画的全 ...

  3. css3实现手机qq空间菜单按钮

    工作之余写的一个类似于QQzone的菜单效果 先上截图: 图一为点击按钮前界面: 图二为点击按钮后的界面 下面上代码: <!--css部分--> <style type=" ...

  4. Android带侧滑菜单和ToolBar的BaseActivity

    写Android的时候,可能有多个界面.在风格统一的软件中,写Activity时会有很多重复.例如我所在软工课程小组的项目:Github链接 ,里面的TaskListActivity和TeacherL ...

  5. 开源侧滑菜单SlidingMenu主要方法介绍

    SlidingMenu是一个很好使用的侧滑菜单开源项目,它的表现形式类似于DrawerLayout和SlidingDrawer,具体效果如下图所示,左侧为侧滑Menu菜单,右侧黑色部分为内容显示视图C ...

  6. Android 实现形态各异的双向侧滑菜单 自定义控件来袭&lpar;转载&rpar;

    1.概述 关于自定义控件侧滑已经写了两篇了~~今天决定把之前的单向改成双向,当然了,单纯的改动之前的代码也没意思,今天不仅会把之前的单向改为双向,还会多添加一种侧滑效果,给大家带来若干种形态各异的双向 ...

  7. Android组件——使用DrawerLayout仿网易新闻v4&period;4侧滑菜单

    摘要: 转载请注明出处:http://blog.csdn.net/allen315410/article/details/42914501 概述        今天这篇博客将记录一些关于DrawerL ...

  8. Android自定义顶部栏及侧滑菜单和fragment&plus;viewpag滑动切换的实现

    嘿嘿嘿,关于android滑动的操作,是不是经常都会用到呢. 我肯定也要学习一下啦. https://blog.csdn.net/u013184970/article/details/82882107 ...

  9. 自定义控件?试试300行代码实现QQ侧滑菜单

    Android自定义控件并没有什么捷径可走,需要不断得模仿练习才能出师.这其中进行模仿练习的demo的选择是至关重要的,最优选择莫过于官方的控件了,但是官方控件动辄就是几千行代码往往可能容易让人望而却 ...

随机推荐

  1. 转 用C API 操作MySQL数据库

    用C API 操作MySQL数据库 参考MYSQL的帮助文档整理 这里归纳了C API可使用的函数,并在下一节详细介绍了它们.请参见25.2.3节,“C API函数描述”. 函数 描述 mysql_a ...

  2. 洛谷P2279 &lbrack;HNOI2003&rsqb;消防局的设立

    题目描述 2020年,人类在火星上建立了一个庞大的基地群,总共有n个基地.起初为了节约材料,人类只修建了n-1条道路来连接这些基地,并且每两个基地都能够通过道路到达,所以所有的基地形成了一个巨大的树状 ...

  3. 手机端的各种默认样式比如 ios的按钮变灰色

    1.ios按钮变灰色,给按钮加样式: -webkit-appearance: none; 2.有圆角话 ; } 3.去除Chrome等浏览器文本框默认发光边框 input:focus, textare ...

  4. const中的一些tricky的地方

    1. 为了逻辑上的优化需要,const成员函数可能想修改某些成员变量,把这些成员变量定义为mutable可以绕过const的检查 2. 调用const和non-const的参数的函数可以重载 3. s ...

  5. No&period;1小白的HTML&plus;CSS心得篇

    一个web前端的小白,听前辈说写好笔记很关键,so 特此用博客来开始记录自己的旅程——Web之路 最近几天看的HTML 1.纠正一个认知错误 “HTML是一种编程语言”  ————(错) HTML ( ...

  6. HealthKit教程 Swift版:锻炼信息

    原文:HealthKit Tutorial with Swift: Workouts 作者:Ernesto García 译者:Mr_cyz ) 欢迎回到我们的HealthKit系列教程! 在我们系列 ...

  7. 进程锁Lock

    例1: 10个人去买票,先去查询余票,有票就去购买.代码如下: # ticket.py {"ticket": 1} # 只有一张票 import json import time ...

  8. ArcGIS AddIN 10&period;3项目与10&period;1项目的相互转换

    1. .sln修改 用记事本打开.sln文件,在最上面将10的I昂么修改为12的项目 将下图 修改为下图 反之亦然 2. .csproj项目修改 用记事本打开.csproj文件, vs 2010文件如 ...

  9. IntelliJ IDEA 中文乱码配置

    总共有下面几种乱码的解决方案: 工程乱码 执行main函数时,控制台乱码 运行tomcat时,控制台乱码 PS: 如果下面方案不生效时,打开IDEA安装目录找到 idea.exe.vmoptions( ...

  10. ELK Stack &lpar;1&rpar; —— ELK &plus; Redis安装

    ELK Stack (1) -- ELK + Redis安装 摘要 安装Elasticsearch.Logstash.Kibana与Redis以实现一个日志收集平台 版本 elasticsearch版 ...