iOSを実現した点賛アニメーション効果

本論文の例では、iOSのアニメ効果を評価するための具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
アニメーションの基本使用
アニメーションの実現は、基本的にはViewコントロールとViewのlayer属性に基づいて動作し、ビューの移動、サイズの変換、透明度の変換、回転など一連の操作を行う。
キーフレームアニメーション:
アニメーションの実現は二つの部分に分けられます。一つはアニメの変化内容を規定しています。例えばviewはscaleを0から1に変化させる必要があります。この数字は相対値で、つまりサイズが0から正常サイズに変化します。もう一つの部分はアニメーションのグラデーション時間を規定しています。これにより、viewが所定時間で指定された変化を遂げました。この変化の過程はパラメータ設定によって不均一に変化することもできます。上記の例はキーフレームアニメーションの実現であり、実現の方式はアニメーションをいくつかの部分に分けて、「第一フレーム」を一つのことにし、「第二フレーム」をもう一つのことにして、変化を連続的に制御することができる。Durationパラメータは、時間を決定し、delayは、どれぐらいの時間遅延が実行されるかを決定し、optionsは、キーフレームアニメーションレイアウトサブコントロールを決定する。complectionのパラメータは、コンテンツの実行が終了した後に起動されるblockである。ここで3フレームを作って、前の2フレームはサイズを3倍にして回復し、後のフレームはそれを隠します。終了後はブロックを呼び出して除去します。

[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{
   /*  1:       
      2:         
      3:            */
   [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{
    giveLikeView.transform = CGAffineTransformMakeScale(3, 3);;
   }];
   [UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{
    giveLikeView.transform = CGAffineTransformIdentity;
   }];
   [UIView addKeyframeWithRelativeStartTime:self.animationDurtion relativeDuration:self.animationDurtion * 3 animations:^{
    giveLikeView.alpha = 0;
   }];
  } completion:^(BOOL finished) {
   giveLikeView.hidden = YES;
   [giveLikeView removeFromSuperview];
  }];

CAShape LayerとUICBezerPath：
viewの変化に満足していない場合、viewの表面に図案を描く必要があります。layerを操作します。layerはviewの表面と理解できます。各viewにはlayerパラメータがあります。UbezerPathはベジェ曲線で、図形描画のパスを設定するために使用されます。これがないと、layerの描画も無効です。境界がないからです。
下記のコードは円形の曲線を描き、その中心、半径、開始終了角などの属性を設定します。

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2) radius:giveLikeView.bounds.size.width startAngle:-1.57 endAngle:-1.57+3.14*2 clockwise:YES];
 circleLayer.path = bezierPath.CGPath;
 [self.layer addSublayer:circleLayer];

最後に見られます。circellLayer.path=bezerPath.cGPath;[self.layer addSublayer：circllayer；
その役割はLayerの経路を設定して、Layerをviewの表面に追加することです。次にlayerの配置を見てみます。
layerを作成してから、そのframeと色と境界、線幅などの属性を設定します。

CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];
circleLayer.frame = giveLikeView.frame;
circleLayer.fillColor = [UIColor clearColor].CGColor;
circleLayer.strokeColor = [UIColor redColor].CGColor;
circleLayer.lineWidth = 1;

いくつかの連絡先：ベッセル曲線とlayerを結び付けて、Layerとviewのlayerを連絡します。
layerのためにアニメーションを追加します。
まずアニメーショングループCAAnimation Groupを作成して、いくつかのアニメを収容して、いくつかのCABaic Animation基礎アニメーションを作成します。それぞれ属性を設定し、アニメーショングループに関わる属性には時間機能があり、kcaMedia TimingFunction EaseInは徐々に加速しているという。また設定持続時間があり、kcaFillModeForwardsはアニメーションが終了後も維持されるという。removed OnComplection=NOは最後まで移動しないという。基本アニメーションの設定では、アニメーショングループの開始時間と持続時間、パラメータの変化が一般的に設定されています。最後のgroup.animation=@[scaleAnimation、widthStartAnimation、widthEndAnimation]circle Layer addAnimation:group forKey:nil;
二つの句はアニメーショングループにアニメーションを追加して、layerにアニメーショングループを追加するという意味で、layerにアニメーション効果があります。

//  
CAAnimationGroup *group = [CAAnimationGroup animation];
 group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
 NSTimeInterval groupInterval = self.animationDurtion * 0.8;
 group.duration = groupInterval;
 group.fillMode = kCAFillModeForwards;
 group.removedOnCompletion = NO;
 
CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 scaleAnimtion.beginTime = 0;
 scaleAnimtion.duration = groupInterval * 0.8;
 scaleAnimtion.fromValue = @(0);
 scaleAnimtion.toValue = @(1);
 
CABasicAnimation * widthStartAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
 widthStartAnimtion.beginTime = 0;
 widthStartAnimtion.duration = groupInterval * 0.8;
 widthStartAnimtion.fromValue = @(1);
 widthStartAnimtion.toValue = @(2);
 
CABasicAnimation * widthEndAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"];
 widthEndAnimtion.beginTime = groupInterval * 0.8;
 widthEndAnimtion.duration = groupInterval * 0.2;
 widthEndAnimtion.fromValue = @(2);
 widthEndAnimtion.toValue = @(0);
 
 group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion];
 [circleLayer addAnimation:group forKey:nil];

アニメの実現原理を讃える。
デモの実現原理を紹介します。
controllerのサイズはフルスクリーンに設定し、その上にフルスクリーンのviewをカバーし、viewにクリックイベントを追加します。

- (void)addGesture
{
 UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(creatOneHeart:)];
 [self addGestureRecognizer:tap]; 
}

クリックして呼び出す方法を見てみます。
ここをクリックするたびにクリックした位置を取得して愛を初期化します。これは非同期のタスクです。ホームチームの列に置いて実行します。

- (void)creatOneHeart:(UITapGestureRecognizer *)sender
{
 CGPoint point = [sender locationInView:self];
 dispatch_async(dispatch_get_main_queue(),^{
  [self initOneNewHeart:point];
 });
}

このコードはビューオブジェクトを作成しました。ここでは自然に事先に作成されたハート型の画像を使います。ここで作成したimagviewをキューに保存し、viewに表示し、最後にlikeアクションを呼び出します。方法はアニメーションを実行します。

- (UIImageView *)createGiveLikeView
{
 UIImageView *giveLikeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
 giveLikeView.backgroundColor = [UIColor clearColor];
 UIImage *image = [UIImage imageNamed:@"icon_home_like_after"];
 giveLikeView.userInteractionEnabled = YES;
 giveLikeView.tag = GiveType;
 giveLikeView.image = image;
 giveLikeView.hidden = NO;
 _giveLikeView = giveLikeView;
 return _giveLikeView;
}
- (void)initOneNewHeart:(CGPoint)point
{
 UIImageView *giveLikeView = [self createGiveLikeView];
 giveLikeView.center = point;
 [self.array addObject:giveLikeView];
 [self addSubview:giveLikeView];
 [self likeAction:giveLikeView];
}

giveLikeActionを見てみましょう。この方法はハートの形の変化動画を実行することと、6つの放射線を描く三角形のアニメーション、さらにスポークな円のアニメーションがあります。

- (void)likeAction:(UIImageView *)giveLikeView
{
 [self giveLikeAction:giveLikeView];
}
- (void)giveLikeAction:(UIImageView *)giveLikeView
{
 [self animtionChangeLikeType:giveLikeView];
 [self createTrigonsAnimtion:giveLikeView];
 [self createCircleAnimation:giveLikeView];
}

次に、輻散の三角形のアニメーションを直接見ます。
このコードは6サイクル走って、6つの三角形を作りました。それらはそれぞれアニメーション効果があります。
sharpe.transform=CATrans form 3 D MakeRotation（3.14/3*i、0、0、1）回転を実現しました。
[giveLikeView.layer addSublayer:shape]layerの追加を実行します。
循環の中で、それぞれのlayerは独立したアニメーションがあるため、アニメーショングループの実現の効果は三角形が小さい時から大きくなって、最後に1本の直線になってそして消えてなくなります。
下の2行のコードは__u uを使いました。bridgeは、このタイプの転換を実現する役割を果たしています。ここでは、CGPathRefタイプの「ブリッジ」をidタイプに変換しています。それがないと、エラーが発生します。
pathAnimation.from Value=(ウウウbridge id）startPath.cGPath；
pathAnimation.toValue=(ウウウbridge id）endPath.cGPath；

- (void)createTrigonsAnimtion:(UIImageView *)giveLikeView
{
 for(int i=0;i<6;i++) {
  //    layer         
  CAShapeLayer *shape = [[CAShapeLayer alloc] init];
  shape.position = CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2);
  shape.fillColor = [UIColor redColor].CGColor;
  //       ，    
  UIBezierPath *startPath = [[UIBezierPath alloc] init];
  [startPath moveToPoint:CGPointMake(-2, 30)];
  [startPath addLineToPoint:CGPointMake(2, 30)];
  [startPath addLineToPoint:CGPointMake(0, 0)];
  [startPath addLineToPoint:CGPointMake(-2, 30)];
  shape.path = startPath.CGPath;
  
  //  
  shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);
  [giveLikeView.layer addSublayer:shape];
  
  //   
  CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
  groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
  groupAnimation.duration = self.animationDurtion;
  groupAnimation.fillMode = kCAFillModeForwards;
  groupAnimation.removedOnCompletion = NO;
  
  //    1
  CABasicAnimation *scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
  //     20%
  scaleAnimtion.duration = self.animationDurtion * 0.2;
  scaleAnimtion.fromValue = @(0);
  scaleAnimtion.toValue = @(1);

  //            
  UIBezierPath *endPath = [UIBezierPath bezierPath];
  [endPath moveToPoint:CGPointMake(-2, 30)];
  [endPath addLineToPoint:CGPointMake(2, 30)];
  [endPath addLineToPoint:CGPointMake(0, 30)];

  //    2
  CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
  pathAnimation.beginTime = self.animationDurtion * 0.2;
  pathAnimation.duration = self.animationDurtion * 0.8;
  pathAnimation.fromValue = (__bridge id)startPath.CGPath;
  pathAnimation.toValue = (__bridge id)endPath.CGPath;

  groupAnimation.animations = @[scaleAnimtion,pathAnimation];
  [shape addAnimation:groupAnimation forKey:nil];
 }
}

デモによる動画効果

デモのGitHubリンク
最後にdemoリンクを添付します。MYFGiveLike Animation Demo。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。