IOS開発UIアニメーションまとめ(CoreAnimation)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

1. はじめに

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

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

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

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

kCAMediaTimingFunctionLinear リニアアニメーション

kCAMediaTimingFunctionEaseIn 最初の高速および次に遅くなります

kCAMediaTimingFunctionEaseOut 最初は遅く、次に速くなります

kCAM mediaTimingFunctionEaseInEaseOut 最初は遅く、次に速く、次に遅くなります

kCAMediaTimingFunctionDefault デフォルト、中間も速くなります

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

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

ログイン後にコピー

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

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

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

    _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);    }];123456

ログイン後にコピー

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つ目: useコアアニメーションクラス

    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"];12345

ログイン後にコピー

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

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

重要な属性
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"];12345678

ログイン後にコピー

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 が設定されていない場合、各キーフレーム時間は分割されます。同様に。

効果のデモ:

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

    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"];12345

ログイン後にコピー

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

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

CAAnimation のサブクラス、あなたアニメーションオブジェクトのグループを保存できます。CAAnimationGroup オブジェクトをレイヤーに追加すると、グループ内のすべてのアニメーションオブジェクトを同時に実行できます。
重要な属性
アニメーション : アニメーションオブジェクトのグループを保存するために使用される 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"];123456789101112131415161718192021222324

ログイン後にコピー

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一下，详细的了解吧。