0

現在、私は画像を持っています...バッテリーアイコン...

_MeterBar = [[UIImageView alloc] initWithFrame:CGRectMake(25, 40, 50, 40)];
_MeterBar.image = [UIImage imageNamed:@"battery-empty-icon.png"];
_MeterBar.backgroundColor = [UIColor clearColor];

Web サーバーから値が取得されたときに、バッテリーの特定のポイントにバッテリーがロードされていることを示すアニメーションを追加しようとしています。

値の取得は問題ありませんが、アニメーションの追加は問題です。基本的に、ユーザーが以前に回答したコードをコピーして貼り付けましたが、行き詰まっています:/。アニメーションを追加すると、画像がありません.....

CABasicAnimation *scaleToValue = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
scaleToValue.toValue = [NSNumber numberWithFloat:100.0f];
scaleToValue.fromValue = [NSNumber numberWithFloat:0];
scaleToValue.duration = 1.0f;
scaleToValue.delegate = self;
_MeterBar.layer.anchorPoint = CGPointMake(0.5, 1);
[_MeterBar.layer addAnimation:scaleToValue forKey:@"scaleRight"];
CGAffineTransform scaleTo = CGAffineTransformMakeScale(1.0f, 50.0f);
_MeterBar.transform = scaleTo;

[_PowerNowView addSubview:_MeterBar];

バッテリー アイコンは高さよりも幅が広いので、x 軸の 0 -> パーセンテージからアニメーション化しています。

誰かがこの正確なアニメーションを行うヒント、ヒント、またはサンプル例を持っている場合、私はあなたの助けを大いに感謝します:)

ありがとうございました。

PS Heres は、私が見つけたバッテリーアイコンの URL です: Battery Icon

わかりづらくて申し訳ありませんが、バッテリーアイコンとは別のカラーレイヤーが欲しいです...

バッテリー画像の上にバーを作成し、バッテリーのサイズに関してバーを動的にアニメーション化したいと思います....実際にはバッテリー画像自体のサイズを変更しません....

そのため、2 つのレイヤーがあり、1 つは主にサイズが静的なバッテリー用で、もう 1 つは色付きの BAR であり、おそらく緑色は、満たされた BATTERY 画像の量を表します。

私がやりたいことの良い参考文献は、銀行取引明細書を記録することを目的とする MINT アプリケーションの機能です。

最終的なアニメーション

上記のアニメーション化された最終的なバッテリーは非常に素晴らしいものですが、バッテリー内にバーを表示し、取得されたデータ値に関してアニメーション化したいと思います。

4

1 に答える 1

1

いくつかのこと。

スケールを 100 にすると、レイヤーは通常の 100 倍になります。一辺が 300 ピクセルの場合、スケールを 100 にすると、一辺が 30,000 ピクセルとして表示されます。

値を 100 ではなく 1.0 にスケーリングする必要があります。

また、変換をスケーリングすると、以前のスケールに成長係数が乗算されるかどうかもわかりません。もしそうなら、0 の開始スケール値はそれが成長するのを防ぎます。0.0 の代わりに .0001 の from 値を試してください。

バッテリー イメージを左から右に大きくしたい場合、アンカー ポイントを (.5, 1) ではなく (0,.5) にしたくないですか?

また、アンカー ポイントを変更すると、変換の中心が変更されるだけでなく、画像の位置も移動します。補正するには位置を調整する必要があります。私はいつも頭をかきむしり、それについて真剣に考えなければなりません (そして、通常はとにかく間違ってしまいます) が、ビューの X 位置を幅の半分だけ右にシフトしたいと思うでしょう。

画像をスケーリングすると、画像が不自然に伸びることに注意してください。それは短く太って始まり、通常のサイズに伸びます.

CAShapeLayer をマスク レイヤーとしてビューにアタッチし、シェイプ レイヤーのパスを空の四角形 (幅 = 0、高さ = ビューの全高) からビューのフル サイズの四角形にアニメーション化する方がよい場合があります。これにより、ビューが「ワイプ」アニメーションでアニメーション化され、ストレッチせずに左から右に表示されます。

于 2013-06-18T20:40:00.867 に答える