粉友們好久不見,很久之前就想和大家分享動畫的一些東東。都沒實現,這次做了幾個小動畫效果送給大家。

屏幕快照 2015-10-28 22.03.38.png

首先來看第一個：基礎動畫，由于gif圖和真實動畫效果有差別，所以看起來有點怪怪的。不過大概就是這個意思。

基礎動畫.gif

基礎動畫

CABasicAnimation.png

轉圈代碼如下：

- (void)transformAnimation
{
    // 1.創建動畫對象
    CABasicAnimation *anim = [CABasicAnimation animation];
    
    // 2.設置動畫對象
    // keyPath決定了執行怎樣的動畫, 調整哪個屬性來執行動畫
    anim.keyPath = @"transform.rotation";//轉圈
//    anim.keyPath = @"transform.scale.x";//平鋪擴充
//    anim.keyPath = @"transform.translation.y";//平移
#warning 以下兩個效果一樣，都是包裝成對象類型
    anim.toValue = @(100);

// anim.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
    anim.duration = 2.0;

  
 // 動畫執行完畢后不要刪除動畫
    anim.removedOnCompletion = NO;
  // 保持最新的狀態
    anim.fillMode = kCAFillModeForwards;
    
    // 3.添加動畫
    [self.layer addAnimation:anim forKey:nil];
}

幀動畫

CAKeyframeAnimation.png

幀動畫.gif

//曲線動畫路徑
-(void)keyFrameAnimation{
    
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    anim.duration = 2.0;
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(100, 100, 150, 150));
    //動畫執行路徑
    anim.path = path;
    CGPathRelease(path);
    
    // 設置動畫的執行節奏
    // kCAMediaTimingFunctionEaseInEaseOut : 一開始比較慢, 中間會加速,  臨近結束的時候, 會變慢
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = MAXFLOAT;
    anim.delegate = self;
    
    [self.redView.layer addAnimation:anim forKey:nil];

}

//直線動路徑
- (void)testMove
{
    //    CABasicAnimation  fromValue --> toValue
    
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    
    anim.keyPath = @"position";
    
    NSValue *v1 = [NSValue valueWithCGPoint:CGPointMake(00, 80)];
    NSValue *v2 = [NSValue valueWithCGPoint:CGPointMake(100, 0)];
    NSValue *v3 = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *v4 = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
    
    //動畫的直線路徑
    anim.values = @[v1, v2, v3, v4];
    
//        anim.keyTimes = @[@(0.5), @(0.25), @(0.25)];
    
    anim.duration = 2.0;
    
    
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    
    anim.repeatCount = MAXFLOAT;

    
    [self.redView.layer addAnimation:anim forKey:nil];
}

轉場動畫

CATransition.png

轉場動畫.gif

轉場動畫代碼如下：

CAAnimationGroup.png

-(void)starAnimation{
    self.index++;
    if (self.index == 9) {
        self.index = 0;
    }
    
    NSString *filename = [NSString stringWithFormat:@"%d.png", self.index + 1];
    self.iconImageView.image = [UIImage imageNamed:filename];
    
    // 轉場動畫
    CATransition *anim = [CATransition animation];
//        anim.type = @"pageCurl";
    anim.type = @"cube";
    
    anim.subtype = kCATransitionFromLeft;
    anim.duration = 0.8;
    anim.repeatCount = MAXFLOAT;
    
    //    anim.startProgress = 0.5;
    ////
    //    anim.endProgress = 0.5;
    
    [self.view.layer addAnimation:anim forKey:nil];

}

組合動畫

組合動畫.gif

CATransition.png

代碼如下：

-(void)starAnimation{
    // 1.創建旋轉動畫對象
    CABasicAnimation *rotate = [CABasicAnimation animation];
    rotate.keyPath = @"transform.rotation";
     //旋轉的度數M_PI ＝ 180度
    rotate.toValue = @(M_PI*2);
    
    // 2.創建縮放動畫對象
    CABasicAnimation *scale = [CABasicAnimation animation];
    scale.keyPath = @"transform.scale";
    //縮放的比例大小 >1放大  <1縮小
    scale.toValue = @(0.5);
    
    // 3.平移動畫
    CABasicAnimation *move = [CABasicAnimation animation];
    move.keyPath = @"transform.translation";
    move.toValue = [NSValue valueWithCGPoint:CGPointMake(20, 100)];
    
    // 4.將所有的動畫添加到動畫組中
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[rotate, scale, move];
    group.duration = 2.0;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    
    [self.redView.layer addAnimation:group forKey:nil];
}

動畫(1)就到這里了，具體在代碼里面注釋很清楚了。
2015 -10 - 28 23:27上海

希望您繼續關注我哦。指出不足之處我會很開心。會盡快改正過來的。

動畫(1)已經來了，動畫(2)還會遠嗎？

源碼地址鏈接：

點擊下載源碼