iOS动画-炫酷效果从此刻开始

简介

IOS 动画主要是指Core Animation框架。官方使用文档地址为:Core Animation Guide
Core Animation是IOS和OS X平台上负责图形渲染与动画的基础框架。Core Animation可以作用与动画视图或者其他可视元素,为你完成了动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点的位置)即可使用Core Animation的动画效果。Core Animation将大部分实际的绘图任务交给了图形硬件来处理,图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更加平滑,不会加重CPU的负担而影响程序的运行速度。

那些酷炫的实现,其实进行步骤分解,你就会发现都是基础动画合理的搭配组合,对坐标尺寸、视图显示、形态变化一一进行了代码描述,就形成了你呈现在你眼前的动画效果。

结构

常用属性

duration:动画持续时间
beginTime:动画开始时间
repeatCount:动画重复次数
autoreverses:执行的动画按照原动画返回执行
timingFunction:控制动画的显示节奏,系统主要提供了以下几种

kCAMediaTimingFunctionLinear 线性动画
kCAMediaTimingFunctionEaseIn 先慢后快(慢进快出)
kCAMediaTimingFunctionEaseOut 先块后慢(快进慢出)
kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢
kCAMediaTimingFunctionDefault 默认,也属于中间比较快

delegate : 动画代理。能够检测动画的执行和结束。

@interface NSObject (CAAnimationDelegate)

  • (void)animationDidStart:(CAAnimation *)anim;
  • (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
    @end

path:关键帧动画中的执行路径
type:过渡动画的动画类型,系统提供了四种过渡动画。

kCATransitionFade 渐变效果
kCATransitionMoveIn 进入覆盖效果
kCATransitionPush 推出效果
kCATransitionReveal 揭露离开效果 subtype : 过渡动画的动画方向
kCATransitionFromRight 从右侧进入
kCATransitionFromLeft 从左侧进入
kCATransitionFromTop 从顶部进入
kCATransitionFromBottom 从底部进入

动画的三种调用方式

使用block

[UIView animateWithDuration:1.0f animations:^{
      self.animationView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-100, 50, 50);
    } completion:^(BOOL finished) {
}];

UIView [begin commit]

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
self.animationView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-100, 50, 50);
[UIView commitAnimations];

CABaseAnimation

CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"];
anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-100)];
anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)];
anima.duration = 2.0f;
//fillMode=kCAFillModeForwards和removedOnComletion=NO
anima.fillMode = kCAFillModeBackwards;
anima.removedOnCompletion = YES;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
[self.animationView.layer addAnimation:anima forKey:@"positionAnimation"];

一、基础动画

重要属性

fromValue:keyPath对应的初始值
toValue:keyPath对应的结束值

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如:位移(position)、透明度(opacity)、缩放(scale)、旋转(rotate)、背景色(backgroundColor)等等。
具体效果实例演示

二、关键帧动画(keyAnimation)

具体效果实例演示

三、动画组(animationGroup)

具体效果实例演示

三、转场动画 (transition)

iOS7开始,苹果就提供了自定义转场的API,模态推送present和dismiss、导航控制器push和pop、标签控制器的控制器切换都可以自定义转场,具体效果实例演示

1、转场协议

转场动画的实现 遵从上面这个协议以及实现协议中的两个方法,如下:

//返回动画事件  
- (NSTimeInterval)transitionDuration:(nullable id <UIViewControllerContextTransitioning>)transitionContext;
//所有的过渡动画事务都在这个方法里面完成
- (void)animateTransition:(id <UIViewControllerContextTransitioning>)transitionContext;

四、动画扩展

1、Lottie动画库

1.1、简介

Easily add high-quality animation to any native app.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

简单的为任何原生APP添加高质量动画
Lottie是一个iOS,Android和React Native库,可以实时渲染After Effects动画,并且允许本地app像静态资源那样轻松地使用动画。

1.2、使用(以OC为例)

2、facebook开源动画库

2.1、开源地址 https://github.com/facebook/pop


上一篇
iOS 数据加密 iOS 数据加密
前言常用加密算法Base64加密MD5加密https://www.cmd5.com/ AES加密RSA加密
2018-07-05
下一篇
AppDelegate的瘦身之路 AppDelegate的瘦身之路
背景项目开发中,随着时间的推移,项目业务结构的越来越复杂,引入的东西越来越多,作为一个app入口的AppDelegate,会变得越来越“肥胖”,会发现里面有第三方分享注册、消息推送注册、友盟统计、键盘管理工具初始化等等,代码写的再工整, 也
2018-06-28
目录