开源转场库HYBControllerTransitions

简介:

首发博客:标哥的技术博客

中文文档

HYBControllerTransitions是自定义围场动画API封装类库,使用简便。使用者不需要了解太多转场动画知识,即可轻松接入项目使用。

这是一个给开发者们提供自定义push、pop、dismiss和present转场动画的开源组件。现在库中支持泡泡放大缩小围场、模态半屏转场和移动切换转场(KeyNote某转场效果)。对于开发者们来说,这是一个很不错的开源库。开发者不需要了解转场知识,只需要简单一个API就可以实现对应的功能。

如果想要更深入地学习,请在源码中查看对应的注释说明!

image

开源目标

在设计此类库时,希望以最简洁的API来实现转场功能。如果不懂任何转场知识的人,也能轻松使用,那才算达到目标。

因此,如果您没有学习过相关转场方面的知识,请不要担心,这个类库不需要您掌握太多转场的知识,只需要懂基本的OC语法即可轻松接入项目使用。

公共的属性及API都封装在HYBBaseTransition类型中,它遵守了需要实现转场的所有协议并实现之。如果目前类库中所提供的效果不满足您的需求,您可以直接继承于HYBBaseTransition于实现您希望得到的效果。

支持弹簧动画效果

默认转场动画使用的不是弹簧动画效果,如果觉得弹簧动画效果更佳,仅需要设置为YES即可。

/**
 *  Default is NO, if set to YES, it will be presented and dismissed with
 *  spring animation.
 */
@property (nonatomic, assign) BOOL animatedWithSpring;

当然,使用到弹簧自然需要设置其参数。不过作者都提供有默认值,都是经过调试过得到的值。如果觉得默认值所得到的效果不够好,请自行调整参数:

/**
 * The initial Spring velocity, Only when animatedWithSpring is YES, it will take effect.
 * Default is 1.0 / 0.5. If you don't know, just use the default value.
 */
@property (nonatomic, assign) CGFloat initialSpringVelocity;

/**
 *  The Spring damp, Only when animatedWithSpring is YES, it will take effect.
 *
 *  Default is 0.5. If you don't know, just use the default value.
 */
@property (nonatomic, assign) CGFloat damp;

转场类型动画

目前所支持的动画效果有以下:

  • Bubble Effect Transition:泡泡放大、缩小的动画效果,仅支持模态呈现present/dismiss。
  • Modal Effect Transition:半屏呈现转场,支持设置缩放系数、呈现高度等,仅支持模态呈现present/dismiss。
  • Move Push/Pop Transition:移动切换转场效果,仅支持push/pop模式。

Buble Effect Transition

present时,以泡泡圆形放大;dismiss时,以泡泡圆形缩小至起点。当需要实现此转场效果时,请使用HYBBubbleTransition类型。效果图如下:

image

如何使用

使用起来非常简单,只需要一个API且只在一处调用即可。比如,现在有HYBModalBubbleViewController,它有一个点击事件,在点击后会回调onPresent函数,然后配置如下即可实现转场:

- (void)onPresent {
  HYBBubbleFromBottomController *vc = [[HYBBubbleFromBottomController alloc] init];
  vc.modalPresentationStyle = UIModalPresentationCustom;

  // Remember to own it strongly
  // Because delegate is weak reference, and it will be released after out of the function body.
  self.bubbleTransition = [[HYBBubbleTransition alloc] initWithPresented:^(UIViewController *presented, UIViewController *presenting, UIViewController *source, HYBBaseTransition *transition) {
    // You need to cast type to the real subclass type.
    HYBBubbleTransition *bubble = (HYBBubbleTransition *)transition;

    // If you want to use Spring animation, set to YES.
    // Default is NO.
//    bubble.animatedWithSpring = YES;
    bubble.bubbleColor = presented.view.backgroundColor;

    // 由于一个控制器有导航,一个没有,导致会有64的误差,所以要记得处理这种情况
    CGPoint center = [self.view viewWithTag:1010].center;
    center.y += 64;

    bubble.bubbleStartPoint = center;
  } dismissed:^(UIViewController *dismissed, HYBBaseTransition *transition) {
    // Do nothing and it is ok here.
    // If you really want to do something, here you can set the mode.
    // But inside the super class, it is set to be automally.
    // So you do this has no meaning.
    transition.transitionMode = kHYBTransitionDismiss;
  }];
  vc.transitioningDelegate = self.bubbleTransition;

  [self presentViewController:vc animated:YES completion:NULL];
}

这里会present HYBBubbleFromBottomController这个控制器类,但是HYBBubbleFromBottomController对象什么也不需要做,就可以直接实现了转场。

是不是真的很简单呢?

如果想要了解更多功能功能,请在源代码中查看类中所提供的所有公开属性,几乎都有默认值,若不需要修改,直接使用默认值就可以了。

注意事项:一定要将代理设置为对应的转场类对象。而且一定要在当前控制器强引用该转场类对象,因为设置为转场代理,只是弱使用,如果没有强引用,它就会被释放掉:

// 代理不再是设置为self,而是设置为转场对象
vc.transitioningDelegate = self.bubbleTransition;

当需要实现半屏呈现且带缩放效果的转场动画时,可以使用此HYBModalTransition类。它仅支持present/dismiss模式。它提供了更多的属性设置,稍候讲解。效果如下:

image

如何使用

使用非常简单。假设在HYBModalHalfController有一个点击事件,点击后会回调onPresent函数,只需要在此函数中实现即可:

- (void)onPresent {
  HYBModalHalfDetailController *vc = [[HYBModalHalfDetailController alloc] init];

  self.transition = [[HYBModalTransition alloc] initWithPresented:^(UIViewController *presented, UIViewController *presenting, UIViewController *source, HYBBaseTransition *transition) {
    HYBModalTransition *modal = (HYBModalTransition *)transition;
    modal.scale = (CGPoint){0.95, 0.95};

    // If you don't specify, it will use default value
//    modal.presentedHeight = 350.0;

    // If you don't want to, set to YES or do no set.
    modal.shouldDismissOnTap = YES;

    // Default is NO, if set to YES, it will use spring animation.
    modal.animatedWithSpring = YES;

    // Default is YES. including navigation bar when take snapshots.
    // When has navigation bar, if set to NO, it looks not so good.
//    modal.scapshotIncludingNavigationBar = NO;
  } dismissed:^(UIViewController *dismissed, HYBBaseTransition *transition) {
    // do nothing
    // 注释掉也没有关系,内部已经自动设置了。
    transition.transitionMode = kHYBTransitionDismiss;
  }];

  vc.transitioningDelegate = self.transition;
  [self presentViewController:vc animated:YES completion:NULL];
}

对于HYBModalHalfDetailController控制器类,什么也不需要操作。这是不是有点太过于简单了?对于dismissed这个block,其实这里完全可以设置为nil,因为不需要做任何操作,默认就自动设置了mode。

支持带导航截图

如果当前控制器类有导航,最好还是连导航条也一起生成截图,这样效果会好很多。默认就是YES。如果不希望如此,请手动设置为N:

/**
 *  Whether to include navigation bar when take snapshots.
 *  Default is YES. If NO, it has only the presenting view.
 */
@property (nonatomic, assign) BOOL scapshotIncludingNavigationBar;

支持手势点击自动Dismiss

在弹出来之后,默认是添加了点击手势,可以自动dismiss。默认为YES,如果不希望如此,请手动设置为NO:

/**
 *  When tap on the presenting view, should it automatically is dismissed.
 *
 *  Default is YES.
 */
@property (nonatomic, assign) BOOL shouldDismissOnTap;

支持设置缩放、高度

都提供了默认值,但是如果想要调整到一个让您满意的效果,也许这些属性就可以帮助您实现:

/**
 *  Make the from view scale to the specified scale.
 *
 *  Default is (0.9, 0.9)
 */
@property (nonatomic, assign) CGPoint scale;

/**
 *  The height for destination view to present.
 *  
 *  Default is half of destination view, it means desView.frame.size.height / 2
 */
@property (nonatomic, assign) CGFloat presentedHeight;

Move Push/Pop Transition

类似于KeyNote的神奇移动效果push、pop动画。效果图如下:

image

使用起来也是很简单的,不同于present/dismiss模式,由于push的时候还不能得到转场过去的目标视图,比如效果图中的切换过去后看到的图片控件。在创建控制器类的时候,控件是不存在的,因此只能使用其它的办法来实现。

这里所采用的方案是通过给UIViewController添加扩展属性,如此就可以在创建UI的地方,将目标控件赋值。扩展所添加的属性为:

/**
 * Set a target view to show. When push, it will transition to
 * the target view. and when poped, it will pop from the target view.
 */
@property (nonatomic, strong, nonnull) UIView *hyb_toTargetView;

如何使用

假设当前控制器类为HYBMoveViewController,它有一个collectionview,呈风格布局显示一个图片列表。当点击cell的时候,就切换(push)到HYBMoveDetailController控制器中显示更多内容。

实现如下:


- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
  HYBMoveDetailController *vc = [[HYBMoveDetailController alloc] init];
  HYBGridModel *model = self.datasource[indexPath.item];
  vc.image = model.clipedImage;

  self.transition = [[HYBMoveTransition alloc] initWithPushed:^(UIViewController *fromVC, UIViewController *toVC, HYBBaseTransition *transition) {
    HYBMoveTransition *move = (HYBMoveTransition *)transition;
    HYBGridCell *cell = (HYBGridCell *)[collectionView cellForItemAtIndexPath:indexPath];
    move.targetClickedView = cell.imageView;

    move.animatedWithSpring = YES;
  } poped:^(UIViewController *fromVC, UIViewController *toVC, HYBBaseTransition *transition) {
    // Do nothing, unless you really need to.
  }];

  self.navigationController.delegate = self.transition;
  [self.navigationController pushViewController:vc animated:YES];
}

在点击的时候,需要创建一个转场对象,然后我们将导航类的代理设置为这个转场对象,如下:

self.navigationController.delegate = self.transition;

这样就可以实现内部自动处理了。当push的时候,会回调pushed闭包,在这里返回了转场对象,需要提供相关属性设置,才能实现。一定要传targetClickedView属性,这是被点击的控件,也是用于切换效果用的。

在HYBMoveDetailController控制器中,在viewDidLoad这里创建UI的地方,创建了一个图片控件,然后如些设置:

// You must specify a target view with this.
self.hyb_toTargetView = imgView;

OK,到此就实现好功能了!

是否足够简单?

如何安装

支持pod,可直接使用pod添加以下代码到Podfile中:

pod 'HYBControllerTransitions', '~> 1.0.0'

如果您的工程不支持Pod,呆直接将HYBControllerTransitions目录放到您的工程中即可!

源代码

如果不想使用pod来安装,或者想要看看demo,请到此处下载:HYBControllerTransitions

致谢

非常感谢andreamazz,学习了很多他的开源作品!

MIT LICENSE

Copyright (c) 2016 CoderJackyHuang. All rights reserved.

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.

目录
相关文章
|
小程序 前端开发 算法
小程序实现个人支付功能
1.小程序的支付功能一直有人咨询 2.以前一直以为个人开发者是不可以使用支付功能的 3.但是微信自己有个骚操作 ,所以个人也可以使用小程序功能 4.下面介绍
1886 0
小程序实现个人支付功能
|
网络协议 应用服务中间件 网络安全
|
8月前
|
算法 Serverless 数据处理
从集思录可转债数据探秘:Python与C++实现的移动平均算法应用
本文探讨了如何利用移动平均算法分析集思录提供的可转债数据,帮助投资者把握价格趋势。通过Python和C++两种编程语言实现简单移动平均(SMA),展示了数据处理的具体方法。Python代码借助`pandas`库轻松计算5日SMA,而C++代码则通过高效的数据处理展示了SMA的计算过程。集思录平台提供了详尽且及时的可转债数据,助力投资者结合算法与社区讨论,做出更明智的投资决策。掌握这些工具和技术,有助于在复杂多变的金融市场中挖掘更多价值。
267 12
|
11月前
|
Java
Java项目中高精度数值计算:为何BigDecimal优于Double
在Java项目开发中,涉及金额计算、面积计算等高精度数值操作时,应选择 `BigDecimal` 而非 `Double`。`BigDecimal` 提供任意精度的小数运算、多种舍入模式和良好的可读性,确保计算结果的准确性和可靠性。例如,在金额计算中,`BigDecimal` 可以精确到小数点后两位,而 `Double` 可能因精度问题导致结果不准确。
215 1
|
机器学习/深度学习 自然语言处理
预训练语义模型作为特征提取器的方法
预训练语义模型作为特征提取器的方法
|
缓存 负载均衡 监控
Nginx性能调优5招35式不可不知的策略实战
以上 V 哥总结的5个方面关于 Nginx性能调优的策略,实际应用中需要结合实际项目的情况来测试,希望对你有帮助,欢迎关注威哥爱编程,技术路上我们一起成长。
385 0
|
Kubernetes 算法 NoSQL
动态扩缩容下的全局流水号设计
该文介绍了在动态扩缩容场景下如何使用雪花算法生成全局流水号。雪花算法生成的ID由时间戳、工作机器ID和序列号组成。在K8s环境中,通过Redis存储当前workerId的最大值,每次生成时加1并取模,确保workerId在0-1023范围内。文中提供了实现雪花算法的`SnowflakeIdWorker`类示例,并展示了两种动态获取workerId的方法:一是利用Redis incr操作;二是通过Nacos服务发现获取IP和端口信息计算。此外,还提到了其他获取workId和dataCenterId的策略,如使用本地IP和主机名。
335 1
|
人工智能 算法 数据可视化
ECCV 2022 | 字节提出业内首个通用视频转场方案AutoTransition,数据集和代码已开源
ECCV 2022 | 字节提出业内首个通用视频转场方案AutoTransition,数据集和代码已开源
283 0
|
SQL 网络协议 应用服务中间件
使用NGINX作为HTTPS正向代理服务器
NGINX主要设计作为反向代理服务器,但随着NGINX的发展,它同样能作为正向代理的选项之一。正向代理本身并不复杂,而如何代理加密的HTTPS流量是正向代理需要解决的主要问题。本文将介绍利用NGINX来正向代理HTTPS流量两种方案,及其使用场景和主要问题。
使用NGINX作为HTTPS正向代理服务器