Giter Club home page Giter Club logo

jxpopupview's Introduction

JXPopupView

一个轻量级的自定义视图弹出框架,可灵活配置动画、背景风格。

特性

  • 默认提供丰富的动画效果,而且可以灵活的扩展配置,只要遵从并实现JXPopupViewAnimationProtocol协议即可;
  • 使用范围更广,通过view封装,可以在任何view上面展示,并不局限于UIViewController;
  • 弹框背景配置灵活,借鉴了MBProgressHUD对背景视图的处理逻辑;
  • 交互细节可配置,提供了isDismissibleisInteractiveisPenetrable属性进行配置;

预览

动画效果

动画效果 GIF
渐隐渐现 GIF
缩放 GIF
往左 GIF
往右 GIF
往下 GIF
往上 GIF
部分自定义-弹性动画 GIF
完全自定义动画 GIF

背景风格

背景风格 GIF
固定色值 GIF
blur light GIF
blur dark GIF

指定containerView

指定containerView GIF
Window GIF
UIViewController.view GIF
CustomView GIF

要求

Swift 4.2编写,支持iOS9以上

安装

CocoaPods

在Podfile文件里面添加

pod 'JXPopupView'

然后再pod install(最好先pod update)

使用

//- 确定contentView的目标frame
let contentView = Bundle.main.loadNibNamed("TestAlertView", owner: nil, options: nil)?.first as? TestAlertView
let x: CGFloat = (containerView.bounds.size.width - 200)/2
let y: CGFloat = (containerView.bounds.size.height - 200)/2
contentView.frame = CGRect(x: x, y: y, width: 200, height: 200)
//- 确定动画效果
var animator = JXPopupViewFadeInOutAnimator()
//- 初始化JXPopupView
let popupView = JXPopupView(containerView: containerView, contentView: contentView, animator: animator!)
//- 配置交互
popupView.isDismissible = true
popupView.isInteractive = true
popupView.isPenetrable = false
//- 配置背景
popupView.backgroundView.style = self.backgroundStyle
popupView.backgroundView.blurEffectStyle = self.backgroundEffectStyle
popupView.backgroundView.color = self.backgroundColor
//- 展示popupView
popupView.display(animated: true, completion: nil)
//- 消失popupView
//通过extension提供的jx_popupView属性,获取JXPopupView进行操作,可以不用全局持有JXPopupView属性
contentView.jx_popupView?.dismiss(animated: true, completion: nil)

动画自定义

JXPopupViewAnimationProtocol协议方法

/// 初始化配置动画驱动器
    ///
    /// - Parameters:
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    ///   - containerView: 展示弹框的视图
    /// - Returns: void
    func setup(contentView: UIView, backgroundView: JXBackgroundView, containerView: UIView)

    /// 处理展示动画
    ///
    /// - Parameters:
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    ///   - animated: 是否需要动画
    ///   - completion: 动画完成后的回调
    /// - Returns: void
    func display(contentView: UIView, backgroundView: JXBackgroundView, animated: Bool, completion: @escaping ()->())

    /// 处理消失动画
    ///
    /// - Parameters:
    ///   - contentView: 自定义的弹框视图
    ///   - backgroundView: 背景视图
    ///   - animated: 是否需要动画
    ///   - completion: 动画完成后的回调
    func dismiss(contentView: UIView, backgroundView: JXBackgroundView,animated: Bool, completion: @escaping ()->())

自定义动画建议

  • 现有动画微调 继承对应的animator,重载协议方法,进行微调。参考demo工程的JXPopupViewSpringDownwardAnimator类。

  • 完全自定义动画 可以继承JXPopupViewBaseAnimator或者自己新建一个类,遵从JXPopupViewAnimationProtocol协议,实现对应方法即可。参考demo工程的JXPopupViewCustomAnimator

证书

JXPopupView is available under the MIT license. See the LICENSE file for more info.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.