动画(三)

很高兴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];

动画(三)就到这里了。


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

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

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


源码地址链接:

点击下载源码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,340评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,762评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,329评论 0 329
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,678评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,583评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 47,995评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,493评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,145评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,293评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,973评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,556评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2 339

推荐阅读更多精彩内容