iOSの基本的なアニメーション、キーフレームアニメーション、エイリアシス関数を使用して物理アニメーション効果を実現する

iOS基本アニメーション/キーフレームアニメーション/緩動関数を使用して物理的なアニメーション効果を実現します

まず基本的なアニメーション部分について説明します

基本的なアニメーション部分は比較的簡単ですが、実現できるアニメーション効果は限られています

使用方法は概ね以下の通りです:

#1. 原始のUIまたは画面を作成します

#2. CABasicAnimationインスタンスを作成し、keypartを設定します/duration/fromValue/toValue

#3. アニメーションが最終的に停止する位置を設定します

#4. 設定したアニメーションをlayer層に追加します

例えば、円が上から下に動く実現について説明します。以下のコード:

//設定元画面
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //基本的なアニメーションを作成します
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  //属性を設定します
  basicAnimation.keyPath = @"position";
  basicAnimation.duration = 4.0f;
  basicAnimation.fromValue = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  //アニメーション終了位置を設定
  showView.center = CGPointMake(50, 300);
  //layer層にアニメーションを追加
  [showView.layer addAnimation:basicAnimation forKey:nil];

次に、キーフレームアニメーションについて説明します

基本的なアニメーションとほぼ同じですが、複数のアニメーション経路を設定できます。使用方法も似ており、次のようになります

#1. 原始のUIまたは画面を作成します

#2. CAKeyframeAnimationインスタンスを作成し、keypartを設定します/duration/valuesは、基本的なアニメーションでは始点と終点のみを設定できますが、キーフレームアニメーションでは複数のアニメーション経路ポイントを追加できます

#3. アニメーションが最終的に停止する位置を設定します

#4. 設定したアニメーションをlayer層に追加します

例えば、赤い円が左右に揺れながら落ちていく、上のコード:

//設定元画面
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //キーフレームアニメーションを作成
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //アニメーション属性を設定
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  //アニメーション終了位置を設定
  showView.center = CGPointMake(200, 200);
  //layer層にアニメーションを追加
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

最後に、緩衝関数とキーフレームアニメーションを組み合わせて、より複雑な物理的なアニメーションを実現します

まず、緩衝関数とは何か説明します。これは、物理的なアニメーション（例えば、スプリング効果）に必要な経路を計算するライブラリを作成した高人がいます

Githubのアドレス: https://github.com/YouXianMing/EasingAnimation

具体的なアニメーション効果はライブラリ内のエイジング関数参照表を確認してください。簡単に例を挙げると、ボールが落ちる効果があります

上のコード:

//設定元画面
  UIView *showView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  //キーフレームアニメーションを作成
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  //アニメーション属性を設定
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
　　　　//重要なポイント、ここでは使用しているエイジング関数でポイントパスを計算
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  //アニメーション終了位置を設定
  showView.center = CGPointMake(50, 300);
  //layer層にアニメーションを追加
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

読んでいただきありがとうございます。皆様のサポートに感謝します！

基本教程