美文网首页
iOS 动画-uikit geekband

iOS 动画-uikit geekband

作者: AAup | 来源:发表于2016-04-11 16:08 被阅读34次

动画化原理

动画支持


案例

新建文档view输入

_label = [[ UILabel alloc]init];
_label.text = @" i can fly!";
_label.backgroundColor = [UIColor darkGrayColor];
_label.alpha =0;
[_label sizeToFit];
_label.center = CGPointMake(self.view.bounds.size.width , self.view.center.y);

[self.view addSubview:_label];
[UIView animateWithDuration:2.0
                      delay:0
       //UIViewAnimationOptionRepeat 不间断 ..基本用来做测试
                    options:UIViewAnimationOptionRepeat|UIViewAnimationOptionCurveLinear
                 animations:^{
 _label.center = CGPointMake(_label.bounds.size.width /2, self.view.center.y);
 _label.alpha = 1.0;
 }

                 completion:nil];

run起来


run

说说动画类型

//常规动画属性设置
UIViewAnimationOptionLayoutSubviews            = 1 <<  0,//动画过程中保证子视图跟随运动
UIViewAnimationOptionAllowUserInteraction      = 1 <<  1, // turn on user interaction while animating(动画过程中允许用户交互。)
UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2, // start all views from current value, not initial value所有视图从当前状态开始运行。
UIViewAnimationOptionRepeat                    = 1 <<  3, // repeat animation indefinitely(重复运行动画。。)
UIViewAnimationOptionAutoreverse               = 1 <<  4, // if repeat, run animation back and forth动画运行到结束点后仍然以动画方式回到初始点。
UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5, // ignore nested duration忽略嵌套动画时间设置。
UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve忽略嵌套动画速度设置。
UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)动画过程中重绘视图(注意仅仅适用于转场动画)。
UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing视图切换时直接隐藏旧视图、显示新视图,而不是将旧视图从父视图移除(仅仅适用于转场动画)
UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // do not inherit any options or animation type不继承父动画设置或动画类型。

//动画速度控制
UIViewAnimationOptionCurveEaseInOut            = 0 << 16, // default动画先缓慢,然后逐渐加速。
UIViewAnimationOptionCurveEaseIn               = 1 << 16,//动画逐渐变慢。
UIViewAnimationOptionCurveEaseOut              = 2 << 16,//动画逐渐加速。
UIViewAnimationOptionCurveLinear               = 3 << 16,//动画匀速执行,默认值。直线行驶

//翻页效果(仅适用于转场动画设置,可以从中选择一个进行设置,基本动画、关键帧动画不需要设置)
UIViewAnimationOptionTransitionNone            = 0 << 20, // default没有转场动画效果。
UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,//从左侧翻转效果
UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,//从右侧翻转效果。
UIViewAnimationOptionTransitionCurlUp          = 3 << 20,//向后翻页的动画过渡效果。
UIViewAnimationOptionTransitionCurlDown        = 4 << 20,//向前翻页的动画过渡效果。    
UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,//旧视图溶解消失显示下一个新视图的效果。
UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,//从上方翻转效果。 
UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,//从底部翻转效果。

UIview的keyframe 动画化

Snip20160411_11.png

案例
新建viewcontroller 加入

_label = [[UILabel alloc]init];
_label.text = @"I'm keyframe animat!";
_label.backgroundColor = [UIColor darkGrayColor];
[_label sizeToFit];
_label.center=self.view.center;

[self.view addSubview:_label];

CGFloat y = _label.center.y;
NSArray *pos = @[@(y-20),@(y+20),@(y)];
CGFloat delta = 1.0 / pos.count;

[UIView animateKeyframesWithDuration:5
                               delay:0
                             options:UIViewKeyframeAnimationOptionCalculationModeLinear |UIViewAnimationOptionRepeat
                          animations:^{
                              for(int i = 0;i<pos.count; i++ ){
                                  [UIView addKeyframeWithRelativeStartTime:delta * i
                                                          relativeDuration:delta
                                                                animations:^{
                                                                    _label.center = CGPointMake(_label.center.x, [[pos objectAtIndex:i]floatValue]);
                                                                }];
                              }
                          }
                           completion:nil];

run起来



主要控制好 阻尼值


案例

_labelNormal =[[UILabel alloc]init];
_labelNormal.text = @"I'm normal animation!";
_labelNormal.backgroundColor = [UIColor lightGrayColor];
[_labelNormal sizeToFit];
_labelNormal.center = CGPointMake(self.view.bounds.size.width, self.view.center.y);
[self.view addSubview: _labelNormal];

_labelSpring =[[UILabel alloc]init];
_labelSpring.text = @"I'm Spring animation!";
_labelSpring.backgroundColor = [UIColor lightGrayColor];
[_labelSpring sizeToFit];
_labelSpring.center = CGPointMake(self.view.bounds.size.width, self.view.center.y+self.labelSpring.bounds.size.height+3);
[self.view addSubview: _labelSpring];

[UIView animateWithDuration:3.0
                      delay:0
                    options:UIViewAnimationOptionRepeat
                 animations:^{
   _labelNormal.center = CGPointMake(_labelNormal.bounds.size.width/2, self.view.center.y);
}
                 completion:nil];

[UIView animateWithDuration:3.0
                      delay:0
     usingSpringWithDamping:0.25//第二动画是0.8
      initialSpringVelocity:15//第二动画是8
                    options:UIViewAnimationOptionRepeat
                 animations:^{
                     _labelSpring.center = CGPointMake(_labelSpring.bounds.size.width/2, self.labelSpring.center.y);
                 } completion:nil];

run起来 看起来gif效果不太好,但是真实运行后效果好多了

 usingSpringWithDamping:0.25
  initialSpringVelocity:15
 usingSpringWithDamping:0.8
  initialSpringVelocity:8
_label = [[UILabel alloc]init];
_label.text = @"I'm constraintd!'";
_label.backgroundColor = [UIColor lightGrayColor];
[_label sizeToFit];
[self.view addSubview:_label];

_label.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *right = [NSLayoutConstraint constraintWithItem:_label
                                                         attribute:NSLayoutAttributeRight
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:self.view
                                                         attribute:NSLayoutAttributeRight
                                                        multiplier:1.0
                                                          constant:0.0];
NSLayoutConstraint *center = [NSLayoutConstraint constraintWithItem:_label
                                                          attribute:NSLayoutAttributeCenterY
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeCenterY
                                                         multiplier:1.0
                                                           constant:0.0];

[self.view addConstraints:@[right, center]];
[self.view layoutIfNeeded];

[UIView animateWithDuration:3.0
                 animations:^{
    right.constant -= self.view.bounds.size.width - _label.bounds.size.width;
    [self.view layoutIfNeeded];
}];

相关文章

  • iOS 动画-uikit geekband

    动画化原理 动画支持 案例 新建文档view输入 run起来 说说动画类型 UIview的keyframe 动画化...

  • iOS动画

    iOS 动画1:UIKit的动画2:Core Animation 动画 UIKit 动画 UIKit 的动画构建比...

  • iOS中的动画

    iOS中的动画主要分为两种:UIView动画,核心动画。 一、UIView动画 UIKit直接将动画集成到UIVi...

  • iOS-动画

    iOS中实现动画效果的方法有很多,主要分为两类:uikit和core animation。今天先看uikit相关动...

  • 【Objective-c】动画学习笔记(二)Core Anim

    在上一编(视图动画) 已经简单的介绍了iOS的动画,UIView Animation是UIKit框架基于Core ...

  • iOS动画之UIView动画

    iOS酷炫的动画效果可以很好的增强用户体验。在iOS开发中实现动画的方式有多种,一般而言,简单的动画使用UIKit...

  • iOS 图形绘制Uikit(选) geekband

    UIkit 在实际开发过程中使用频率较低,这里我就贴上ppt 算了. iOS的图形系统 UIview的视觉属性 U...

  • UIViewPropertyAnimator 简介(一)

    目前在 UIKit 至少有三种创建动画的方法。iOS 4 之前的 begin/commit 方式,以及在 iOS ...

  • iOS开发中的动画

    00 动画架构 谈 UIKit 和 CoreAnimation 在 iOS 渲染中的角色https://mp.we...

  • ios 动画-CoreAnimation geekband

    本次简单说3中动画, 隐式动画CATransaction,显式动画CABasicAnimation and CAK...

网友评论

      本文标题:iOS 动画-uikit geekband

      本文链接:https://www.haomeiwen.com/subject/ftsilttx.html