订阅本站
详细阅读

QQ中未读气泡拖拽消失的实现分析

QQ中针对强迫症有个很棒的交互,对于那些暂时不想理会的未读信息气泡,可以直接手指拖拽去掉。 今天我们就来重现一下这个功能。最终用到一个项目中的效果类似这样。 说到实时的形变,我立马想到的还是 CADisplayLink + UIBezierPath 的神奇组合!具体细节可以参考一下我之前的一篇博文。 【2015.6.14更新】由于屏幕刷新频率和手指拖动的速度无法保持一致,故会出现看到尖角的bug。最终我在panGesture 中的UIPanGestureStateChanged中去实时重绘贝塞尔曲线,完美解决! 这个交互中,难点在于如何绘制贝塞尔曲线。而线又是由点组成的。所以最终归根结底我们还是要找个关键点的坐标。一图胜千言。下面,我绘制了一幅分析图,这样一来问题就转化成了一个高中数学求点坐标的题目了。 Tips: OA ⊥ AB, PB ⊥ AB ,且 OA=PB=d/2. 现在我们已经有了数学表达式,接下来就是要把数学表达式转化成代码了。 我们需要创建一系列变量: ...
详细阅读

CADisplayLink结合UIBezierPath的神奇妙用

做过iOS动画的朋友都知道,动画中一大头疼之处就是弹性、形变之类扭曲的效果。iOS7开始,我们开始可以直接使用UiView的渲染动画API实现简单的弹性效果。 + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0); dampingRatio是阻尼系数,取值范围0~1,决定弹性效果的明显程度; velocity是初速度。 ...
详细阅读

在Swift项目中使用OC,在OC项目中使用Swift

几天前,我开始新的App的开发了。终于有机会把swift用在实战中了,也学到了之前纯学语法时没有机会获得的知识。 这篇博文中,我就如何使用swift、OC混编做一个介绍。 OC中使用Swift 首先,在工程的 Build Settings 中把 defines module 设为 YES. 然后,把 product module name 设置为项目工程的名字。 最后一步,在你的OC文件中导入 ProjectName-Swift.h. 注意:ProjectName-Swift.h 这个文件是系统自己创建的,千万不要手动创建。 Swift中使用OC Swift代码引用OC,需依靠 Objective-C bridging header 将相关文件暴露给Swift。 创建 ...
详细阅读

iOS8新特性——UIPresentation在转场动画中的使用

iOS8中苹果给我们来带来了一个新的类—— UIPresentationController。和UIViewControllerTransitioning一样,它也是配合自定义过渡的。在实践中,往往也是配合UIViewControllerTransitioning一起来实现自定义的转场动画。今天我们要实现的一个转场是这样的: 我们的 UIPresentationController 的子类是负责「被呈现」(presented) 及「负责呈现」(presenting) 的 controller 以外的 controller 的,看着很绕口,说白了,在我们的例子中,它负责的仅仅是那个带渐变效果的黑色模糊背景 View和背景视图的动态缩放。 UIPresentationController.h 的内容其实不多,也就80行代码。其中我们我们必须实现的有这四个方法: - (void)presentationTransitionWillBegin;////在呈现过渡即将开始的时候被调用的 - (void)presentationTransitionDidEnd:(BOOL)completed;////在呈现过渡结束时被调用的 ...
详细阅读

iOS自定义转场详解03——实现通过圆圈放大缩小的转场动画

这个转场系列的第三篇。我已经感觉到有些许轻车熟路了。我也不知道会不会有第四篇第五篇,总之,当我看到优秀的动画,并在我能力范围能落实的,我都会把实现思路写下来,分享出来。 这是第三篇的转场动画的Demo: 实现原理: 第一步:布置界面 这步已经真的没什么好说的了,快进。 唯一有一个小技巧就是,在刚创建一个项目的时候,Storyboard里面已有一个默认的ViewController。而这时候你想要让一个NavigationController去控制全部的ViewController,这时候你可以在Editor->Embed in->Navigation Controller里面完成这一步,下如图。 界面画好了,按住 control 拖动实现push的 Segue。 现在运行,就简单地完成了原生的Push/Pop动画: 第二步:实现圆圆圈从小放大的动画 新建一个文件 PingTransition : @interface PingTransition ...
详细阅读

iOS自定义转场详解02——实现Keynote中的神奇移动效果

Keynote,看过苹果发布会的朋友都不会对Keynote感到陌生。对,就是当年乔帮主应忍受不了微软的PPT于是开发的一款自己使用但是后来放到了iWork里面向大众公布出来的一款幻灯片制作软件。其酷炫并且符合逻辑的动画效果令人影响深刻,也帮助了演讲者更生动地完成演讲。 我就是一个重度的Keynote骨灰级使用者。我用Keynote已经有3年了,平时我要做图、做软件的原型、甚至是一些交互动画全是拿keynote完成的。就是因为Keynote这款软件的易用性已经让我不会傻到同时有笨重的PS、AE和轻便的Keynote我会放弃后者而使用前者。我保证你用过Keynote之后也一定会上瘾的。后期有机会我一定要出一个keynote使用心得,关于如何做出优秀的幻灯片的一些体会,以及如果使用keynote做出App交互原型。 其中Keynote有一个无论是视觉层面还是逻辑层面都很出色的动画效果,叫做 神奇移动(Magic Move) 。大概感觉就像这样: 可以看到这个效果很好地衔接了上下两个具有相同元素的幻灯片。这就使得演讲者在演讲过程中逻辑变得十分清晰,让观众也能很好地明白演讲者在讲什么。 然后,有了UIViewTranstion,一切转场都变得可能。只有你想不到的没有你做不到的。 今天我们要实现的最后效果大概像这样: 好,下面开始详细的分析。 在讲动画之前,我们先做一些准备,把界面和层级画出来。 我们用一个UINavigationController 去控制两个控制器,一个是 Collection ...
详细阅读

iOS自定义转场详解01——UIViewControllerTransitioning的用法

本文是我学习了onevcat的这篇转场入门的一点笔记。 老规矩,我不打算先讲理论再给例子。我们上来就直接拿活的练。 今天实现一个简单的自定义转场: 首页,用Storyboard快速创建两个ViewController。一个作为住主控制器,叫ViewController ; 另一个作为是转过去的副控制器,叫PresentedViewController。并且用Autolayout快速搭建好界面。就像这样: 由于我使用了Segue,所以可以只需要一句话: //ViewController.m -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ PresentedViewController *pvc = segue.destinationViewController; pvc.delegate = self; } 就完成了最最基本的转场。like this: 然后实现点击关闭的功能。这里要说明一下,很多朋友喜欢在-buttonClicked:中直接给self发送dismissViewController的相关方法。在现在的SDK中, ...
详细阅读

【POP动画引擎教程 01】实现图片折叠效果

说实话,触动我幼小的心灵并带我走上iOS开发道路的就是当年iOS4中的那个拖动一个App到另一个App自动聚成文件夹的动画。这对当初没见过世面的我来说简直只能用神奇来形容。所以,当入手iOS开发之后,我从来就没有忘记我的初心——做出让人心动的交互动画。 直到我看到了POP,我的热情像刚拔开瓶盖的香槟一样喷射出来,心中那份对iOS动画的热爱的火星也被彻底点燃。因为我的终极目标是,成为一名交互动画Master。 好,吹了那么多牛让我们讲点靠谱的。今天我要手把手教你实现的一个POP动画是这样的: 首先我们来分析一下。 要让一张照片从中间折过来,如果直接是把一张照片折中而且还要让上下部分显示出不同的阴影,这会非常麻烦。所以,我们使用的技巧是,把一张图切成均等的两部分。然后把切割后的两张图分别作为两个独立的view的image。当它们上下紧贴的时候看上去就像一张完整的图片,但其实是两个视图上下合并的。 有了这个思路,我们接着往下走。 怎么让上半部分view绕着水平中轴线旋转?首先中轴线的位置可以通过重写锚点的位置设置; 绕X轴旋转可以使用POPBasicAnimation中的kPOPLayerPositionX; 然后我们会想到,上半视图绕X轴旋转的角度肯定和手指滑动的距离有关。 好了,整体思路就是这样,十分符合情理。唯一需要拐个弯的小技巧就是我们把一张照片割成了两部分。 首先,我们用SB或者xib快速画出界面,之后和 PageView ...
详细阅读

记于大三上期末,顺便做个年终报告

现在我已肉身从奉贤空降到了徐汇校区。 今天上午,我结束了大三上学期的最后一门考试————计算机网络。这门让我掉了4天4夜头发的噩梦般的课终于在上午结束了。我本以为这门水课也和以往的科目一样,基本只要靠考前一个星期突击就能搞定的。可是,当我尝试刷题的时候,我简直就懵了。满脑子都是“这说的都是啥”。说实话,我从来没有一门课的复习像计算机网络一样认真+痛苦。好在,一切都已经结束了。现在回想起来,过去的四天四夜已成为宝贵的回忆,在我大学生活即将结束之际。 说起结束,每来一次徐汇就要伤感一次。今天见了W君,我的一个学长,跟我聊了很多。大四的生活,完全就是实习,再也没有大家一起上课的画面了。每天能见面的时光也就下班之后回学校睡个觉,第二天又各自出门上班。听到这,我一想自己也只有半个学期完全意义上的学生生涯了,心里十分难过,我相信有过同样经历的你也能感受到。我想念一起上课的时光,想念每次上课迟到之后被同学一双双眼睛盯着看的场面,想念一起开的班会,想念每次上课都会看看那个漂亮的女生有没有来上课。最后一个学期了,我不会缺课了。 ...
详细阅读

最近一两事

现在时刻是2014年12月25日,凌晨00:23。我刚从收获第一支18-105mm单反镜头的喜悦中恢复过来。算是给自己的平安节礼物吧,或者,也是圣诞节礼物。借这个尚未平复的喜悦,回顾一下最近一些让自己成长的事情。想到哪讲哪,所以会很跳跃。 首先,应该就是12月15号、16号和SideChef的同事们一起去杭州的远足了。 这次hiiking我是翘了两天的课毅然决然去的。于我而言,处理同事关系比上两天课更有价值。与此同时,我也看到了一些中外人格的差异,中国人对待事物普遍抱有消极、排斥的情绪,而外国人则不然。就拿一个例子来说,leader提议玩一个小游戏:抓拍路人。规则是:分成3组。拍到红色帽子或者头上带了红色物品的路人的照片,得2分;拍到相似衣服比如情侣装、母子装、工作装的,得2分;拍到正在自拍的人,得3分;拍到粉红色的交通工具,得5分。然后把图片统一上传到群里,最后和指定时间计算各组得分。就是这样一个游戏, ...
详细阅读

CADisplayLink结合UIBezierPath的神奇妙用

做过iOS动画的朋友都知道,动画中一大头疼之处就是弹性、形变之类扭曲的效果。iOS7开始,我们开始可以直接使用UiView的渲染动画API实现简单的弹性效果。 + (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion NS_AVAILABLE_IOS(7_0); dampingRatio是阻尼系数,取值范围0~1,决定弹性效果的明显程度; velocity是初速度。 ...
详细阅读

iOS8新特性——UIPresentation在转场动画中的使用

iOS8中苹果给我们来带来了一个新的类—— UIPresentationController。和UIViewControllerTransitioning一样,它也是配合自定义过渡的。在实践中,往往也是配合UIViewControllerTransitioning一起来实现自定义的转场动画。今天我们要实现的一个转场是这样的: 我们的 UIPresentationController 的子类是负责「被呈现」(presented) 及「负责呈现」(presenting) 的 controller 以外的 controller 的,看着很绕口,说白了,在我们的例子中,它负责的仅仅是那个带渐变效果的黑色模糊背景 View和背景视图的动态缩放。 UIPresentationController.h 的内容其实不多,也就80行代码。其中我们我们必须实现的有这四个方法: - (void)presentationTransitionWillBegin;////在呈现过渡即将开始的时候被调用的 - (void)presentationTransitionDidEnd:(BOOL)completed;////在呈现过渡结束时被调用的 ...
详细阅读

iOS自定义转场详解02——实现Keynote中的神奇移动效果

Keynote,看过苹果发布会的朋友都不会对Keynote感到陌生。对,就是当年乔帮主应忍受不了微软的PPT于是开发的一款自己使用但是后来放到了iWork里面向大众公布出来的一款幻灯片制作软件。其酷炫并且符合逻辑的动画效果令人影响深刻,也帮助了演讲者更生动地完成演讲。 我就是一个重度的Keynote骨灰级使用者。我用Keynote已经有3年了,平时我要做图、做软件的原型、甚至是一些交互动画全是拿keynote完成的。就是因为Keynote这款软件的易用性已经让我不会傻到同时有笨重的PS、AE和轻便的Keynote我会放弃后者而使用前者。我保证你用过Keynote之后也一定会上瘾的。后期有机会我一定要出一个keynote使用心得,关于如何做出优秀的幻灯片的一些体会,以及如果使用keynote做出App交互原型。 其中Keynote有一个无论是视觉层面还是逻辑层面都很出色的动画效果,叫做 神奇移动(Magic Move) 。大概感觉就像这样: 可以看到这个效果很好地衔接了上下两个具有相同元素的幻灯片。这就使得演讲者在演讲过程中逻辑变得十分清晰,让观众也能很好地明白演讲者在讲什么。 然后,有了UIViewTranstion,一切转场都变得可能。只有你想不到的没有你做不到的。 今天我们要实现的最后效果大概像这样: 好,下面开始详细的分析。 在讲动画之前,我们先做一些准备,把界面和层级画出来。 我们用一个UINavigationController 去控制两个控制器,一个是 Collection ...
详细阅读

【POP动画引擎教程 01】实现图片折叠效果

说实话,触动我幼小的心灵并带我走上iOS开发道路的就是当年iOS4中的那个拖动一个App到另一个App自动聚成文件夹的动画。这对当初没见过世面的我来说简直只能用神奇来形容。所以,当入手iOS开发之后,我从来就没有忘记我的初心——做出让人心动的交互动画。 直到我看到了POP,我的热情像刚拔开瓶盖的香槟一样喷射出来,心中那份对iOS动画的热爱的火星也被彻底点燃。因为我的终极目标是,成为一名交互动画Master。 好,吹了那么多牛让我们讲点靠谱的。今天我要手把手教你实现的一个POP动画是这样的: 首先我们来分析一下。 要让一张照片从中间折过来,如果直接是把一张照片折中而且还要让上下部分显示出不同的阴影,这会非常麻烦。所以,我们使用的技巧是,把一张图切成均等的两部分。然后把切割后的两张图分别作为两个独立的view的image。当它们上下紧贴的时候看上去就像一张完整的图片,但其实是两个视图上下合并的。 有了这个思路,我们接着往下走。 怎么让上半部分view绕着水平中轴线旋转?首先中轴线的位置可以通过重写锚点的位置设置; 绕X轴旋转可以使用POPBasicAnimation中的kPOPLayerPositionX; 然后我们会想到,上半视图绕X轴旋转的角度肯定和手指滑动的距离有关。 好了,整体思路就是这样,十分符合情理。唯一需要拐个弯的小技巧就是我们把一张照片割成了两部分。 首先,我们用SB或者xib快速画出界面,之后和 PageView ...
详细阅读

最近一两事

现在时刻是2014年12月25日,凌晨00:23。我刚从收获第一支18-105mm单反镜头的喜悦中恢复过来。算是给自己的平安节礼物吧,或者,也是圣诞节礼物。借这个尚未平复的喜悦,回顾一下最近一些让自己成长的事情。想到哪讲哪,所以会很跳跃。 首先,应该就是12月15号、16号和SideChef的同事们一起去杭州的远足了。 这次hiiking我是翘了两天的课毅然决然去的。于我而言,处理同事关系比上两天课更有价值。与此同时,我也看到了一些中外人格的差异,中国人对待事物普遍抱有消极、排斥的情绪,而外国人则不然。就拿一个例子来说,leader提议玩一个小游戏:抓拍路人。规则是:分成3组。拍到红色帽子或者头上带了红色物品的路人的照片,得2分;拍到相似衣服比如情侣装、母子装、工作装的,得2分;拍到正在自拍的人,得3分;拍到粉红色的交通工具,得5分。然后把图片统一上传到群里,最后和指定时间计算各组得分。就是这样一个游戏, ...