iOS動畫(二)CoreAnimation

1枕屉、CoreAnimation的結(jié)構(gòu)如下

1.png

2澈灼、CoreAnimation類介紹

(1)CAAnimation ---> CoreAnimation的基礎(chǔ)類

兩個(gè)代理方法絮缅,監(jiān)聽動畫的開始和結(jié)束

  • (void)animationDidStart:(CAAnimation *)anim;
  • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

(2)CABasicAnimation ---> 基本動畫

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

①實(shí)現(xiàn)大小怎燥、角度负饲、位置的變化通過transform來實(shí)現(xiàn):

CATransform3D transform = CATransform3D + (Make)+ Translate堤魁、Scale、Rotation
animation.toValue = [NSValue valueWithCATransform3D:transform];

//旋轉(zhuǎn)
- (void)rotation
{
  //實(shí)現(xiàn)180度的無限旋轉(zhuǎn)
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
    anim.duration = 1;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    anim.byValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2, 0, 0, 1)];
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:anim forKey:nil];
}
//位置
- (void)positon
{
  //實(shí)現(xiàn)位置的移動
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];
    CATransform3D form = CATransform3DMakeTranslation(350, 350, 0);
    anim.toValue = [NSValue valueWithCATransform3D:form];
    anim.duration = 1;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    [self.myView.layer addAnimation:anim forKey:nil];
}
//大小
- (void)scale
{
  //實(shí)現(xiàn)大小的變化
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"transform";
    CATransform3D form = CATransform3DMakeScale(1.2, 1.2, 1);
    anim.toValue =  [NSValue valueWithCATransform3D:form];
    anim.duration = 0.5;
    anim.repeatCount = MAXFLOAT;
    anim.autoreverses = YES;
    [self.myView.layer addAnimation:anim forKey:nil];
}
②實(shí)現(xiàn)大小、位置的變化通過bounds、position來實(shí)現(xiàn):
//大小
- (void)scale
{
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
    anim.duration = 2;
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];
    [_myView.layer addAnimation:anim forKey:nil];
    
}
//位置
- (void)positon
{
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"position";
    anim.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 500)];
    
    // 取消反彈
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    
    [_myView.layer addAnimation:anim forKey:nil];
}

(3)CAKeyframeAnimation --->關(guān)鍵幀動畫

@property(nullable, copy) NSArray *values;
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;
@property(nullable) CGPathRef path;

//位置1
- (void)position1
{
  //多步動畫
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position.x";
    animation.values = @[ @0, @10, @-10, @10, @0 ];
    //設(shè)置每一幀執(zhí)行的時(shí)間長短 這個(gè)的取值為0-1卤唉,代表占用時(shí)間的比例
    animation.keyTimes = @[ @0, @(1 / 6.0), @(3 / 6.0), @(5 / 6.0), @1 ];
    animation.duration = 0.4;
    //設(shè)置幀的中間值如何計(jì)算
    animation.calculationMode = kCAAnimationPaced;
    //這個(gè)屬性確定動畫執(zhí)行的狀態(tài)是否疊加在控件的原狀態(tài)上
    //默認(rèn)設(shè)置為NO添履,如果我們執(zhí)行兩次位置移動的動畫积仗,會從同一位置執(zhí)行兩次
    //如果設(shè)置為YES,則會在第一次執(zhí)行的基礎(chǔ)上執(zhí)行第二次動畫
    animation.additive = YES;
    //如果設(shè)置為YES,代表動畫每次重復(fù)執(zhí)行的效果會跟上一次相反
    animation.autoreverses = YES;
    [self.myView.layer addAnimation:animation forKey:@"position1"];
    self.myView.layer.zPosition = 1;

}
//位置2
- (void)position2
{
    //沿貝塞爾曲線的動畫

    // 這個(gè)方法將創(chuàng)建橢圓形路徑
    CGRect boundingRect = CGRectMake(0, 0, 300, 300);
    UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:boundingRect cornerRadius:150];

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    //設(shè)置一個(gè)路徑    
    animation.path = path.CGPath;
  
    animation.duration = 4;
    animation.additive = YES;
    animation.repeatCount = HUGE_VALF;
    animation.calculationMode = kCAAnimationPaced;
    animation.rotationMode = kCAAnimationRotateAuto;
    [self.myView.layer addAnimation:animation forKey:nil];
}

(4)CASpringAnimation ---> 彈性動畫

-(void)springAnimation{

    CASpringAnimation *animation = [CASpringAnimation animationWithKeyPath:@"position"];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(175, 400)];

    //質(zhì)量,影響圖層運(yùn)動時(shí)的彈簧慣性,質(zhì)量越大刽沾,彈簧拉伸和壓縮的幅度越大
    //如果把質(zhì)量改成10,則動畫變成 動畫的速度變慢排拷,并且波動幅度變大
    animation.mass = 1;
    //阻尼系數(shù)侧漓,阻止彈簧伸縮的系數(shù),阻尼系數(shù)越大监氢,停止越快
    animation.damping = 30;
    //初始速率 動畫視圖的初始速度大小
    animation.initialVelocity = 10;
    //剛度 剛度系數(shù)越大布蔗,形變產(chǎn)生的力就越大,運(yùn)動越快
    animation.stiffness = 10;

    animation.duration = animation.settlingDuration;
    animation.fillMode = kCAFillModeForwards;
    animation.removedOnCompletion = NO;
    [self.myView.layer addAnimation:animation forKey:@"springAnimation"];
}

(5)CATransition ---> 轉(zhuǎn)場動畫

@property(copy) NSString *type; 動畫過渡類型 ----->fade',moveIn', push' andreveal'. Defaults to fade'. @property(nullable, copy) NSString *subtype; 動畫過渡方向 ----->fromLeft', fromRight',fromTop' and * `fromBottom'

23.png
- (void)transition
{
    CATransition * ani = [CATransition animation];
    ani.type =  @"pageCurl";
    ani.subtype = kCATransitionFromRight;
    [self.myView.layer addAnimation:ani forKey:@""];
}

(5)CAAnimationGroup ---> 動畫組

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

3浪腐、動畫暫停和重啟

//暫停
-(void)pauseAnimation
{
    CFTimeInterval pausedTime = [self.myView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
    
    // 讓CALayer的時(shí)間停止走動
    self.myView.layer.speed = 0.0;
    // 讓CALayer的時(shí)間停留在pausedTime這個(gè)時(shí)刻
    self.myView.layer.timeOffset = pausedTime;
}
//重啟
-(void)resumeAnimation
{
    CFTimeInterval pausedTime = self.myView.layer.timeOffset;
    // 1. 讓CALayer的時(shí)間繼續(xù)行走
    self.myView.layer.speed = 1.0;
    // 2. 取消上次記錄的停留時(shí)刻
    self.myView.layer.timeOffset = 0.0;
    // 3. 取消上次設(shè)置的時(shí)間
    self.myView.layer.beginTime = 0.0;
    // 4. 計(jì)算暫停的時(shí)間(這里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [self.myView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 設(shè)置相對于父坐標(biāo)系的開始時(shí)間(往后退timeSincePause)
    self.myView.layer.beginTime = timeSincePause;
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末纵揍,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子议街,更是在濱河造成了極大的恐慌骡男,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件傍睹,死亡現(xiàn)場離奇詭異,居然都是意外死亡犹菱,警方通過查閱死者的電腦和手機(jī)拾稳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腊脱,“玉大人访得,你說我怎么就攤上這事。” “怎么了悍抑?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵鳄炉,是天一觀的道長。 經(jīng)常有香客問我搜骡,道長拂盯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任记靡,我火速辦了婚禮谈竿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘摸吠。我一直安慰自己空凸,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布寸痢。 她就那樣靜靜地躺著呀洲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪啼止。 梳的紋絲不亂的頭發(fā)上道逗,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機(jī)與錄音族壳,去河邊找鬼憔辫。 笑死,一個(gè)胖子當(dāng)著我的面吹牛仿荆,可吹牛的內(nèi)容都是我干的贰您。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼拢操,長吁一口氣:“原來是場噩夢啊……” “哼锦亦!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起令境,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤杠园,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后舔庶,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抛蚁,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年惕橙,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了瞧甩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,599評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡弥鹦,死狀恐怖肚逸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤朦促,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布膝晾,位于F島的核電站,受9級特大地震影響务冕,放射性物質(zhì)發(fā)生泄漏血当。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一洒疚、第九天 我趴在偏房一處隱蔽的房頂上張望歹颓。 院中可真熱鬧,春花似錦油湖、人聲如沸巍扛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽撤奸。三九已至,卻和暖如春喊括,著一層夾襖步出監(jiān)牢的瞬間胧瓜,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工郑什, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留府喳,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓蘑拯,卻偏偏與公主長得像钝满,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子申窘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評論 2 348

推薦閱讀更多精彩內(nèi)容