美文网首页
iOS动画之基于UIView的仿射形变动画

iOS动画之基于UIView的仿射形变动画

作者: qui丶MyLove | 来源:发表于2018-08-14 17:12 被阅读24次

    UIView动画

    设置UIView形变动画有两种常见用到的属性,.frame,.transform,所以有的人也可以分别称之为:

    • frame动画
    • transform动画

    这两种动画只需要在动画语法中适当的位置,基于UIView和CALayer的属性设置变化值即可。这种动画,不需要调用核心动画CAAnimation里面的专用类和API。
    其中,frame动画设置方式有限,必须确切地制定形变前后的frame,平移还好,特别是旋转的时候,只能通过数学知识计算出新的frame。这就得不偿失了。所以,更多的时候, 当涉及一些frame,bounds,center的改变或是形变的时候可以用transform来取代frame。

    2.1 设置UIView动画的两种语法形式

    • begin --- commit
      //偏移动画
      [UIView beginAnimations:@"move" context:nil];  
      [UIView setAnimationDuration:2];  
      [UIView setAnimationDelegate:self];  
      imageContainView.frame = CGRectMake(80, 80, 200, 200);  
      [label1 setBackgroundColor:[UIColor yellowColor]];  
      [label1 setTextColor:[UIColor redColor]];  
      [UIView commitAnimations]; 
    
    • animations block
      //缩放动画
      view.transform = CGAffineTransformIdentity;
      [UIView animateWithDuration:1.0f animations:^{
         view.transform = CGAffineTransformMakeScale(2.0f, 2.0f);
      }];
    

    2.2 设置属性形变动画的两种类型

    UIView的 CGAffineTransform 类型属性:animatedView.transform

    一般是View的旋转,拉伸移动等属性,是二维的,通常使用都是前缀CGAffineTransform的类。

    CGAffineTransform transform = CGAffineTransformScale(imageContainView.transform, 1.2, 1.2); 
    [UIView beginAnimations: @"scale"context: nil]; 
    [UIView setAnimationDuration: 2];
    [UIView setAnimationDelegate: self];
    [imageView setTransform: transform]; 
    [UIView commitAnimations];
    

    CALayer的CATransform3D 类型属性:animaView.layer.transform

    通过 .layer.transform 可以在3D模式下面的变化,通常使用的都是前缀为CATransform3D的类。

    imageView.layer.transform =  CATransform3DIdentity;
    [UIView animateWithDuration:1.0f animations:^{
          imageView.layer.transform = CATransform3DMakeScale(2.0, 2.0, 1.0);
    }];
    

    2.3 与动画相关的属性

    2.3.1 UIView与动画相关的属性--与CGAffineTransform对应

    下面是UIView的一些属性介绍

    @property(nonatomic) CGRect            frame;
    @property(nonatomic) CGRect            bounds;      // default bounds is zero origin, frame size. animatable
    @property(nonatomic) CGPoint           center;      // center is center of frame. animatable
    @property(nonatomic) CGAffineTransform transform;   // default is CGAffineTransformIdentity. animatable
    @property(nonatomic) CGFloat           contentScaleFactor NS_AVAILABLE_IOS(4_0);
    
    @property(nonatomic,getter=isMultipleTouchEnabled) BOOL multipleTouchEnabled __TVOS_PROHIBITED;   // default is NO
    @property(nonatomic,getter=isExclusiveTouch) BOOL       exclusiveTouch __TVOS_PROHIBITED;         // default is NO
    

    在实际开发中,使用场景:

    1. 当涉及一些frame, bounds, center的改变或是形变的时候可以用 transform 来取代 frame。
    2. 一般在实际开发中都是平移,旋转,缩放组合使用。

    2.3.2 CALayer与动画相关的属性--与CATransform3D对应

    下面是CALayer的一些属性介绍

    //宽度和高度
    @property CGRect bounds;
    
    //位置(默认指中点,具体由anchorPoint决定)
    @property CGPoint position;
    
    //锚点(x,y的范围都是0-1),决定了position的含义
    @property CGPoint anchorPoint;
    
    //背景颜色(CGColorRef类型)
    @property CGColorRef backgroundColor;
    
    //形变属性
    @property CATransform3D transform;
    
    //边框颜色(CGColorRef类型)
    @property CGColorRef  borderColor;
    
    //边框宽度
    @property CGFloat borderWidth;
    
    //圆角半径
    @property CGFloat cornerRadius;
    
    //内容(比如设置为图片CGImageRef)
    @property(retain) id contents;
    

    注 :对view直接修改frame等不存在动画,可以用 [UIView animation...]执行动画,但是直接修改view.layer的frame等属性存在隐式动画

    相关文章

      网友评论

          本文标题:iOS动画之基于UIView的仿射形变动画

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