专栏名称: Cocoa开发者社区
CocoaChina苹果开发中文社区官方微信,提供教程资源、app推广营销、招聘、外包及培训信息、各类沙龙交流活动以及更多开发者服务。
目录
相关文章推荐
51好读  ›  专栏  ›  Cocoa开发者社区

iOS那些简单的动画

Cocoa开发者社区  · 公众号  · ios  · 2016-09-09 08:01

正文

▲点击上方“CocoaChina”关注即可免费学习iOS开发


作者:iceMaple

原文链接:http://www.jianshu.com/p/a098f6e3617f

本文获作者授权转载,转载请联系原作者


关于 Core Animation


Core Animation是一组非常强大的动画处理API,使用它能做出很多优雅的动画效果。能用的动画类有4个子类:CABasicAnimation、CAKeyframeAnimation、CATransition、CAAnimationGroup


开发步骤:


1. 初始化一个动画对象(CAAnimation)并设置一些动画相关属性.

2. 添加动画对象到层(CALayer)中,开始执行动画.


CALayer中很多属性都可以通过CAAnimation实现动画效果, 包括opacity, position, transform, bounds, contents等,具体可以在API文档中查找

通过调用CALayer的addAnimation:forKey:增加动画到层(CALayer)中,这样就能触发动画了.通过调用removeAnimationForKey:可以停止层中的动画.


注:Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程.


属性解读
Autoreverses设定这个属性为 YES 时,在它到达目的地之后,动画的返回到开始的值,代替了直接跳转到开始的值,过渡平滑
Duration设定开始值到结束值花费的时间。期间会被速度的属性所影响
RemovedOnCompletion这个属性默认为 YES,在指定的时间段完成后,动画就自动的从层上移除了。
FillMode这个属性一般和 RemovedOnCompletion 配合使用,保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO
Speed默认的值为 1.0.如果你改变这个值为 2.0,动画会用 2 倍的速度播放。这样的影响就是使持续时间减半。如果你指定的持续时间为 6 秒,速度为 2.0,动画就会播放 3 秒钟即一半的持续时间。
RepeatCount默认的是 0,动画只会播放一次。如果指定一个无限大的重复次数,使用 MAXFLOAT 。这个不应该和 repeatDration 属性一块使用
RepeatDuration这个属性指定了动画应该被重复多久。动画会一直重复,直到设定的时间用完。同上它不应该和 repeatCount 一起使用
FromValue设置动画的初始值
ToValue设置动画的到达值
TimingFunction控制动画运行的节奏.    kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉    kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开    kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地    kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
BeginTime可以用来设置动画延迟执行时间,若想延迟1s,就设置为CACurrentMediaTime()+1,CACurrentMediaTime()为图层的当前时间


巧妙的运用这些可以属性实现很棒的动画效果,比如下面:用CABasicAnimation实现的动画


CABasicAnimation动画


简单的呼吸和摇摆动画




简单的代码


1.呼吸动画

CABasicAnimation *animation =[CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue = [NSNumber numberWithFloat:1.0f];

animation.toValue = [NSNumber numberWithFloat:0.0f];

animation.autoreverses = YES;    //回退动画(动画可逆,即循环)

animation.duration = 1.0f;

animation.repeatCount = MAXFLOAT;

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeForwards;//removedOnCompletion,fillMode配合使用保持动画完成效果

animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

[self.alphaTagButton.layer addAnimation:animation forKey:@"aAlpha"];

2.摇摆动画

//设置旋转原点

self.sharkTagButton.layer.anchorPoint = CGPointMake(0.5, 0);

CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

//角度转弧度(这里用1,-1简单处理一下)

rotationAnimation.toValue = [NSNumber numberWithFloat:1];

rotationAnimation.fromValue = [NSNumber numberWithFloat:-1];

rotationAnimation.duration = 1.0f;

rotationAnimation.repeatCount = MAXFLOAT;

rotationAnimation.removedOnCompletion = NO;

rotationAnimation.autoreverses = YES;

rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

rotationAnimation.fillMode = kCAFillModeForwards;

[self.sharkTagButton.layer addAnimation:rotationAnimation forKey:@"revItUpAnimation"];


CATransition之简单的转场动画


CAAnimation的子类,用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。


属性解读
type动画过渡类型
subtype动画过渡方向


  • 常用动画类型:


type的值解读对应常量
fade淡入淡出kCATransitionFade
push推挤kCATransitionPush
reveal揭开kCATransitionReveal
moveIn覆盖kCATransitionMoveIn
cube立方体私有API
suckEffect吮吸私有API
oglFlip翻转私有API
rippleEffect波纹私有API
pageCurl反翻页私有API
cameraIrisHollowOpen开镜头私有API
cameraIrisHollowClose关镜头私有API


注:私有API只能通过字符串使用


过渡方向参数:


subtype的值解读
kCATransitionFromRight从右转场
kCATransitionFromLeft从左转场
kCATransitionFromBottom从下转场
kCATransitionFromTop从上转场


简单的CATransition动画


-(void)animationWithType:(NSString*)type

{

//- 创建一个转场动画:

CATransition *transition = [CATransition animation];

transition.repeatCount = 5;

//    - 确定动画类型:

transition.type = type;

//    - 确定子类型(方向等)

transition.subtype = kCATransitionFromLeft;

//    - 确定动画时间

transition.duration = 1;

//    - 添加动画

[self.imageView.layer addAnimation:transition forKey:nil];

}


使用时只用传你的想要的动画类型就好,私有API只能通过字符串使用哈。


[self animationWithType:self.dataArray[indexPath.row]];


DEMO地址:https://github.com/yongliangP/CATransitionDemo




小编推荐:[掘金]是一个高质量的技术社区,从 Swift 到 React Native,性能优化到动效源码,让你不错过 iOS 开发的每一个技术干货。长按图片二维码识别或者各大应用市场搜索「掘金」,技术干货尽在掌握中。



微信号:CocoaChinabbs


▲长按二维码“识别”关注即可免费学习 iOS 开发

月薪十万、出任CEO、赢娶白富美、走上人生巅峰不是梦

--------------------------------------

商务合作QQ:2408167315

投稿邮箱:[email protected]

推荐文章
热门视频集汇  ·  真主啊!这一幕太吓人了
7 年前
慈怀读书会  ·  听:但愿你可以成为这样的女子
7 年前