iOS动画系列之四:基础动画之平移篇2. 创建不同速度控制的动画3. Swift版本的部分差异

最终实现的效果:

基础动画之平移效果

1. 基础版的平移

这里重点是为了演示fromValue/toValue 、 设置layer的Position位置、实现代理方法里面设置position的区别。

最终实现的效果:

BasicAnimation.gif

步骤如下: 1, 创建CALayer。 2, 设置CALayer的位置、大小、背景颜色。 3, 将自定义的CALayer添加到主视图的view上面。 4, 实例化一个CABasicAnimation对象。 5, 设置动画属性为平移。 6, 设置动画的起始位置,从哪里到哪里。 7,设置动画的持续时间、填充模式、重复次数、设置代理。 8, 将动画添加到需要作用的CALayer上面。 9, 实现<CAAnimationDelegate>的代理方法:动画开始时调用的方法、动画结束时调用的方法。

//遵守动画的代理协议
@interface STBasicPositionViewController ()<CAAnimationDelegate>
@property(weak,nonatomic)CALayer * redLayer;

@end

@implementation STBasicPositionViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //创建CALayer
    CALayer *redLayer = [CALayer layer];
    
    //设置位置和大小
    redLayer.position = CGPointMake(200, 200);
    redLayer.bounds = CGRectMake(0, 0, 100, 100);
    
    
    //设置背景颜色
    redLayer.backgroundColor = [UIColor redColor].CGColor;
    
    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:redLayer];
    
    self.redLayer = redLayer;
    
    
    /*------------开始设置动画------------------------*/
    
    //创建动画对象
    CABasicAnimation *basicAni = [CABasicAnimation animation];
    
    //设置动画属性
    basicAni.keyPath = @"position";
    
    //设置动画的起始位置。也就是动画从哪里到哪里
    basicAni.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];
    
    //动画结束后,layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
    
    
    //动画持续时间
    basicAni.duration = 2;
    
    //动画填充模式
    basicAni.fillMode = kCAFillModeForwards;
    
    //动画完成不删除
    basicAni.removedOnCompletion = NO;
    
    //xcode8.0之后需要遵守代理协议
    basicAni.delegate = self;
    
    //把动画添加到要作用的Layer上面
    [self.redLayer addAnimation:basicAni forKey:nil];
 
}


#pragma 实现代理协议的方法

//动画开始的时候调用
- (void)animationDidStart:(CAAnimation *)anim{
    
    self.redLayer.position = CGPointMake(300, 100);
    
}

//动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    
    self.redLayer.position = CGPointMake(300, 400);
}


@end

2. 创建不同速度控制的动画

上面代码里面我们看到了有一些莫名其妙出来的字符串,例如在设置动画属性的时候出来的:

    //设置动画属性
    basicAni.keyPath = @"position";

    //动画填充模式
    basicAni.fillMode = kCAFillModeForwards;

这些属性,在前一篇很枯燥的分享里面有提到。有需要的童鞋可以点进去当作字典翻一下。也没有啥记忆的必要性,需要的时候查一下,需要的时候查一下就好了。传输门:第三篇:iOS动画系列之三:Core Animation。介绍了Core Animation的常用属性和方法。

速度控制一共有四种模式:

kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉 kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开 kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地 kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。

2.1 抽取创建Layer及动画的公共方法

为了能够偷点懒,所以抽取了公共的方法。可以很方便的创建Layer以及动画。哈哈,本宅胖要是不懒就不会这么胖了。

#pragma 抽取创建动画及Layer的公共方法

//创建CALayer
- (CALayer *)createLayerWithPosition:(CGPoint)position backgroundColor:(UIColor *)backgroundColor{
    //创建CALayer
    CALayer *layer = [CALayer layer];
    
    //设置位置和大小
    layer.position = position;
    layer.bounds = CGRectMake(0, 0, 100, 100);
    
    
    //设置背景颜色
    layer.backgroundColor = backgroundColor.CGColor;
    
    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:layer];
    
    return layer;
}

//创建动画
- (CABasicAnimation *)createBasicAnimationWithFromValue:(CGPoint)fromValue toValue:(CGPoint)toValue timingFunction:(NSString *)timingFunction{
    //创建动画对象
    CABasicAnimation *basicAni = [CABasicAnimation animation];
    
    //设置动画属性
    basicAni.keyPath = @"position";
    
    //设置动画的起始位置。也就是动画从哪里到哪里
    basicAni.fromValue = [NSValue valueWithCGPoint:fromValue];
    
    //动画结束后,layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:toValue];
    
    //动画持续时间
    basicAni.duration = 2;
    
    //动画重复次数
    basicAni.repeatCount = CGFLOAT_MAX;
    
    //xcode8.0之后需要遵守代理协议
    basicAni.delegate = self;
    
    basicAni.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];

    return basicAni;
}

2.2 创建Layer和动画

这里我们只创建一个为例。

    //    创建红色线性运动的Layer
    self.redLayer = [self createLayerWithPosition:CGPointMake(0, 150) backgroundColor:[UIColor redColor]];
    [self.redLayer addAnimation:[self createBasicAnimationWithFromValue:CGPointMake(0, 150) toValue:CGPointMake(300, 150) timingFunction:kCAMediaTimingFunctionLinear] forKey:@"linear"];

有朋友可能发现了,为啥添加动画的时候后面的forKey怎么不是之前的nil了呢? 这里添加一个key值,实际上是为这个动画对象起了一个名字,通过key值,可以很方便的取到这个动画对象

2.3 移除动画

动画播放完成之后,我们通过key值将这个动画移除掉。 这个方法当然是在动画结束的时候调用最合适,不然动画还没放完就移除了岂不是开天窗啦~ CAAnimationDelegate这个里面的代理方法终于起到作用了。

//动画结束的时候调用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [self.redLayer removeAnimationForKey:@"linear"];
    
    [self.blueLayer removeAnimationForKey:@"easeIn"];

    [self.grayLayer removeAnimationForKey:@"easeOut"];

    [self.greenLayer removeAnimationForKey:@"easeInAndEaseOut"];

}

3. Swift版本的部分差异

Swift版本几乎和OC的一模一样。略有不同的是,swift在加载layer的时候,我们使用了懒加载的方式。也就是在使用的时候才去创建这个layer。

源代码也放在了码云上面。

    //MARK: - 懒加载

    private lazy var redLayer: CALayer = {
        let layer = self.createLayer(position: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
        
        return layer
    }()

今天就到这里啦。看样子宏图伟业打算一篇写完的CABasic Animation是没戏啦。下一篇文章写缩放这些的吧。任性的技术宅。哈哈~

喜欢的话就点个赞呗,或者赏俺点口粮。么么哒~爱你们~

OC和Swift的下载地址如下: https://git.oschina.net/atypical/CABasic-Animation.git

iOS实践:CABasic-Animation(OC和Swift两版)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS UIStepper(步进控件)使用总结

@property(nonatomic,getter=isContinuous) BOOL continuous;

502
来自专栏wOw的Android小站

[iOS] 输入框高度随输入内容变化

对于第一点,有一个方便的计算方法,就是获取UITextView内容的高度比上UITextView的字体的高度,即可得到当前的行数。

621
来自专栏DannyHoo的专栏

iOS中的转场动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

1022
来自专栏Charlie's Road

图层树和寄宿图 -- iOS Core Animation 系列一

一个视图就是在屏幕上显示的一个矩形块(比如图片,文字或者视频),它能够拦截类似于鼠标点击或者触摸手势等用户输入。视图在层级关系中可以互相嵌套,一个视图可以管理它...

612
来自专栏iOS开发攻城狮的集散地

iOS 封装跑马灯和轮播效果

704
来自专栏進无尽的文章

UI篇-CATextLayer和 富文本的交融

CATextLayer适用于IOS或者MAC,比UIlablel 和 NSTextView 能做的事很多,可以这样说UIlablel是通过CATextLayer...

781
来自专栏君赏技术博客

关于 ZHTableViewGroup 的设计之路

添加ZHTableViewGroup 分组->添加ZHTableViewCell 模块

922
来自专栏freesan44

pushViewController自定义动画

CATransition*transition = [CATransitionanimation];

701
来自专栏落影的专栏

直播APP常用动画效果

介绍 记录、总结开发遇到一些问题,大家一起交流学习。 这次带来,对直播APP的常用动画总结。 直播Live 效果展示 下面是一个很多平台都有的入门豪华礼物动...

4728
来自专栏向治洪

ios动画

在iOS开发中,动画是提高用户体验重要的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果,这对于app而言是非常重要的。 简介 iOS动画主要是指C...

1915

扫码关注云+社区