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

1. はじめに

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

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

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

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

kCAMediaTimingFunctionLinear リニアアニメーション

kCAMediaTimingFunctionEaseIn次に高速 (スローインと高速アウト)

kCAMediaTimingFunctionEaseOut ブロックが最初に低速 (高速インと低速アウト)

kCAMediaTimingFunctionEaseInEaseOut 最初は低速、次に高速、その後低速

kCAMediaTimingFunctionDefault デフォルト、中間も高速化

デリゲート: アニメーションプロキシ。アニメーションの実行と終了を検出する機能。

<code class="hljs objectivec has-numbering"><span class="hljs-class"><span class="hljs-keyword">@interface</span> <span class="hljs-title">NSObject</span> (<span class="hljs-title">CAAnimationDelegate</span>)</span> - (<span class="hljs-keyword">void</span>)animationDidStart:(CAAnimation *)anim; - (<span class="hljs-keyword">void</span>)animationDidStop:(CAAnimation *)anim finished:(<span class="hljs-built_in">BOOL</span>)flag;<span class="hljs-keyword">@end</span></code>

ログイン後にコピー

path: キーフレームアニメーションの実行パス

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

3つ目: IOSアニメーションの呼び出し方

1つ目: UIViewコードブロック呼び出し

<code class="hljs avrasm has-numbering">    _demoView<span class="hljs-preprocessor">.frame</span> = CGRectMake(<span class="hljs-number">0</span>, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>)<span class="hljs-comment">;</span>    [UIView animateWithDuration:<span class="hljs-number">1.0</span>f animations:^{        _demoView<span class="hljs-preprocessor">.frame</span> = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>)<span class="hljs-comment">;</span>    } completion:^(BOOL finished) {        _demoView<span class="hljs-preprocessor">.frame</span> = CGRectMake(SCREEN_WIDTH/<span class="hljs-number">2</span>-<span class="hljs-number">25</span>, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">50</span>, <span class="hljs-number">50</span>, <span class="hljs-number">50</span>)<span class="hljs-comment">;</span>    }]<span class="hljs-comment">;</span></code>

ログイン後にコピー

2つ目: UIView [begin commit]モード

_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];

ログイン後にコピー

3つ目: Coreを使用するアニメーションクラス

<code class="hljs avrasm has-numbering">    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string">"position"</span>]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.fromValue</span> = [NSValue valueWithCGPoint:CGPointMake(<span class="hljs-number">0</span>, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">75</span>)]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.toValue</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">75</span>)]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.duration</span> = <span class="hljs-number">1.0</span>f<span class="hljs-comment">;</span>    [_demoView<span class="hljs-preprocessor">.layer</span> addAnimation:anima forKey:@<span class="hljs-string">"positionAnimation"</span>]<span class="hljs-comment">;</span></code>

ログイン後にコピー

4. IOS アニメーションの使用

4.1: 基本アニメーション (CABaseAnimation)

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

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

<code class="hljs avrasm has-numbering">    //使用CABasicAnimation创建基础动画    CABasicAnimation *anima = [CABasicAnimation animationWithKeyPath:@<span class="hljs-string">"position"</span>]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.fromValue</span> = [NSValue valueWithCGPoint:CGPointMake(<span class="hljs-number">0</span>, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">75</span>)]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.toValue</span> = [NSValue valueWithCGPoint:CGPointMake(SCREEN_WIDTH, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">75</span>)]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.duration</span> = <span class="hljs-number">1.0</span>f<span class="hljs-comment">;</span>    //anima<span class="hljs-preprocessor">.fillMode</span> = kCAFillModeForwards<span class="hljs-comment">;</span>    //anima<span class="hljs-preprocessor">.removedOnCompletion</span> = NO<span class="hljs-comment">;</span>    [_demoView<span class="hljs-preprocessor">.layer</span> addAnimation:anima forKey:@<span class="hljs-string">"positionAnimation"</span>]<span class="hljs-comment">;</span></code>

ログイン後にコピー

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

4.2: キーフレームアニメーション (CAKeyframeAnimation)

CAKeyframeAnimation と CABaseAnimation は両方とも CAPropertyAnimatin のサブクラスに属します。 CABaseAnimation は 1 つの値 (fromValue) から別の値 (toValue) に変換することしかできませんが、CAKeyframeAnimation は NSArray を使用してキーフレームのセットを保存します。

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

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

<code class="hljs avrasm has-numbering">    CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@<span class="hljs-string">"position"</span>]<span class="hljs-comment">;</span>    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(SCREEN_WIDTH/<span class="hljs-number">2</span>-<span class="hljs-number">100</span>, SCREEN_HEIGHT/<span class="hljs-number">2</span>-<span class="hljs-number">100</span>, <span class="hljs-number">200</span>, <span class="hljs-number">200</span>)]<span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.path</span> = path<span class="hljs-preprocessor">.CGPath</span><span class="hljs-comment">;</span>    anima<span class="hljs-preprocessor">.duration</span> = <span class="hljs-number">2.0</span>f<span class="hljs-comment">;</span>    [_demoView<span class="hljs-preprocessor">.layer</span> addAnimation:anima forKey:@<span class="hljs-string">"pathAnimation"</span>]<span class="hljs-comment">;</span></code>

ログイン後にコピー

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

4.3: グループアニメーション (CAAnimationGroup)

CAAnimation のサブクラス、あなたアニメーションオブジェクトのグループを保存できます。 CAAnimationGroup オブジェクトをレイヤーに追加すると、グループ内のすべてのアニメーションオブジェクトを同時に実行できます。

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

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

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

ログイン後にコピー

4.4：过渡动画（CATransition）

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

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

subtype：动画过渡方向

kCATransitionFromRight 从右侧进入

kCATransitionFromLeft 从左侧进入

kCATransitionFromTop 从顶部进入

kCATransitionFromBottom 从底部进入

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 : 控制动画的显示节奏，系统提供五种值选择，分别是

kCAMediaTimingFunctionLinear 线性动画

kCAMediaTimingFunctionEaseIn 先慢后快（慢进快出）

kCAMediaTimingFunctionEaseOut 最初にブロックし、次に低速 (高速イン、低速アウト)

kCAMediaTimingFunctionEaseInEaseOut 最初にブロックし、次に高速、次に低速

kCAMediaTimingFunctionDefault デフォルト、中間でも高速です

パス: キーフレームアニメーションの実行パス

type: トランジションアニメーションのアニメーションタイプ。システムは次の 4 つのトランジションアニメーションを提供します。 ionRe veal は離脱効果を明らかにします

subtype: トランジションアニメーションのアニメーション方向

kCATransitionFromRight 右から入力

kCATransitionFromLeft 左から入力

kCATransitionFromTop 上から入力

kCATransitionFromBottom 下から入力

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

基本アニメーション (CABaseAnimation) 0:1 1:0 ドロップダウンシアーヘッドの展開と折りたたみを実現します

キーフレームアニメーション (CAKeyframeAnimation) CAKeyframeAnimation と CABaseAnimation は両方とも CAPropertyAnimatin のサブクラスに属します。 CABaseAnimation は 1 つの値 (fromValue) から別の値 (toValue) に変換することしかできませんが、CAKeyframeAnimation は NSArray を使用してキーフレームのセットを保存します。重要な属性値: これは、上記の NSArray オブジェクトです。内部の要素は「キーフレーム」と呼ばれます。アニメーションオブジェクトは、指定された時間 (継続時間) パス内で値配列内の各キーフレームを順番に表示します。 CGPathRefCGMutablePathRef を設定して、レイヤーがパスに沿って移動できるようにすることができます。 path は CALayer のアンカーポイントと位置でのみ機能します。パスを設定した場合、値は無視されます。 keyTimes: 値の範囲は 0 ～ 1.0 で、対応するキーフレームの対応する時点を指定できます。 keyTimes が設定されていない場合、各キーフレームの値は分割されます。同様に。

結合アニメーション:

Transition アニメーション (CATransition) プライベート API のほとんどは、使用後に起動できません。プライベート API は、@"cube"、@"suckEffect"、@"oglFlip"、@"rippleEffect"、@"pageCurl"、@"pageUnCurl"、@"cameraIrisHollowOpen"、@" など、他にも多くの非常にクールなトランジションアニメーションを提供します。カメラIrisHollowClose」など。

パーティクルアニメーション

変形アニメーション

変形は、回転、変形、平行移動などの操作を完了する、マトリックス変形のレベルでビューの表示効果を変更する非常に重要な属性です。変更すると、実際にはビューのフレームが変更されます。変換を表すために使用されるデータ型は 2 つあり、CGAffineTransform と CATransform3D です。前者は UIView に作用し、後者はレイヤーレベルの変換タイプです。後者に基づいて、より強力な機能を実現できます。マトリックス変換がどのように実装されるかを理解したい場合は、このブログを参照してください: CGAffineTransform 放射状変換

アニメーションを実装するために変換を使用する前に、一般的に使用される関数をいくつか紹介します:

厳密に言えば、transform です。アニメーションではありませんが、UIView アニメーションと CALayer アニメーションの両方に表示されるため、アニメーション内の操作の一部として言及しました。

一部のアプリケーション

上記の CALayer 基本アニメーションコードを使用して、ドロップダウンシアーヘッドの拡大と縮小、および時計の針の回転を実現します

入力ボックスの入力時の揺れ効果エラー情報。

アニメーションの読み込みは、CAShapeLayer と CABasicAnimation を使用して実現できます。

iOS レンダリングビューの階層図: