印象笔记交互效果的实现

啰嗦几句

起初我是想把这个demo做的和原版一摸一样,但在印象笔记的ipa中并没有找到那些关键的图片,网上也没有相关的素材,而且当我在百度搜索里面赫然敲下印象笔记四个大字的时候,百度搜索竟然给我推荐印象笔记面临倒闭这样的关键字!好吧,在当下新技术大潮一波接一波的年代,这种被面临倒闭的公司还有很多,但我个人感情上希望那一天能来的晚一些,反倒是些世界500强,民族企业之类的,我由衷的希望他明天就关门。我也斗胆尝试过用sketch画出所有的切图,但当我画完一个️后就彻底放弃了这个想法,索性也就弄成现在这个样子。

不夸张的说我半路转来做ios和印象笔记这两个交互效果是有很大关系的,在没有作出这个demo之前,我对evernote的这两个交互效果特别的着迷,而在我转做ios之后,这种感觉反而更加强烈了,因为凭我当时那点浅薄的ios经验,完全不知道这个效果是怎么做到的,我也像疯子一样在各种code网站疯狂扫荡一遍也没有找到相应的demo,趁着这段时间比较闲就把它实现了。

弹簧效果:
弹簧.gif

使用collectionView,自定义布局继承UICollectionViewFlowLayout,想要这些cell按照我们的意思动起来,首先重写shouldInvalidateLayoutFor
BoundsChange
返回true。

 override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
        return true
 }

这个动画只在collectionview滑动到顶部和底部会触发,重写layoutAttributesForElementsInRect这个方法根据collectionviewcontentoffset计算出cellframe,这样就ok了。

override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        let offsetY = self.collectionView!.contentOffset.y
        let attrsArray = super.layoutAttributesForElementsInRect(rect)
        let collectionViewFrameHeight = self.collectionView!.frame.size.height;
        let collectionViewContentHeight = self.collectionView!.contentSize.height;
        let ScrollViewContentInsetBottom = self.collectionView!.contentInset.bottom;
        let bottomOffset = offsetY + collectionViewFrameHeight - collectionViewContentHeight - ScrollViewContentInsetBottom
        let numOfItems = self.collectionView!.numberOfSections()
        
        for attr:UICollectionViewLayoutAttributes in attrsArray! {
            if (attr.representedElementCategory == UICollectionElementCategory.Cell) {
                var cellRect = attr.frame;
                if offsetY <= 0 {
                    let distance = fabs(offsetY) / SpringFactor;
                    cellRect.origin.y += offsetY + distance * CGFloat(attr.indexPath.section + 1);
                }else if bottomOffset > 0 {
                    let distance = bottomOffset / SpringFactor;
                    cellRect.origin.y += bottomOffset - distance *
                        CGFloat(numOfItems - attr.indexPath.section)
                }
                attr.frame = cellRect;
            }
        }
        return attrsArray;
 }
转场效果:
转场效果.gif

自定义类EvernoteTransition遵守UIViewControllerAnimated TransitioningUIViewControllerTransitioningDelegate
该类的对象作为transitioningDelegate。实现
UIViewControllerAnimatedTransitioning
transitionDurationanimateTransition方法前者返回动画的时间,后者用来实现转场时的具体动画。
UIViewControllerTransitioningDelegatepresentdismiss代理方法中返回EvernoteTransition对象,这样就ok了

func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.isPresent = true
        return self
}
    
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.isPresent = false
        return self
}
手势互动:

手势互动.gif

实现UIViewControllerTransitioningDelegate
interactionControllerForDismissal

func interactionControllerForDismissal(animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
        self.isPresent = false
        return interactionController
}

给第二个controller加上一个UIScreenEdgePanGestureRecognizer手势方向为left,实时的更新interactionController,这样就ok了.

func handlePanGesture(recognizer:UIScreenEdgePanGestureRecognizer) {
        let view = panViewController.view
        if recognizer.state == UIGestureRecognizerState.Began {
            panViewController.dismissViewControllerAnimated(true, completion: { () -> Void in
            })
        } else if recognizer.state == UIGestureRecognizerState.Changed {
            let translation = recognizer.translationInView(view)
            let d = fabs(translation.x / CGRectGetWidth(view.bounds))
            interactionController.updateInteractiveTransition(d)
        } else if recognizer.state == UIGestureRecognizerState.Ended {
            if recognizer.velocityInView(view).x > 0 {
                interactionController.finishInteractiveTransition()
            } else {
                interactionController.cancelInteractiveTransition()
                listViewController.presentViewController(panViewController, animated: false, completion: { () -> Void in
                    
                })
            }
            interactionController = UIPercentDrivenInteractiveTransition()
        }
}
具体源码:

** GitHub**
** Bitbucket**

注:在我自认为没有任何商业意图的前提下,从dribbble上面搬来了第一张GIF,如果这篇文章有幸被原制作者看到并且认为我这种做法给他带来了困扰,我便立即删除,最后送大家一首克罗地亚狂想曲

如果您发现文中有任何不妥之处,还望不吝赐教!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,847评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,208评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,587评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,942评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,332评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,587评论 1 218
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,853评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,568评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,273评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,542评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,033评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,373评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,031评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,073评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,830评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,628评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,537评论 2 269

推荐阅读更多精彩内容