国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統(tǒng) > iOS > 正文

iOS的CoreAnimation開發(fā)框架中的Layer層動畫制作解析

2019-10-21 18:53:52
字體:
供稿:網(wǎng)友

CAAnimation動畫體系的介紹
CAAnimation是CoreAnimation框架中執(zhí)行動畫對象的基類,下面有一張圖,是我手畫的,不太美觀,但是可以將與CAAnimation相關(guān)的幾個動畫類的關(guān)系表達清楚:

iOS,CoreAnimation,Layer,動畫

從上圖中可以看到,從CAAnimation中繼承出三個子類,分別是用于創(chuàng)建屬性動畫的CAPropertyAnimation,創(chuàng)建轉(zhuǎn)場動畫的CATransition和創(chuàng)建組合動畫的CAAnimationGroup。

我們就先從根類開始探討。

1.CAAnimation屬性和方法

CAAnimation作為動畫對象的基類,其中封裝了動畫的基礎(chǔ)屬性,如下:

//通過類方法創(chuàng)建一個CAAnimation對象
+ (instancetype)animation;
//動畫執(zhí)行的時序模式
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//代理
@property(nullable, strong) id delegate;
//是否動畫完成時將動畫對象移除掉
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
timingFunction定義了動畫執(zhí)行的時序效果,CAMediaTimingFunction的創(chuàng)建方式如下:

/*
name參數(shù)決定的執(zhí)行的效果,可選參數(shù)如下
//線性執(zhí)行
 NSString * const kCAMediaTimingFunctionLinear;
 //淡入  在動畫開始時 淡入效果
 NSString * const kCAMediaTimingFunctionEaseIn;
 //淡出 在動畫結(jié)束時 淡出效果
 NSString * const kCAMediaTimingFunctionEaseOut;
 //淡入淡出
 NSString * const kCAMediaTimingFunctionEaseInEaseOut;
 //默認效果
 NSString * const kCAMediaTimingFunctionDefault;
*/
+ (instancetype)functionWithName:(NSString *)name;

CAAnimation的代理方法入如下幾個:

//動畫開始時執(zhí)行的回調(diào)
- (void)animationDidStart:(CAAnimation *)anim;
//動畫結(jié)束后執(zhí)行的回調(diào)
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

2.CAPropertyAnimation屬性與方法

CAPropertyAnimation是繼承于CAAnimation專門用來創(chuàng)建與屬性相關(guān)的動畫的類:

//創(chuàng)建對象 參數(shù)中的path就是我們要執(zhí)行動畫的屬性
//例如,如果傳入@"backgroundColor" 當(dāng)layer的背景顏色改變時,就會執(zhí)行我們設(shè)置的動畫
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
//這個屬性確定動畫執(zhí)行的狀態(tài)是否疊加在控件的原狀態(tài)上
//默認設(shè)置為NO,如果我們執(zhí)行兩次位置移動的動畫,會從同一位置執(zhí)行兩次
//如果設(shè)置為YES,則會在第一次執(zhí)行的基礎(chǔ)上執(zhí)行第二次動畫
@property(getter=isAdditive) BOOL additive;
//這個屬性對重復(fù)執(zhí)行的動畫有效果
//默認為NO,重復(fù)執(zhí)行的動畫每次都是從起始狀態(tài)開始
//如果設(shè)置為yes,則為此執(zhí)行都會在上一次執(zhí)行的基礎(chǔ)上執(zhí)行
@property(getter=isCumulative) BOOL cumulative;
//這個屬性和transfron屬性的動畫執(zhí)行相關(guān)
@property(nullable, strong) CAValueFunction *valueFunction;

上面這些屬性中,只有一個需要我們注意,valueFunction是專門為了transform動畫而設(shè)置的,因為我們沒有辦法直接改變transform3D中的屬性,通過這個參數(shù),可以幫助我們直接操作transfrom3D屬性變化產(chǎn)生動畫效果,舉例如下,一個繞Z軸旋轉(zhuǎn)的動畫:

 //繞z軸旋轉(zhuǎn)的動畫
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"transform"];
    //從0度開始
    ani.fromValue = @0;
    //旋轉(zhuǎn)到180度
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    //時間2S
    ani.duration = 2;
    //設(shè)置為z軸旋轉(zhuǎn)
    ani.valueFunction = [CAValueFunction functionWithName:kCAValueFunctionRotateZ];
    //執(zhí)行動畫
    [layer addAnimation:ani forKey:@""];

實際上,使用點的方式也是可以訪問到相應(yīng)屬性的,如果不設(shè)置valueFunction,使用如下方法也是可以進行繞Z軸旋轉(zhuǎn)的:

//繞z軸旋轉(zhuǎn)的動畫
    CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    //從0度開始
    ani.fromValue = @0;
    //旋轉(zhuǎn)到180度
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    //時間2S
    ani.duration = 2;
    //執(zhí)行動畫
    [layer addAnimation:ani forKey:@""];

3.CABasicAnimation屬性

CABasicAnimaton是CAPropertyAnimation分出來的一個子類,創(chuàng)建基礎(chǔ)的屬性變化動畫,例如我們上面的示例代碼,其中屬性如下:

@property(nullable, strong) id fromValue;
@property(nullable, strong) id toValue;
@property(nullable, strong) id byValue;

上面三個屬性都是來確定動畫的起始與結(jié)束位置,有如下的含義:

(1)fromValue和toValue不為空:動畫的值由fromValue變化到toValue

(2)fromValue和byValue不為空:動畫的值由fromValue變化到fromValue+byValue

(3)byValue和toValue不為空:動畫的值由toValue-byValue變化到toValue

(4)只有fromValue不為空:動畫的值由fromValue變化到layer的當(dāng)前狀態(tài)值

(5)只有toValue不為空:動畫的值由layer當(dāng)前的值變化到toValue

(6)只有byValue不為空:動畫的值由layer當(dāng)前的值變化到layer當(dāng)前的值+byValue

4.CAKeyframeAnimation關(guān)鍵幀動畫

CAKeyframeAnimation也是繼承與CAPropertyAnimation的一個子類,其與CABasicAnimation的不同之處在于雖然其都是改變layer層屬性的動畫,但是CABasicAnimation只能設(shè)置初始與結(jié)束狀態(tài),這之間我們沒辦法控制,而CAKeyframeAnimation可以讓我們設(shè)置一些關(guān)鍵幀再整個動畫的過程中。屬性方法如下:

//關(guān)鍵幀的值數(shù)組 例如我們想讓控件沿某個路徑移動,這里面存放每個移動的點
@property(nullable, copy) NSArray *values;
//直接設(shè)置路徑,作用域values類似
@property(nullable) CGPathRef path;
//設(shè)置每一幀執(zhí)行的時間長短 這個的取值為0-1,代表占用時間的比例
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;
//每一幀執(zhí)行過程中的時序效果 上面有提過
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;
/*
設(shè)置幀的中間值如何計算
 NSString * const kCAAnimationLinear;
 NSString * const kCAAnimationDiscrete;
 NSString * const kCAAnimationPaced;
 NSString * const kCAAnimationCubic;
 NSString * const kCAAnimationCubicPaced;
*/
@property(copy) NSString *calculationMode;

示例如下:

    CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    ani.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 200)],[NSValue valueWithCGPoint:CGPointMake(200, 200)]];
    ani.duration = 3;
    [layer addAnimation:ani forKey:@""];

5.CASpringAnimation阻尼動畫

通過CASpringAnimation,可以幫助開發(fā)者很輕松的創(chuàng)建出有彈簧效果的動畫,主要屬性如下:

//這個屬性設(shè)置彈簧重物的質(zhì)量 會影響慣性 必須大于0 默認為1
@property CGFloat mass;
//設(shè)置彈簧的剛度系數(shù),必須大于0 默認為100  這個越大 則回彈越快
@property CGFloat stiffness;
//阻尼系數(shù) 默認為10 必須大于0 這個值越大 回彈的幅度越小
@property CGFloat damping;
//初始速度
@property CGFloat initialVelocity;
//獲取動畫停下來需要的時間
@property(readonly) CFTimeInterval settlingDuration;

6.CATransition轉(zhuǎn)場動畫

CATransition和CAPropertyAnimation的不同之處在于當(dāng)layer層出現(xiàn)時,會產(chǎn)生動畫效果,而并不是屬性改變時,屬性如下:

/*
設(shè)置動畫類型
//淡入
 NSString * const kCATransitionFade;
 //移入
 NSString * const kCATransitionMoveIn;
 //壓入
 NSString * const kCATransitionPush;
 //溶解
 NSString * const kCATransitionReveal;
*/
@property(copy) NSString *type;
/*
設(shè)置動畫的方向
//從右側(cè)進
 NSString * const kCATransitionFromRight;
 //從左側(cè)進
 NSString * const kCATransitionFromLeft;
 //從上側(cè)進
 NSString * const kCATransitionFromTop;
 //從下側(cè)進
 NSString * const kCATransitionFromBottom;
*/
@property(nullable, copy) NSString *subtype;

其實,關(guān)于type定義的動畫效果,出來官方定義的,我們還可以使用一些私有的參數(shù),如下:

(1)pageCurl   翻頁
(2)rippleEffect 滴水效果
(3)suckEffect 收縮效果,如一塊布被抽走
(4)cube 立方體效果
(5)oglFlip 上下翻轉(zhuǎn)效果
例如:

    CATransition * ani = [CATransition animation];
    ani.type =  @"pageCurl";
    ani.subtype = kCATransitionFromRight;
    [layer addAnimation:ani forKey:@""];

7.CAAnimationGroup動畫組

 CAAnimationGroup本身并沒有定義動畫,他可以將我們上面提到的相關(guān)動畫進行組合:

@property(nullable, copy) NSArray<CAAnimation *> *animations;

高級動畫技巧
1.事務(wù)類

CoreAnimation中還有一個非常重要的類:CATransaction事物類,這個可以同時設(shè)置多個layer層的動畫效果。可以通過隱式和顯式兩種方式來進行動畫操作。

2.CATransaction屬性

對layer層的屬性操作,都會形成隱式動畫,要使用隱式動畫,需要關(guān)閉layer層的animation動畫屬性,使用下面的方法:

//關(guān)閉animation動畫效果,開啟隱式動畫
+ (BOOL)disableActions;
+ (void)setDisableActions:(BOOL)flag;
CATransaction用類方式通過設(shè)置key-value來進行動畫的屬性設(shè)置:

+ (nullable id)valueForKey:(NSString *)key;
+ (void)setValue:(nullable id)anObject forKey:(NSString *)key;

支持的key值如下:

//設(shè)置動畫持續(xù)時間
 NSString * const kCATransactionAnimationDuration;
 //設(shè)置停用animation類動畫
 NSString * const kCATransactionDisableActions;
 //設(shè)置動畫時序效果
 NSString * const kCATransactionAnimationTimingFunction;
 //設(shè)置動畫完成后的回調(diào)
 NSString * const kCATransactionCompletionBlock;

除了隱式的展示動畫外,也可以顯式的通過調(diào)用CATransaction的相關(guān)方法進行顯示的提交動畫:

//動畫開始
+ (void)begin;
//提交動畫
+ (void)commit;
//立即進行動畫渲染 一般不需調(diào)用
+ (void)flush;
//下面這兩個方法用于動畫事物的加鎖與解鎖 在多線程動畫中,保證修改屬性的安全
+ (void)lock;
+ (void)unlock;

示例如下:

[CATransaction begin];
[CATransaction setValue:@1 forKey:kCATransactionAnimationDuration];
layer.backgroundColor = [UIColor blueColor].CGColor;
[CATransaction commit];


注:相關(guān)教程知識閱讀請移步到IOS開發(fā)頻道。
發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 海宁市| 昌都县| 昌平区| 利津县| 洪雅县| 延吉市| 柳河县| 扶绥县| 太保市| 成都市| 汨罗市| 大足县| 泰安市| 巴里| 灯塔市| 阜平县| 广汉市| 古浪县| 化德县| 屏南县| 武夷山市| 县级市| 集贤县| 民勤县| 龙江县| 吐鲁番市| 城市| 自贡市| 延津县| 漳州市| 和林格尔县| 上思县| 天水市| 沈阳市| 郓城县| 双辽市| 乌拉特后旗| 凤翔县| 罗源县| 柞水县| 民和|