动画(三)
很高兴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
时钟.gif
接下来我重点说下钟表的实现。
资源图片如下：
表盘
时针
分针
秒针
将一次摆放在表针依次摆放在表盘中，我的demo中用的是antolayout
效果图如下：
摆放的初始位置
接下来就是让他跑起来。
时钟时钟就是要有时间才可以
接下里就要获取当前的时间时分秒
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]];
时钟对象
打印出当前的时间是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];
搞一个定时器美秒执行一次旋转方法搞定收工
钟表的大体思路就是这样的。
贝赛尔.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];
动画（三）就到这里了。
具体实现已经在源码里面解释的很清楚了，不懂的话可以直接评论或者私信。
