實現(xiàn)一個沿著路徑移動的動畫并且旋轉(zhuǎn)

1.通過CAKeyframeAnimation(關(guān)鍵幀動畫)來實現(xiàn)沿著沿著路徑移動的動畫
2.通過CABaseAnimation實現(xiàn)旋轉(zhuǎn)
3.在CAAnimationGroup中添加這兩個動畫

如何使用CAKeyframeAnimation來實現(xiàn)沿著路徑的移動

  使用CGMutablePathRef來繪制路徑利用關(guān)鍵幀動畫實現(xiàn)移動也可以使用UIBezierPath來繪制貝塞爾曲線路徑(code)
   CGPoint startPoint = self.leafImg.center;
   CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, nil, startPoint.x, startPoint.y);
    CGPathAddQuadCurveToPoint(path, nil, 50, self.view.frame.size.height-100, startPoint.x + 360, startPoint.y + 550);///添加一個控制點和結(jié)束點
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path = path;
使用CABaseAnimation實現(xiàn)旋轉(zhuǎn)操作(code)
CABasicAnimation *aniBase = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    aniBase.fromValue = @0;
    aniBase.toValue = @M_PI;
添加到CAAnimationGroup中,然后把動畫組加到layer中
CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 4.f;
    group.animations = @[aniBase,animation];
    [self.leafImg.layer addAnimation:group forKey:nil];

二.使用CAKeyframeAnimation實現(xiàn)

[UIView animateKeyframesWithDuration:4 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubic animations:^{
        CGPoint center = self.leafImg.center;
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.1 animations:^{
            self.leafImg.center = (CGPoint){(center.x + 15), (center.y + 80)};
        }];
        ///相對于4s的時間 0.1*4=0.4s的時候開始
        [UIView addKeyframeWithRelativeStartTime:0.1 relativeDuration:0.15 animations:^{
            self.leafImg.center = (CGPoint){center.x + 45, center.y + 185};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.25 relativeDuration:0.3 animations:^{
            self.leafImg.center = (CGPoint){center.x + 90, center.y + 295};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.55 relativeDuration:.3 animations:^{
            self.leafImg.center = (CGPoint){center.x + 180, center.y + 375};
        }];
        [UIView addKeyframeWithRelativeStartTime:0.85 relativeDuration:.15 animations:^{
            self.leafImg.center = (CGPoint){center.x + 360, center.y + 435};
        }];
        [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
            self.leafImg.transform = CGAffineTransformMakeRotation(M_PI);
        }];
    } completion:^(BOOL finished) {
       /// if (self.timer) {
           /// [self.timer invalidate];
            ///self.timer = nil;
        }
    }];
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

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

  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,693評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,270評論 5 13
  • 顯式動畫 顯式動畫,它能夠?qū)σ恍傩宰鲋付ǖ淖远x動畫,或者創(chuàng)建非線性動畫,比如沿著任意一條曲線移動。 屬性動畫 ...
    清風沐沐閱讀 2,096評論 1 5
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,324評論 1 23
  • 大家都知道在iOS中實現(xiàn)一個動畫相當簡單,只要調(diào)用UIView的塊代碼即可實現(xiàn)一個動畫效果,這在其他系統(tǒng)開發(fā)中基本...
    Kasign閱讀 1,024評論 0 2

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