粉友们好久不见,很久之前就想和大家分享动画的一些东东。都没实现,这次做了几个小动画效果送给大家。

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

首先来看第一个：基础动画，由于gif图和真实动画效果有差别，所以看起来有点怪怪的。不过大概就是这个意思。

基础动画.gif
说这个之前 先说下所有的动画效果都是基于CALayerd的，所以说你通常看到的动画效果都是view里面的layer在呈现。
以下是一个粗略的导图，应该还是蛮清楚的。

基础动画

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)还会远吗？

---

源码地址链接：

点击下载源码