IOSアニメーション(CoreAnimation)まとめ(複数記事参照)_html/css_WEB-ITnose

1. はじめに

iOS アニメーションは主に Core Animation フレームワークを指します。公式ドキュメントのアドレスは次のとおりです: Core Animation Guide。
CoreAnimation は、IOS および OS X プラットフォームでのグラフィックスのレンダリングとアニメーションを担当する基本的なフレームワークです。 Core Animation はアニメーション ビューやその他の視覚要素と連携して、アニメーションに必要なフレーム描画作業のほとんどを完了できます。 Core Animation のアニメーション効果を使用するには、いくつかのアニメーション パラメータ (開始点の位置や終了点の位置など) を設定するだけで済みます。 Core Animation は、実際の描画タスクのほとんどをグラフィックス ハードウェアに引き渡し、グラフィックスのレンダリングを高速化します。この自動グラフィックス アクセラレーション テクノロジにより、CPU への負担を増やしたり、プログラムの実行速度に影響を与えたりすることなく、アニメーションのフレーム レートが向上し、表示効果がよりスムーズになります。

2. コア アニメーション クラスの図と共通フィールド

コア アニメーション クラスの継承図

共通プロパティ
duration: アニメーションの継続時間
beginTime: アニメーションの開始時間
repeatCount: 繰り返しの数アニメーションの自動反転: 実行されたアニメーションは、元のアニメーションに従って実行に戻ります。
timingFunction: アニメーションの表示リズムを制御するシステムには、次の 5 つの値のオプションがあります:

@interface NSObject (CAAnimationDelegate) - (void)animationDidStart:(CAAnimation *)anim; - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

type: トランジション アニメーションのアニメーション タイプ システムは 4 つのトランジション アニメーションを提供します。
- kCATransitionFade グラデーション効果
- kCATransitionMoveIn オーバーレイ効果に入る
- kCATransitionPush プッシュアウト効果
- kCATransitionReveal 離脱効果を明らかにする
サブタイプ: トランジションアニメーションのアニメーション方向
- kCATransitionFromRight 右から入る
- kCATransitionFromLeft 左から入る
- kCATransitionFromTop から入る上
- kCATransitionFromBottom 下から入ります

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

ログイン後にコピー

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

ログイン後にコピー

 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

ログイン後にコピー

重要な属性fromValue
: keyPath に対応する初期値
toValue: keyPath に対応する終了値
基本的なアニメーションは主に提供されますCALayer オブジェクトの変数プロパティに対して簡単なアニメーション操作を実行します。例: 変位、透明度、スケーリング、回転、背景色など。
エフェクトのデモ:

ディスプレイスメントアニメーションコードのデモ:

 //使用CABasicAnimation创建基础动画 CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@"position"]; anima.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-75)]; anima.toValue = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-75)]; anima.duration = 1.0f; //anima.fillMode = kCAFillModeForwards; //anima.removedOnCompletion = NO; [_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

NotesfillMode=kCAFillModeForwardsおよびremovedOnComletion=NOの場合、アニメーションの実行後、レイヤーはアニメーションの実行後の状態を表示し続けます。しかし本質的には、レイヤーのプロパティ値はアニメーションが実行される前の初期値のままであり、実際には変更されていません。

重要な属性値
: 上記の NSArray オブジェクトです。内部の要素は「キーフレーム」と呼ばれます。アニメーション オブジェクトは、指定された時間 (継続時間) 内で値配列内の各キーフレームを順番に表示します。
path: CGPathRefCGMutablePathRef を設定して、レイヤーをパスに沿って移動させることができます。 path は CALayer のアンカーポイントと位置でのみ機能します。パスを設定した場合、値は無視されます。
keyTimes: 対応するキーフレームの対応する時点を指定でき、その値の範囲は 0 ～ 1.0 です。 keyTimes が設定されていない場合、各キーフレーム時間は分割されます。同様に。
効果のデモ:

循環パスアニメーションコードのデモ:

 CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"]; UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/2-100, SCREEN_HEIGHT/2-100, 200, 200)]; anima.path = path.CGPath; anima.duration = 2.0f; [_demoView.layer addAnimation:anima forKey:@"pathAnimation"];

説明: CABasicAnimation は、最大 2 つのキーフレームを持つ CAKeyframeAnimation とみなすことができます

重要な属性アニメーション
: アニメーション オブジェクトのグループを保存するために使用される NSArray効果のデモ:

グループ アニメーション コードのデモ:

 CAKeyframeAnimation *anima1 = [CAKeyframeAnimation animationWithKeyPath:@"position"]; NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, SCREEN_HEIGHT/2-50)]; NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2-50)]; NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH/3, SCREEN_HEIGHT/2+50)]; NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2+50)]; NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH*2/3, SCREEN_HEIGHT/2-50)]; NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50)]; anima1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil]; //缩放动画 CABasicAnimation *anima2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; anima2.fromValue = [NSNumber numberWithFloat:0.8f]; anima2.toValue = [NSNumber numberWithFloat:2.0f]; //旋转动画 CABasicAnimation *anima3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"]; anima3.toValue = [NSNumber numberWithFloat:M_PI*4]; //组动画 CAAnimationGroup *groupAnimation = [CAAnimationGroup animation]; groupAnimation.animations = [NSArray arrayWithObjects:anima1,anima2,anima3, nil]; groupAnimation.duration = 4.0f; [_demoView.layer addAnimation:groupAnimation forKey:@"groupAnimation"];

4.4：过渡动画（CATransition）

CAAnimation的子类，用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。
重要属性
type：动画过渡类型

Apple 官方的SDK其实只提供了四种过渡效果。
- kCATransitionFade 渐变效果
- kCATransitionMoveIn 进入覆盖效果
- kCATransitionPush 推出效果
- kCATransitionReveal 揭露离开效果
私有API提供了其他很多非常炫的过渡动画，比如@”cube”、@”suckEffect”、@”oglFlip”、 @”rippleEffect”、@”pageCurl”、@”pageUnCurl”、@”cameraIrisHollowOpen”、@”cameraIrisHollowClose”等。
注意点
私有api，不建议开发者们使用。因为苹果公司不提供维护，并且有可能造成你的app审核不通过。

subtype：动画过渡方向

startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

效果演示：

4.5：综合案例

4.5.1 ： 仿Path菜单效果

效果演示：

动画解析：
1、点击红色按钮，红色按钮旋转。（旋转动画）
2、黑色小按钮依次弹出，并且带有旋转效果。（位移动画、旋转动画、组动画）
3、点击黑色小按钮，其他按钮消失，被点击的黑色按钮变大变淡消失。（缩放动画、alpha动画、组动画）
博主的话：代码过多，这里不做演示。文章最后提供代码下载地址。

4.5.2： 仿钉钉菜单效果

效果演示：

看上去挺炫的，其实实现很简单，就是位移动画+缩放动画。

4.5.3： 点赞烟花效果动画

效果演示：


这里其实只有按钮变大效果使用的缩放动画。烟花效果 使用的是一种比较特殊的动画–粒子动画。
一个粒子系统一般有两部分组成：
1、CAEmitterCell：可以看作是单个粒子的原型（例如，一个单一的粉扑在一团烟雾）。当散发出一个粒子，UIKit根据这个发射粒子和定义的基础上创建一个随机粒子。此原型包括一些属性来控制粒子的图片，颜色，方向，运动，缩放比例和生命周期。
2、CAEmitterLayer：主要控制发射源的位置、尺寸、发射模式、发射源的形状等等。
以上两个类的属性还是比较多的，这里就不细讲了。大家可以google一下，详细的了解吧。

五、总结

任何复杂的动画其实都是由一个个简单的动画组装而成的，只要我们善于分解和组装，我们就能实现出满意的效果。动画其实也不是那么难。

六、下载地址

github下载地址：https://github.com/yixiangboy/IOSAnimationDemo
github：https://github.com/yixiangboy

iOS动画效果与上文相互结合：

理论 UIview VS UIlayer

UIView只是CALyer之上的封装，更准确的来说，UIView是CALyer的简版封装，加上事件处理的集合类。 CALayer是QuartzCore库内的类，是iOS上最基本的绘制单元。其次，我们知道iOS平台的Cocoa Touch 是源于OS X平台的Cocoa)，是在Cocoa的基础上添加了适用于移动手机设备的手势识别、动画等特性；但从底层实现上来说，Cocoa Touch与Cocoa共用一套底层的库，其中就包括了QuartCore.framework；但QuartCore.framework一开始就是为OS X设计的，所以其中有部分特性是不适合做移动设备开发的，比如最重要的坐标系统。因此，我们也就不难理解为何UIView/NSView在CALayer上做了一层封装。

基于UIView实现的动画

简单的Block动画

UIView

弹性动画

关键帧动画（中间可以添加合适多的帧来做不同的衔接动画）

CALayer动画

常用属性

duration : 动画的持续时间

beginTime : 动画的开始时间

repeatCount : 动画的重复次数

autoreverses : 执行的动画按照原动画返回执行

timingFunction : 控制动画的显示节奏，系统提供五种值选择， 分别是