iOS動(dòng)畫之基于UIView的仿射形變動(dòng)畫

UIView動(dòng)畫

設(shè)置UIView形變動(dòng)畫有兩種常見用到的屬性,.frame,.transform,所以有的人也可以分別稱之為:

  • frame動(dòng)畫
  • transform動(dòng)畫

這兩種動(dòng)畫只需要在動(dòng)畫語法中適當(dāng)?shù)奈恢?,基于UIView和CALayer的屬性設(shè)置變化值即可。這種動(dòng)畫,不需要調(diào)用核心動(dòng)畫CAAnimation里面的專用類和API。
其中,frame動(dòng)畫設(shè)置方式有限,必須確切地制定形變前后的frame,平移還好,特別是旋轉(zhuǎn)的時(shí)候,只能通過數(shù)學(xué)知識(shí)計(jì)算出新的frame。這就得不償失了。所以,更多的時(shí)候, 當(dāng)涉及一些frame,bounds,center的改變或是形變的時(shí)候可以用transform來取代frame。

2.1 設(shè)置UIView動(dòng)畫的兩種語法形式

  • begin --- commit
  //偏移動(dòng)畫
  [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
  //縮放動(dòng)畫
  view.transform = CGAffineTransformIdentity;
  [UIView animateWithDuration:1.0f animations:^{
     view.transform = CGAffineTransformMakeScale(2.0f, 2.0f);
  }];

2.2 設(shè)置屬性形變動(dòng)畫的兩種類型

UIView的 CGAffineTransform 類型屬性:animatedView.transform

一般是View的旋轉(zhuǎn),拉伸移動(dòng)等屬性,是二維的,通常使用都是前綴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 與動(dòng)畫相關(guān)的屬性

2.3.1 UIView與動(dòng)畫相關(guān)的屬性--與CGAffineTransform對(duì)應(yīng)

下面是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

在實(shí)際開發(fā)中,使用場景:

  1. 當(dāng)涉及一些frame, bounds, center的改變或是形變的時(shí)候可以用 transform 來取代 frame。
  2. 一般在實(shí)際開發(fā)中都是平移,旋轉(zhuǎn),縮放組合使用。

2.3.2 CALayer與動(dòng)畫相關(guān)的屬性--與CATransform3D對(duì)應(yīng)

下面是CALayer的一些屬性介紹

//寬度和高度
@property CGRect bounds;

//位置(默認(rèn)指中點(diǎn),具體由anchorPoint決定)
@property CGPoint position;

//錨點(diǎn)(x,y的范圍都是0-1),決定了position的含義
@property CGPoint anchorPoint;

//背景顏色(CGColorRef類型)
@property CGColorRef backgroundColor;

//形變屬性
@property CATransform3D transform;

//邊框顏色(CGColorRef類型)
@property CGColorRef  borderColor;

//邊框?qū)挾?@property CGFloat borderWidth;

//圓角半徑
@property CGFloat cornerRadius;

//內(nèi)容(比如設(shè)置為圖片CGImageRef)
@property(retain) id contents;

注 :對(duì)view直接修改frame等不存在動(dòng)畫,可以用 [UIView animation...]執(zhí)行動(dòng)畫,但是直接修改view.layer的frame等屬性存在隱式動(dòng)畫

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1 CALayer IOS SDK詳解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,338評(píng)論 3 23
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,694評(píng)論 6 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果,實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,270評(píng)論 5 13
  • Core Animation其實(shí)是一個(gè)令人誤解的命名。你可能認(rèn)為它只是用來做動(dòng)畫的,但實(shí)際上它是從一個(gè)叫做Laye...
    小貓仔閱讀 3,967評(píng)論 1 4
  • 畢餳閱讀 110評(píng)論 0 0

友情鏈接更多精彩內(nèi)容