4

HUD のようなパイ アニメーションを使用して、円形の進行状況メーターの塗りつぶしをアニメーション化する必要があります。Core Animation を使用して単色でパスをアニメーション化する方法の例を見つけました。違いは、塗りつぶしを単色ではなくイメージ マスク (リンクを参照) にする必要があることです。

デザイン画像をご覧になりたい方はこちら

Core Animationなどを使用してこれを行う方法について誰かが提案できますか?

4

3 に答える 3

5

マジックナンバーを使用した私の例（理解を深めるため）：

  CAShapeLayer *circle = [CAShapeLayer layer];
  circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath;
  circle.fillColor = [UIColor clearColor].CGColor;
  circle.strokeColor = [UIColor greenColor].CGColor;
  circle.lineWidth = 4;

  CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
  animation.duration = 10;
  animation.removedOnCompletion = NO;
  animation.fromValue = @(0);
  animation.toValue = @(1);
  animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
  [circle addAnimation:animation forKey:@"drawCircleAnimation"];

  [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
  [imageCircle.layer addSublayer:circle];

imageCircle - カスタムの「イメージ マスク」を使用した UIImageView。

于 2014-07-22T16:42:58.580 に答える
2

循環進行状況ビューの基本的なチュートリアルは次のとおりです。

http://iosdevtricks.blogspot.com/2013/06/custom-circular-progress-view-for-ios.html

いくつかの追加調整を行う必要があります。

  1. 木のような質感を背景にする
  2. 円の色を緑に変更
  3. 円の半径と円の線幅を調整する
  4. 木の質感に合うようにセンターサークル
于 2013-06-21T04:01:47.983 に答える
1

単色でそれを行う方法をすでに知っている場合はmask、画像 (緑色の円) として使用する新しいレイヤーを作成するだけです。マスキング レイヤーのアルファ チャネルを使用して何が表示されるかを決定するため、既に読んだ単色を使用した例をマスクに使用することができます。マスク レイヤーのプロパティをアニメーション化して変更することで、画像を多かれ少なかれ表示することができます。

だからあなたがする必要があるのは：

  • 背景と緑色の円の両方の画像を揃えます。
  • 読んだ例の 1 つに従って新しいレイヤーを作成します (さらに 2 つの例については、ここまたはここで私の回答を参照してください)。
  • 新しいレイヤーをmask青い imageViews レイヤーのとして設定します
  • マスク レイヤーの円の進行をアニメーション化します。
于 2012-06-28T05:16:08.327 に答える