iOS点滴
详细阅读

iOS自定义转场详解04——实现3D翻转效果

这是自定义转场系列的第四篇。由于具有一定的连续性,我会忽略一些基础,所以如果你是第一次看这个系列,可以先过目之前的几篇 ——— UIViewControllerTransitioning的用法 、实现Keynote中的神奇移动效果、实现通过圆圈放大缩小的转场动画。 老规矩,先端上GIF。 How to work 首先在StoryBoard上拖两个UIViewController。并且在第一个VC上放一个button,使用Action Segue连接到第二个VC。 然后回到代码界面。和以往一样,我们需要创建两个文件:一个用于从第一个VC过渡到第二个VC的动画(如push),另一个这是第二个过渡到第一个VC的动画(如pop)。这里不得不说iOS7中引入的这种解耦合的方式,它的意义在于无论在哪儿需要用到转场动画的地方,直接把这两个文件扔过去就行了。 我们创建两个文件:KYPushTransition 和 KYPopTransition 。从名字可以看出,后一个是前一个的反转动画。其实,我们完全可以把两个文件写在一起:KYTransition 。因为两个文件的代码结构几乎别无二致,不同的地方也只要用布尔值区分一下就行了。但这里为了让介绍思路清晰,我们把两个动画分开来实现。 ...
详细阅读

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 ...
详细阅读

【源代码】手把手教你Autolayout如何使用动画(附类似Passbook效果Demo+详细分析实现原理)

今天来点硬货! 先看我们今天要实现的动画: 好的,在Autolayout没出现以前,也就是iOS6以前,要实现这个效果非常复杂,因为你要实时地去算每个视图的位置,而且还很难保持联动。但是iOS6中出现了Autolayout出现,再来看这个效果就豁然开朗了。而且随着iPhone、iPad的多种尺寸屏幕的趋势,势必推送SizeClass的大面积应用,而SizeClass的使用又和Autolayout密不可分。所以从某种意义上来说,多种尺寸屏幕的来临已经宣告了Autolayout时代的到来。所以,结论就是,iOS开发者必须告别手写代码,忘记frame,彻底拥抱Autolayout了。这也是为什么我之前花了那么多篇文章介绍Autolayout的不同方面使用方法的原因,因为它真的很重要。 今天,我们来讲Autolayout很重要的一方面。我们都知道,既然使用了Autolayout,也就是视图、控件的位置已经被约束(Constraint)限制了。比如一个图片视图(UIImageView)被约束在了离顶端30px,离左侧30px,宽60px,高60px的位置,那么它的位置就已经确定了。无论怎么旋转屏幕或者在什么尺寸的设备上都是在离顶端30px,离左侧30px, ...
详细阅读

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

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

在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。 创建 ...
详细阅读

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

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

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中, ...
详细阅读

【源代码】手把手教你Autolayout如何使用动画(附类似Passbook效果Demo+详细分析实现原理)

今天来点硬货! 先看我们今天要实现的动画: 好的,在Autolayout没出现以前,也就是iOS6以前,要实现这个效果非常复杂,因为你要实时地去算每个视图的位置,而且还很难保持联动。但是iOS6中出现了Autolayout出现,再来看这个效果就豁然开朗了。而且随着iPhone、iPad的多种尺寸屏幕的趋势,势必推送SizeClass的大面积应用,而SizeClass的使用又和Autolayout密不可分。所以从某种意义上来说,多种尺寸屏幕的来临已经宣告了Autolayout时代的到来。所以,结论就是,iOS开发者必须告别手写代码,忘记frame,彻底拥抱Autolayout了。这也是为什么我之前花了那么多篇文章介绍Autolayout的不同方面使用方法的原因,因为它真的很重要。 今天,我们来讲Autolayout很重要的一方面。我们都知道,既然使用了Autolayout,也就是视图、控件的位置已经被约束(Constraint)限制了。比如一个图片视图(UIImageView)被约束在了离顶端30px,离左侧30px,宽60px,高60px的位置,那么它的位置就已经确定了。无论怎么旋转屏幕或者在什么尺寸的设备上都是在离顶端30px,离左侧30px, ...