动画(三)

很高兴iOS 动画三和大家见面。

这次动画系列部分对原作重写,同时感谢他们的博文对我的帮助。
http://www.jianshu.com/p/027eddb2377a
https://www.gitbook.com/book/zsisme/ios-/details
http://www.cocoachina.com/ios/20141226/10775.html

接下啦我会对动画三的每个效果做一个见解


篮球1.gif

如上效果:篮球的路径跟鼠标移动的落点来移动的。所以很明显
要用到:

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
#warning 取出鼠标的下落的最后点然后付给给个篮球的图层  
    [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        self.basketballImageView.center = [[touches anyObject] locationInView:self.view];
    } completion:^(BOOL finished) {
        
    }];
}

这里送大家一句话:

一切动画都是基于图层的操作。

篮球2.gif

这个效果

-(void)move{
    
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"position";
    animation.duration = 2.0;
    animation.delegate = self;
    animation.values = @[
                         [NSValue valueWithCGPoint:CGPointMake(150, 32)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 300)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 140)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 300)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 220)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 300)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 250)],
                         [NSValue valueWithCGPoint:CGPointMake(150, 300)]
                         ];
    
    animation.timingFunctions = @[
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]
                                  ];
    animation.keyTimes = @[@0.0, @0.3, @0.5, @0.7, @0.8, @0.9, @0.95, @1.0];
    self.basketBallImageView.layer.position = CGPointMake(150, 300);
    [self.basketBallImageView.layer addAnimation:animation forKey:nil];

}

如果对关键帧动画还不了解的话可以参看
动画(一)http://www.jianshu.com/p/7fc7e6a6868f
动画(二)http://www.jianshu.com/p/d4c516a2d82a

动画(三)_第1张图片
时钟.gif

接下来我重点说下钟表的实现。
资源图片如下:

动画(三)_第2张图片
表盘
时针
分针
秒针

将一次摆放在表针依次摆放在表盘中,我的demo中用的是antolayout
效果图如下:

动画(三)_第3张图片
摆放的初始位置

接下来就是让他跑起来。
时钟时钟就是要有时间才可以
接下里就要获取当前的时间时分秒
iOS8是:NSGregorianCalendar
iOS9是:NSCalendarIdentifierGregorian
iOS8是:

NSUInteger units = NSHourCalendarUnit|NSMinuteCalendarUnit|NSSecondCalendarUnit

iOS9是

 NSUInteger units = NSCalendarUnitHour|NSCalendarUnitMinute|NSCalendarUnitSecond;
   NSCalendar *calendar = [[NSCalendar alloc]initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
    
    NSUInteger units = NSCalendarUnitHour|NSCalendarUnitMinute|NSCalendarUnitSecond;
    
    NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
动画(三)_第4张图片
时钟对象

打印出当前的时间是21点24分40秒有了这个一切都好办了。
接下来把当前的时间转为弧度


 CGFloat hoursAngle = (components.hour / 12.0) * M_PI * 2.0;
    CGFloat minsAngle = (components.minute / 60.0) * M_PI *2.0;
    CGFloat secsAngle = (components.second / 60.0) *M_PI *2.0;

有了弧度那就让他跑起来

self.hour.transform = CGAffineTransformMakeRotation(hoursAngle);
    self.minute.transform = CGAffineTransformMakeRotation(minsAngle);
    self.second.transform = CGAffineTransformMakeRotation(secsAngle);

你不觉得这有点怪怪的吗?
那他凭什么一致跑?不要急 接着往下看

 self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(run) userInfo:nil repeats:YES];

搞一个定时器美秒执行一次旋转方法搞定收工
钟表的大体思路就是这样的。

动画(三)_第5张图片
贝赛尔.gif

上面的效果一看一个球在一条画上去的曲线运功。
先搞定曲线方法可以画出来,然后这里用贝赛尔曲线如果你还不是知道贝赛尔请看如下链接
http://my.oschina.net/LangZiAiFer/blog/175623
http://www.tuicool.com/articles/uyiEBv

画一条贝赛尔曲线:

  UIBezierPath *bezierPath = [[UIBezierPath alloc]init];
    [bezierPath moveToPoint:CGPointMake(50, self.view.bounds.size.height-50)];
    [bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(110, 0) controlPoint2:CGPointMake(110, 100)];
 CAShapeLayer *pathLayer = [[CAShapeLayer alloc]init];
    pathLayer.path = bezierPath.CGPath;
    pathLayer.fillColor = [UIColor clearColor].CGColor;
    pathLayer.strokeColor = [UIColor lightGrayColor].CGColor;
    pathLayer.lineWidth = 3.f;
    [self.buttomView.layer addSublayer:pathLayer];

接下里让篮球动起来 还是用关键帧

 CAKeyframeAnimation *animation1 = [CAKeyframeAnimation  animation];
    animation1.keyPath = @"position";
#warning 运动轨迹 就是刚才的贝赛尔曲线 
    animation1.path = bezierPath.CGPath;
    animation1.rotationMode = kCAAnimationRotateAuto;
    animation1.duration = 5.0;
扩散.gif

苹果引入了一个新的CALayer子类叫做CAEmitterLayer。CAEmitterLayer是一个高性能的粒子引擎,被用来创建实时例子动画如:烟雾,火,雨等等这些效果。

CAEmitterLayer看上去像是许多CAEmitterCell的容器,这些CAEmitierCell定义了一个例子效果。你将会为不同的例子效果定义一个或多个CAEmitterCell作为模版,同时CAEmitterLayer负责基于这些模版实例化一个粒子流。一个CAEmitterCell类似于一个CALayer:它有一个contents属性可以定义为一个CGImage。

这种粒子的某一属性的初始值。比如,color属性指定了一个可以混合图片内容颜色的混合色。在示例中,我们将它设置为红色。
例子某一属性的变化范围。比如emissionRange属性的值是2π,这意味着例子可以从360度任意位置反射出来。如果指定一个小一些的值,就可以创造出一个圆锥形
指定值在时间线上的变化。比如,在示例中,我们将alphaSpeed设置为-0.4,就是说例子的透明度每过一秒就是减少0.4,这样就有发射出去之后逐渐小时的效果。
代码如下:


  CAEmitterLayer *emitter = [CAEmitterLayer layer];
    emitter.frame = self.snowImageView.bounds;
    [self.snowImageView.layer addSublayer:emitter];
    
    emitter.renderMode = kCAEmitterLayerAdditive;
    emitter.emitterPosition = CGPointMake(200, self.view.frame.size.height/2-100);
    
    CAEmitterCell *cell = [[CAEmitterCell alloc]init];
    cell.contents = (__bridge id)([UIImage imageNamed:@"Spark.png"].CGImage);
    
    cell.birthRate = 150;
    cell.lifetime = 5.0;
    cell.color = [UIColor redColor].CGColor;
    cell.alphaSpeed = -0.4;
    cell.velocity = 50;
    cell.velocityRange = 50;
    cell.emissionRange = M_PI * 2.0;
    emitter.emitterCells = @[cell];

动画(三)就到这里了。


具体实现已经在源码里面解释的很清楚了,不懂的话可以直接评论或者私信。

希望您继续关注我哦。指出不足之处我会很开心。会尽快改正过来的。

动画(3)已经来了,动画(4)还会远吗?


源码地址链接:

点击下载源码

你可能感兴趣的:(动画(三))