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

一直在500px上看照片,发照片。以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下。昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分享一下,如果你有更好的算法欢迎探讨。 最终我做出的效果是这样的: 垂直滚动 水平滚动 算法总体思路 先说一下总体上的思路。既然图片的大小、位置各不一样,我们很自然地会想到需要算出每个item的frame,然后把这些frame赋值给当前item的UICollectionViewLayoutAttributes。 自定义UICollectionViewLayout的关键两步是先后重载下面两个方法: - (void)prepareLayout; 和 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)

写这篇文章的动机来源于最近做的个动画,如上。其中我一开始在处理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,

这是自定义转场系列的第四篇。由于具有一定的连续性,我会忽略一些基础,所以如果你是第一次看这个系列,可以先过目之前的几篇 ——— UIViewControllerTransitioning的用法 、实现Keynote中的神奇移动效果、实现通过圆圈放大缩小的转场动画。 老规矩,先端上GIF。 How to work 首先在StoryBoard上拖两个UIViewController。并且在第一个VC上放一个button,使用Action Segue连接到第二个VC。 然后回到代码界面。和以往一样,我们需要创建两个文件:一个用于从第一个VC过渡到第二个VC的动画(如push),另一个这是第二个过渡到第一个VC的动画(如pop)。这里不得不说iOS7中引入的这种解耦合的方式,它的意义在于无论在哪儿需要用到转场动画的地方,

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

做过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:

几天前,我开始新的App的开发了。终于有机会把swift用在实战中了,也学到了之前纯学语法时没有机会获得的知识。 这篇博文中,我就如何使用swift、OC混编做一个介绍。 OC中使用Swift 首先,在工程的 Build Settings 中把 defines module 设为 YES. 然后,把 product module name 设置为项目工程的名字。 最后一步,在你的OC文件中导入 ProjectName-Swift.

iOS8中苹果给我们来带来了一个新的类—— UIPresentationController。和UIViewControllerTransitioning一样,它也是配合自定义过渡的。在实践中,往往也是配合UIViewControllerTransitioning一起来实现自定义的转场动画。今天我们要实现的一个转场是这样的: 我们的 UIPresentationController 的子类是负责「被呈现」(presented) 及「负责呈现」(presenting) 的 controller 以外的 controller 的,看着很绕口,说白了,在我们的例子中,它负责的仅仅是那个带渐变效果的黑色模糊背景 View和背景视图的动态缩放。 UIPresentationController.

这个转场系列的第三篇。我已经感觉到有些许轻车熟路了。我也不知道会不会有第四篇第五篇,总之,当我看到优秀的动画,并在我能力范围能落实的,我都会把实现思路写下来,分享出来。 这是第三篇的转场动画的Demo: 实现原理: 第一步:布置界面 这步已经真的没什么好说的了,快进。 唯一有一个小技巧就是,在刚创建一个项目的时候,Storyboard里面已有一个默认的ViewController。而这时候你想要让一个NavigationController去控制全部的ViewController,这时候你可以在Editor->Embed in->Navigation Controller里面完成这一步,下如图。

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