All Projects → LoongerTao → Tltransitions

LoongerTao / Tltransitions

Licence: mit
快速实现控制器的转场和View的快速popover显示,并支持自定义动画、手势退场

Projects that are alternatives of or similar to Tltransitions

Spstorkcontroller
Now playing controller from Apple Music, Mail & Podcasts Apple's apps.
Stars: ✭ 2,494 (+742.57%)
Mutual labels:  transition, alert, popover
Ng Bootstrap
Angular powered Bootstrap
Stars: ✭ 7,872 (+2559.46%)
Mutual labels:  modal, alert, popover
Presentr
iOS let's you modally present any view controller, but if you want the presented view controller to not cover the whole screen or modify anything about its presentation or transition you have to use the Custom View Controller Presentation API's.
Stars: ✭ 2,816 (+851.35%)
Mutual labels:  transition, modal, alert
React Popup
React popup component
Stars: ✭ 198 (-33.11%)
Mutual labels:  modal, alert, popover
SPStorkController
Now playing controller from Apple Music, Mail & Podcasts Apple's apps.
Stars: ✭ 2,515 (+749.66%)
Mutual labels:  alert, popover, transition
ImageActionSheet
iOS Native style action sheet like in Whatsapp with the option of showing icons. It is a complete implementation and does not use any private api of UIKit.
Stars: ✭ 20 (-93.24%)
Mutual labels:  alert, actionsheet
vue2-dialog
A mobile Vue plugin for VueDialog
Stars: ✭ 21 (-92.91%)
Mutual labels:  alert, actionsheet
Sheet
📑 Actionsheet with navigation features such as the Flipboard App
Stars: ✭ 264 (-10.81%)
Mutual labels:  transition, actionsheet
svelte-accessible-dialog
An accessible dialog component for Svelte apps
Stars: ✭ 24 (-91.89%)
Mutual labels:  alert, modal
MultiModal
Use multiple .sheet, .alert, etc. modifiers in the same SwiftUI View
Stars: ✭ 49 (-83.45%)
Mutual labels:  alert, modal
JHTAlertController
A custom iOS alert that replaces the stock UIAlertController. Easily style the alert to match your app. Written in Swift for iOS.
Stars: ✭ 58 (-80.41%)
Mutual labels:  alert, modal
jquery.dialog.js
A lightweight replacement for the browser's default dialog boxes.
Stars: ✭ 17 (-94.26%)
Mutual labels:  alert, modal
eins-modal
Simple to use modal / alert / dialog / popup. Created with pure JS. No javascript knowledge required! Works on every browser and device! IE9
Stars: ✭ 30 (-89.86%)
Mutual labels:  alert, modal
AlertKit
🚨 SwiftUI alerts (and action sheets) done right
Stars: ✭ 60 (-79.73%)
Mutual labels:  alert, actionsheet
react-redux-modal-flex
[DEPRECATED] Make easy a modal/popup with Redux
Stars: ✭ 14 (-95.27%)
Mutual labels:  alert, modal
SPLarkController
Custom transition between controllers. Settings controller for your iOS app.
Stars: ✭ 967 (+226.69%)
Mutual labels:  modal, transition
react-native-popup
React Native Animated Popup Modal
Stars: ✭ 19 (-93.58%)
Mutual labels:  alert, modal
angular-super-gallery
AngularJS super image gallery
Stars: ✭ 46 (-84.46%)
Mutual labels:  modal, transition
iakit
无依赖 mini 组件库,只封装了 alert, toast, loading, actionSheet 等使用频率较高的组件。适用于类似 H5 活动页的简单移动端项目,不必为了使用这些组件而引入一个大而全的 UI 库和框架。
Stars: ✭ 38 (-87.16%)
Mutual labels:  alert, actionsheet
vue2-animate
A port of Animate.css for use with transitions in Vue.js 2.0 / 3.0 and Alpine.js.
Stars: ✭ 1,338 (+352.03%)
Mutual labels:  transition-animation, transition

TLTransitions

pod支持

1. 版本
pod 'TLTransitions', '~> 1.5.1'
2. CocoaPods获取不到最新的TLTransitions版本问题

这可能是本地的CocoaPods仓库列表没有更新导致的。

  1. 运行以下命令更新本地的CocoaPods仓库列表: pod repo update

  2. 然后通过以下命令查询 pod search TLTransitions

  3. 如果仍然查询不到最新版本,可以删除本地仓库重新安装 sudo rm -rf ~/.cocoapods/repos/master pod setup

1. 目的

让繁琐的个性化控制器的转场(present/pop)和视图弹窗实现,变的简单快速(一句代码或几行即可搞定),并支持动画的自定义,支持通过手势转场(dismiss/pop)

2. 实现基础

  • 控制器的转场基于协议UIViewControllerTransitioningDelegate,UINavigationControllerDelegateUIViewControllerAnimatedTransitioning
  • View弹窗则是通过控制器的转场包装而来,同时还基于UIPresentationController

使用与说明

1. View弹窗:

  • 使用:对应TLTransition类的API,只要一行代码即可将一个已有的View进行显示,使用如下(更多使用见TLTransition.h 中的API 或 Demo))
// popView是一个用户自定义的视图,并且已经设置好布局
[TLTransition showView:popView popType:TLPopTypeAlert];
  • 可实现如下效果:
    • 图1. 系统Alert样式的中间弹窗,并支持键简单的盘高度自适应(可关闭)
    • 图2. 系统Action Sheet样式的底部弹窗
    • 图3. 将一个view显示到指定的位置
    • 图4. 将一个view从frame1动画到frame2
    • 图5. 动画自定义,提供block将自定义动画传入即可

alert.gif actionSheet.gif point.gif frame.gif customforview.gif

  • 其他API
  1. 动态更新size(效果如上面ActionSheet样式所示,仅限size,不能改变位置)
// 实时更新view的size ,显示后也可以更新
- (void)updateContentSize;

// 使用
CGRect rect = _bView.bounds;
rect.size.height += 1;
_bView.bounds = rect;
[_transition updateContentSize];
  1. 手动dismiss(正常情况通过点击灰色区域进行dismiss,无需手动调用API)
/**
 * 隐藏popView
 * 如果TLTransition没有被引用,则在隐藏后会自动释放
 * 如果popView没有被引用,在隐藏后也会自动释放
 */
- (void)dismiss;

// 使用
[_transition dismiss];

2. UIViewController转场:

  • 控制器转场思维结构图 思维结构图
  • API:
  1. 所在类:分类UIViewController+Transitioning和遵守TLTLAnimatorProtocol协议的Animator
  2. 支持多种模式的动画(具体API见上述类头文件):
  • present:系统原生转场动画(非自定义转场)、Swipe系列CATransition系列动画Cunstom Block模式案例锦集
  • push:Swipe系列CATransition系列Cunstom模式案例锦集
  1. 支持自定义动画[Animator](非Cunstom模式) 只要基于TLTLAnimatorProtocol协议即可,具体实现可参考模版TLAnimatorTemplate里面有一些思路与注意事项
  2. 所以类型API都默认支持侧滑手势dismiss/pop,可以关闭(如果要手动dismiss/pop,只需调用原生API即可)
  3. 部分转场效果图
  • 图1. 原生present
  • 图2.Swipe
  • 图3.CATransition
  • 图4.Cunstom
  • 图5.锦集 (部分)
  • 图6.锦集-圆形缩放
  • 图7.锦集-抽屉效果
  • 图8.轻仿App store Card动画
  • 其它效果(见demo):发牌效果、轻缩放(小程序转场效果)... system.gif swipe.gif CATransition.gif custom.gif 锦集.gif 圆.gif 抽屉效果.gif AppstoreCard.gif
  1. 使用步骤与举例 (更多使用见UIViewController+Transitioning.h 中的API 或 Demo) 可以一步实现,也可以分步实现 a. 分步实现(建议使用,更灵活、多样化、统一化):
    1. 创建动画管理者
    2. 设置动画时间
    3. 设置手势使能
更多API的使用见demo

TLSecondViewController *vc = [[TLSecondViewController alloc] init];
vc.disableInteractivePopGestureRecognizer = YES; // 关闭手势

// 1.创建动画管理者
TLCATransitonAnimator *animator;
animator = [TLCATransitonAnimator animatorWithTransitionType:transitionType
                                                   direction:direction
                                     transitionTypeOfDismiss:transitionTypeOfDismiss
                                          directionOfDismiss:dismissDirection];
animator.transitionDuration = 3.0; // 动画时间

// 调用API转场
// push(直接使用self发起API调用)
[self pushViewController:vc animator:animator]; 

/** present
[self presentViewController:vc animator:animator completion:^{
        // 完成回调
  }];
*/

b. 一步实现:

更多API的使用见demo

TLSecondViewController *vc = [[TLSecondViewController alloc] init];
//  vc.disableInteractivePopGestureRecognizer = YES; // 关闭侧滑pop手势

// push (直接使用self发起API调用)
[self pushViewController: vc
swipeType: TLSwipeTypeInAndOut
pushDirection: TLDirectionToRight
popDirection: TLDirectionToRight];

/** present
[self presentViewController:vc
swipeType: TLSwipeTypeInAndOut
presentDirection:TLDirectionToRight
dismissDirection:TLDirectionToRight
completion:^ {
// 完成回调
}];
*/

3. 特殊情况处理(如果您对以下问题其他好的的处理方法愿意分享,请通过发issue的方法告诉我)

  • 在push或pop时使用 - hidesBottomBarWhenPushed隐藏bottom bar 或 tabbar时,bar与view的转场动画不协调的情况(如下图所示)
    • 问题由happying同学提出,并给出他的处理方案
    • 我的处理方法:在即将开始push时手动隐藏bar,pop完成后手动显示bar,以此取代 toVC.hidesBottomBarWhenPushed = YES 。(只在特殊情况下需要处理)
- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    if (显示条件) {
        self.tabBarController.tabBar.hidden = NO; // 如果是pop回来的,且需要显示bar,就手动将其显示
    }
}


- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    UIViewController *toVc = [UIViewController new];
    toVc.view.backgroundColor = [UIColor redColor];

    toVc.hidesBottomBarWhenPushed = NO; // 设置为NO
    self.tabBarController.tabBar.hidden = YES; // push前手动隐藏bar
    
    TLSwipeAnimator *anm = [TLSwipeAnimator animatorWithSwipeType:TLSwipeTypeInAndOut pushDirection:TLDirectionToTop popDirection:TLDirectionToBottom];
    [self pushViewController:toVc animator:anm];
}

scene1.gif

4. 参考

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].