订阅本站
详细阅读

iOS 自定义下拉线条动画

本文摘录自 A GUIDE TO IOS ANIMATION,中文名:《Kitten 的 iOS 动画学习手册》。这是一本非常有趣地介绍 iOS 动画的交互式电子书,提供生动的可交互式元素、视频以及精心制作的配图,让你在前所未有的阅读体验中学到干货。购买方式请看我的 置顶微博 。 这是本章的第二个 demo,下面这个案例中,我把线条动画和数学知识结合在了一起。通过这个案例,可以很好地向你展示如何自己归纳出一个数学公式,并把它用到一个自定义动画中。 首先,我们还是先看最终效果 : OK,可以看到随着手指在屏幕上滑动距离的改变,线条一开始逐渐靠拢,到达一定位置后开始弯曲,最终合并成了一个圆。顺便一提,我已经把这个动画封装到了一个上拉、下拉刷新的控件中,并且用在了大象公会这款独立开发的 App 中。 你可以提前下载下来一睹实际效果。 ...
详细阅读

人生得意须尽欢 —— 我的金钱观

咦,还挺押韵的~ 如果你关注了我的微博,或者你是我朋友圈的熟人,你最近一定非常讨厌我。是的,最近我在「疯狂」花钱。意料之中地被很多人说成了「炫富」、「低俗」。尽管有些朋友没有说,我也能猜到你是这么想的。好,我来说说我到底怎么了。我为什么会这样?我是不是变坏了? 先来看看我「变坏」到什么程度了。 首先我入了一只「AKG N20」入耳式耳机,售价¥1099。NSERIES 家族血统;频响范围:20Hz-20kHz,灵敏度:110dB SPL/V,驱动单元:7mm AKG高品质驱动;一体成型的金属铝腔体;一键切换苹果和安卓系统。 ...
详细阅读

Runtime 隐藏Status Bar背景

这次的主题的 Runtime ,对于很多人来说,习惯了面向对象的编程语言之后再接触 C 语言一开始是拒绝的。但是当你真的用起来了,你会上瘾,因为这彻彻底底地满足了极客们的折腾心理,用代码操控一切的心理。 就拿我做大象公会的例子来说(对了,这是我在 Smartisan 的第一个项目,也是独立开发的一款App),你知道 Smartisan 一贯的软件设计风格都是拟物化的,真实模拟着现实世界的自然规律。大到一个动画小到一个按钮,无处不体现着这一设计之初就贯彻的理念。然而这对于一个 iOS 工程师来说,不得不说是一个噩耗。你也知道如今强纳肾主管的苹果设计团队已经走了一条不归路了,所有 UI 元素都拍扁了。我不是说扁平化不好,因为这和拟物化只是两种并行的设计风格,没有对错,只有喜好。但你要是一股脑地全部拍扁了,那就有问题了,该给用户明确交互反馈的地方还得拟物。我在第一次拿到产品递过来的需求文档时,就意识到了这将会是个「在平坦的路面上曲折前行的」 ...
详细阅读

国家地理频道纪录片——《宇宙时空之旅》

在收藏夹里待了好久,当这个周六我躲在家里一口气看完6集的这个时间点,我完完全全进入了另外一个世界。以往这样的感受通常不会留到第二天,这回,我一定要留下点什么。 这是一部我不惜搭上自己全部信用推荐的纪录片。虽然我本来就不是什么权威,但是能看到这篇文章的朋友或多或少算是相信我的。 无论是叙述手法还是视觉效果,台本台词还是BGM原声带,都是文学巨著级、好莱坞电影级的。这是我才疏学浅的二十多年人生阅历中看过的最棒的纪录片,不可能有之一。除此之外,也是最重要的是,它深深地引起了我的共鸣。 我想,99%的人小时候都会被问到一个问题,「你长大想干嘛?」,而99%的人在那个年纪都会异口同声地回答到:「科学家!」。So am I. 只不过,我的回答更加精确一点:「天文学家」。 在第一集「宇宙起源」的第13:54秒,我的感情被拉到了一个高潮。当我看到在介绍我们地球在宇宙中身处的位置是,视角从自己身处的地球,不断zoom-out一层层地向外扩散,我们的地球不断地向内缩小时, ...
详细阅读

UIWebView与JS的深度交互

事情的起因还是因为项目需求驱动。折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾。 我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML。除此之外,还需要禁用获取的HTML文本中自带的 < img > 标签自动加载,并把下载图片的操作放在native端来处理,并通过JS将图片在Cache中的地址返回给UIWebview。 之所以要把图片操作放在native端做的好处在于:1、可以进行本地缓存,下次进入这篇文章可以直接从缓存读取,提高响应速度并且节省用户流量。2、可以实现点击图片放大、保存图片到相册等操作。 技术难点也有两个:1、如何让HTML文本onLoad的时候,禁用自身的图片加载而是从本地获取图片?2、如何把native端下载好的图片返回给网页? 起初,我也是束手无策,翻看文档可只找到了一个 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 和JS简易交互的方法,未能如愿。 ...
详细阅读

记于大三下期末,来北京后的一些感受

刚洗完热水澡,等头发干的时间,动笔写下了这篇文章。总结一下大三下的学生生涯,顺便记录一下来北京儿后的一些感受。 时间线拖到6月23号,期末考试结束前一周,我整个人儿被考试折磨得混天暗地,基本那一周,我的社交圈运动排名都是最后一名,而与其相反的,是我的美团外卖订单数。其实从我的Github主页也能发现,我从23号开始的后一周都没有Commit。那一周,我的所有时间都花在了应试+复习上。之所以那么重要,有过大三经历的人都知道,这一学期的考试过与不过、绩点是多少关系到你大四是否需要花钱、花时间报课重修。所以这一学期可以说是只许成功不许失败。我很幸运,我不知道为什么我总是很幸运,通过了所有考试并且拿到了不错的绩点。终于一块石头落地了,大四可以好好做我为之痴迷的iOS了。 现在这个点,我回想了一下大学对我最重要的两个时刻。一个是大二的暑假。我不知道为什么现在的大学生每个暑假都还要回家,说看爸妈的我都替你们难为情,你回家有多少时间是真的陪父母的?你还不是和在寝室里一样看片儿玩游戏。真要看父母回家一周还不够吗?剩下时间不应该找份实习或者呆在学校学点自己感兴趣的东西吗?我的整个大学的暑假寒假都在实习或者学校学习中度过。其中大二那个暑假是对我印象最深的。也就是从那个暑假开始, ...
详细阅读

谈谈iOS中粘性动画以及果冻效果的实现

在最近做个一个自定义PageControl——KYAnimatedPageControl中,我实现了CALayer的形变动画以及CALayer的弹性动画,效果先过目: 先做个提纲: 第一个分享的主题是“如何让CALayer发生形变”,这个技术在我之前一个项目 ———— KYCuteView 中有涉及,也写了篇简短的实现原理博文。今天再举一个例子。 之前我也做过类似果冻效果的弹性动画,比如这个项目—— KYGooeyMenu。用到的核心技术是CAKeyframeAnimation,然后设置几个不同状态的关键帧,就能初步达到这种弹性效果。但是,毕竟只有几个关键帧,而且是需要手动计算,不精确不说,动画也不够细腻,毕竟你不可能手动创建60个关键帧。所以,今天的第二个主题是 —— “如何用阻尼振动函数创建出60个关键帧”,从而实现CALayer产生类似[UIView animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion] 的弹性动画。 正文。 如何让CALayer发生形变? 关键技术很简单: ...
详细阅读

如何实现一个不规则排列的图片布局算法

一直在500px上看照片,发照片。以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下。昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分享一下,如果你有更好的算法欢迎探讨。 最终我做出的效果是这样的: 垂直滚动 水平滚动 算法总体思路 先说一下总体上的思路。既然图片的大小、位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayoutAttributes。 自定义UICollectionViewLayout的关键两步是先后重载下面两个方法: - (void)prepareLayout; 和 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect; 所以我们的思路是在- (void)prepareLayout;方法中算出所有item的frame,并赋值给当前item的 UICollectionViewLayoutAttributes。用图片的形式比较直观: 接下来问题就化归到了如何求每个item的frame。 这里我们抽象出一个 列 的概念: 除此之外,我们还需要维护一个存储高度的数组COLUMNSHEIGHTS。 ...
详细阅读

用二次函数实现平滑的手势驱动动画

写这篇文章的动机来源于最近做的个动画,如上。其中我一开始在处理pan-to-dismiss的图片形变时候遇到了点问题。 首先,这个动画的思路是,以panGesture的transition.y为变量,去实时改变视图的CATransform3D属性。具体的,我们需要同时改变CATransform3DRotate和CATransform3DScale,这样才能在实现绕X轴转动的同时一起做缩放变换。而且,CATransform3DRotate这个属性需要从0增加到1,达到1后立即从1减小到0(因为视图向内旋转之后还需要再转回来)。除此之外,还需要判断transition.y的正负,因为我们需要当transition.y>0的时候,视图下半部分向屏幕内方向转(也就是CATransform3DRotate中x为-1),反之向屏幕外方向转。 OK,有了这个思路,我一开始就很直接地如下这么做了: #define SCROLLDISTANCE 200.0 //滑动的最大距离 ... CGFloat factorOfAngle = 0.0f; CGFloat Y = MIN( ...
详细阅读

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 。因为两个文件的代码结构几乎别无二致,不同的地方也只要用布尔值区分一下就行了。但这里为了让介绍思路清晰,我们把两个动画分开来实现。 ...
详细阅读

人生得意须尽欢 —— 我的金钱观

咦,还挺押韵的~ 如果你关注了我的微博,或者你是我朋友圈的熟人,你最近一定非常讨厌我。是的,最近我在「疯狂」花钱。意料之中地被很多人说成了「炫富」、「低俗」。尽管有些朋友没有说,我也能猜到你是这么想的。好,我来说说我到底怎么了。我为什么会这样?我是不是变坏了? 先来看看我「变坏」到什么程度了。 首先我入了一只「AKG N20」入耳式耳机,售价¥1099。NSERIES 家族血统;频响范围:20Hz-20kHz,灵敏度:110dB SPL/V,驱动单元:7mm AKG高品质驱动;一体成型的金属铝腔体;一键切换苹果和安卓系统。 ...
详细阅读

国家地理频道纪录片——《宇宙时空之旅》

在收藏夹里待了好久,当这个周六我躲在家里一口气看完6集的这个时间点,我完完全全进入了另外一个世界。以往这样的感受通常不会留到第二天,这回,我一定要留下点什么。 这是一部我不惜搭上自己全部信用推荐的纪录片。虽然我本来就不是什么权威,但是能看到这篇文章的朋友或多或少算是相信我的。 无论是叙述手法还是视觉效果,台本台词还是BGM原声带,都是文学巨著级、好莱坞电影级的。这是我才疏学浅的二十多年人生阅历中看过的最棒的纪录片,不可能有之一。除此之外,也是最重要的是,它深深地引起了我的共鸣。 我想,99%的人小时候都会被问到一个问题,「你长大想干嘛?」,而99%的人在那个年纪都会异口同声地回答到:「科学家!」。So am I. 只不过,我的回答更加精确一点:「天文学家」。 在第一集「宇宙起源」的第13:54秒,我的感情被拉到了一个高潮。当我看到在介绍我们地球在宇宙中身处的位置是,视角从自己身处的地球,不断zoom-out一层层地向外扩散,我们的地球不断地向内缩小时, ...
详细阅读

记于大三下期末,来北京后的一些感受

刚洗完热水澡,等头发干的时间,动笔写下了这篇文章。总结一下大三下的学生生涯,顺便记录一下来北京儿后的一些感受。 时间线拖到6月23号,期末考试结束前一周,我整个人儿被考试折磨得混天暗地,基本那一周,我的社交圈运动排名都是最后一名,而与其相反的,是我的美团外卖订单数。其实从我的Github主页也能发现,我从23号开始的后一周都没有Commit。那一周,我的所有时间都花在了应试+复习上。之所以那么重要,有过大三经历的人都知道,这一学期的考试过与不过、绩点是多少关系到你大四是否需要花钱、花时间报课重修。所以这一学期可以说是只许成功不许失败。我很幸运,我不知道为什么我总是很幸运,通过了所有考试并且拿到了不错的绩点。终于一块石头落地了,大四可以好好做我为之痴迷的iOS了。 现在这个点,我回想了一下大学对我最重要的两个时刻。一个是大二的暑假。我不知道为什么现在的大学生每个暑假都还要回家,说看爸妈的我都替你们难为情,你回家有多少时间是真的陪父母的?你还不是和在寝室里一样看片儿玩游戏。真要看父母回家一周还不够吗?剩下时间不应该找份实习或者呆在学校学点自己感兴趣的东西吗?我的整个大学的暑假寒假都在实习或者学校学习中度过。其中大二那个暑假是对我印象最深的。也就是从那个暑假开始, ...
详细阅读

如何实现一个不规则排列的图片布局算法

一直在500px上看照片,发照片。以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下。昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分享一下,如果你有更好的算法欢迎探讨。 最终我做出的效果是这样的: 垂直滚动 水平滚动 算法总体思路 先说一下总体上的思路。既然图片的大小、位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayoutAttributes。 自定义UICollectionViewLayout的关键两步是先后重载下面两个方法: - (void)prepareLayout; 和 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect; 所以我们的思路是在- (void)prepareLayout;方法中算出所有item的frame,并赋值给当前item的 UICollectionViewLayoutAttributes。用图片的形式比较直观: 接下来问题就化归到了如何求每个item的frame。 这里我们抽象出一个 列 的概念: 除此之外,我们还需要维护一个存储高度的数组COLUMNSHEIGHTS。 ...
详细阅读

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 。因为两个文件的代码结构几乎别无二致,不同的地方也只要用布尔值区分一下就行了。但这里为了让介绍思路清晰,我们把两个动画分开来实现。 ...