源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

IOS轻松几步实现自定义转场动画

  • 时间:2020-02-22 18:55 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:IOS轻松几步实现自定义转场动画
[b]一、系统提供的转场动画[/b] 目前,系统给我们提供了[code]push/pops[/code]和[code]present/dismiss[/code]两种控制器之间跳转方.当然,通过设置[code]UIModalTransitionStyle[/code]属性,可以实现下面4种modal效果,相信大家都比较熟悉了,这里就不再展示效果图.
 UIModalTransitionStyleCoverVertical   // 从下往上,
 UIModalTransitionStyleFlipHorizontal  // 水平翻转
 UIModalTransitionStyleCrossDissolve   // 淡入淡出
 UIModalTransitionStylePartialCurl   // 卷角翻页
[b]二、自定义转场动画使用场景[/b] 系统给我们提供的转场动画效果较少,并且有时想对系统的效果做一些修改.例如:我们使用淡入淡出的modal效果,系统的动画时间我们不满意,希望让动画快点,或者慢点.系统并没有给我提供直接修改的属性或者方法,那么,这时我们不得不考虑使用自定义转场动画来实现我们想要的效果. [b]三、自定义转场动画的实现步骤[/b] 第1步:设置需要弹出控制器的[code]modalPresentationStyle[/code]为[code]UIModalPresentationCustom[/code]
 detailVc.modalPresentationStyle = UIModalPresentationCustom;
第2步:设置转场代理
detailVc.transitioningDelegate = self
可以抽一个工具类,专门负责转场动画 第3步:遵守[code]UIViewControllerTransitioningDelegate[/code]代理实现两个方法 确定谁负责弹出动画
-(id<UIViewControllerAnimatedTransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source {
 self.isPresnted = YES;
 return self;
}
确定谁负责动画消失
- (id<UIViewControllerAnimatedTransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed {
 self.isPresnted = NO;
 return self;
}
第4步:实现转场动画 上面都返回self,说明当前控制器即负责弹出动画又负责动画消失,所以具体的转场动画在当前控制器中进行. 先确定转场动画时间间隔
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
 return 1.0;
}
再实现具体动画(由于当前控制器即负责弹出动画,又负责消失动画,所以定义一个[code]Bool[/code]类型属性[code]isPresnted[/code]加以区分)
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //这里做弹出动画

 } else {

 //这里做消失动画
 }
}
[b]小结:[/b] 也可以让不同的控制器分别负责弹出和消失动画,这样就不需要定义一个专门用于区分的属性.个人建议最好是抽取一个专门负责转场动画的工具类,让该工具类负责所有转场动画,这样,不管是从业务逻辑上还是代码的复用性上都更加好.当然,这样做存在的一个弊端就是,转场动画中需要用到的一些属性必须通过定义变量,代理和Block等方式传递进来,而使用不同的控制器来管理弹出和消失动画在获取属性上更加方便.具体怎样做,也就仁者见仁,智者见智了. [b]下面来具体实现一个转场动画效果吧[/b] 由于实现动画的核心代码在第四步,这里也就只看[code]animateTransition:[/code]这一个方法啦! [b]从上往下的Modal效果 [/b]
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.设置基本属性
  presentedView.frame = CGRectMake(0, -667, 375, 667);
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   presentedView.frame = CGRectMake(0, 0, 375, 667);
  }completion:^(BOOL finished) {
   [transitionContext completeTransition:YES];
  }];

 } else {
  //1.取出view
  UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:dismissedView];

  //3.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.frame =CGRectMake(0, -667, 375, 667);
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];

 }
}
[img]http://files.jb51.net/file_images/article/201609/201696155543722.gif?201686155559[/img] [b]模仿系统淡入淡出效果[/b]
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {

 if (self.isPresnted == YES) {
  //1.取出view
  UIView *presentedView = [transitionContext viewForKey:UITransitionContextToViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:presentedView];
  //3.设置基本属性
  presentedView.alpha = 0;
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   presentedView.alpha = 1.0;
  }completion:^(BOOL finished) {
   [transitionContext completeTransition:YES];

  }];

 } else {
  //1.取出view
  UIView *dismissedView = [transitionContext viewForKey:UITransitionContextFromViewKey];
  //2.放入containerView
  [[transitionContext containerView]addSubview:dismissedView];
  //3.设置基本属性
  dismissedView.alpha = 1;
  //4.动画
  [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
   dismissedView.alpha = 0;
  }completion:^(BOOL finished) {

   [transitionContext completeTransition:YES];
  }];
 }
}
[img]http://files.jb51.net/file_images/article/201609/201696155643981.gif?201686155652[/img] 动画的时间可以从[code]ransitionDuration:[/code]方法获取 通过[code]UITransitionContextToViewKey[/code]和[code]UITransitionContextFromViewKey[/code]两个[code]Key[/code]分别获取弹出和消失动画的[code]View[/code](注意别混淆两个[code]Key[/code]) 要将做动画的[code]View[/code]加入到专门用于动画的[code]containerView[/code]中 [b]总结[/b] 以上就是这篇文章的全部内容了,这里只介绍怎样实现转场动画,至于其他好玩NB的效果,大家可以自己试着实现,小编以后也会分享其他更好的效果,希望这篇文章对大家能有一定的帮助,如果有疑问大家可以留言交流。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部