SwiflyOverlay

I've been working on a side project that requires a full screen menu to be presented. This is my progress so far.

Enjoy :)

Landing image of the app Demo image of the implementation

I'll update this with a gif soon to show off some sweet animations.

##Implimentation

You will need to create your own menu view, take a look at the MenuViewController in the demo. It's a table based menu view.

Create an instance of OverlayView and add your menu as a subview.

overlay = OverlayView()
overlay?.addSubview(menuViewController.view)

When ready, present the view by calling open() on the overlay instance

overlay?.open()

The overlay view has an inbuilt close button and it could be dismissed using this alone, in the event your implementation needs another way to dismiss the overlay, call dismissView() on the overlay instance

overlay?.dismissView()

Animation

The animations implemented are quite simple, we animate both the opacity and transform.scale properties using CAAnimation

            let fadeAnimation = CABasicAnimation(keyPath: "opacity")
            fadeAnimation.fromValue = 0.0
            fadeAnimation.toValue = 1.0
            fadeAnimation.duration = 0.3
            fadeAnimation.fillMode = kCAFillModeForwards
            
            let scaleAnimation = CABasicAnimation(keyPath: "transform.scale")
            scaleAnimation.toValue = 1.0
            scaleAnimation.fromValue = 0.8
            scaleAnimation.duration = 0.3
            scaleAnimation.fillMode = kCAFillModeForwards
            
            let groupAnimation = CAAnimationGroup()
            groupAnimation.duration = 0.3
            groupAnimation.animations = [fadeAnimation, scaleAnimation]
            groupAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

The other animations on are menu based, and can be implemented in your custom menuViewController. Take a look at the demo project for more.

##Contribution

Solo project at the moment, but if you want to contribute and make it better, please make a pull request.

Thanks

Thanks for taking an interest in my work, you can find me on twitter @edwinbosire

##Licence

The MIT License (MIT)

Copyright (c) 2016 Edwin B

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.



SwiflyOverlay

我一直在做一个侧面项目,需要一个全屏菜单。这是我迄今为止的进步

享受:)

我将尽快用gif进行更新,以炫耀一些甜蜜的动画。

## Implimentation

您将需要创建自己的菜单视图,看看演示中的 MenuViewController 。这是一个基于表格的菜单视图。

创建一个 OverlayView 的实例,并将您的菜单添加为子视图。

overlay = OverlayView()
overlay?.addSubview(menuViewController.view)

准备好后,通过调用覆盖实例

上的 open()来呈现视图
overlay?.open()
覆盖视图具有内置的关闭按钮,可以单独使用此按钮,如果您的实现需要另一种方式来关闭叠加层,请在覆盖实例上调用 dismissView() p>
overlay?.dismissView()

动画

实现的动画很简单,我们使用 CAAnimation

opacity transform.scale 属性设置动画。
            let fadeAnimation = CABasicAnimation(keyPath: "opacity")
            fadeAnimation.fromValue = 0.0
            fadeAnimation.toValue = 1.0
            fadeAnimation.duration = 0.3
            fadeAnimation.fillMode = kCAFillModeForwards

        <span class="pl-k">let</span> scaleAnimation <span class="pl-k">=</span> <span class="pl-c1">CABasicAnimation</span>(<span class="pl-c1">keyPath</span>: <span class="pl-s"><span class="pl-pds">&#34;</span>transform.scale<span class="pl-pds">&#34;</span></span>)
        scaleAnimation.<span class="pl-smi">toValue</span> <span class="pl-k">=</span> <span class="pl-c1">1.0</span>
        scaleAnimation.<span class="pl-smi">fromValue</span> <span class="pl-k">=</span> <span class="pl-c1">0.8</span>
        scaleAnimation.<span class="pl-smi">duration</span> <span class="pl-k">=</span> <span class="pl-c1">0.3</span>
        scaleAnimation.<span class="pl-smi">fillMode</span> <span class="pl-k">=</span> kCAFillModeForwards

        <span class="pl-k">let</span> groupAnimation <span class="pl-k">=</span> <span class="pl-c1">CAAnimationGroup</span>()
        groupAnimation.<span class="pl-smi">duration</span> <span class="pl-k">=</span> <span class="pl-c1">0.3</span>
        groupAnimation.<span class="pl-smi">animations</span> <span class="pl-k">=</span> [fadeAnimation, scaleAnimation]
        groupAnimation.<span class="pl-smi">timingFunction</span> <span class="pl-k">=</span> <span class="pl-c1">CAMediaTimingFunction</span>(<span class="pl-c1">name</span>: kCAMediaTimingFunctionEaseInEaseOut)

其他动画是基于菜单的,可以在您的自定义menuViewController中实现。看看演示项目了解更多。

##贡献

目前的个人项目,但如果您想要做出更好的贡献,请提出请求。

谢谢

感谢您对我的工作感兴趣,您可以在Twitter上找到我 @edwinbosire

##许可证

麻省理工学院许可证(MIT)

版权所有(c)2016 Edwin B

特此授予任何获得副本的人免费许可 的这个软件和相关的文档文件(软件)来处理 软件无限制,包括但不限于权限 使用,复制,修改,合并,发布,分发,再许可和/或销售 软件的副本,并允许本软件的人员 须遵守以下条件:

以上版权声明和本许可声明全部包含 副本或本软件的重要部分。

该软件按原样提供,不提供任何明示或暗示的保证 暗示,包括但不限于适销性的保证, 适用于特定用途和非侵权。在任何情况下 作者或版权所有人不得对任何索赔,损害或其他责任负责 责任,无论在合同,侵权行为或其他方面的行为, 由本软件或其使用或其他交易产生或与本软件相关 SOFTWARE。




相关问题推荐