web-dev-qa-db-ja.com

UIImageView内で画像をパンするにはどうすればよいですか？

UIImageViewよりも幅が広くて背の高い画像を表示しているUIImageViewがあります。アニメーションを使用して、ビュー内で画像をパンしたいと思います（パンが素晴らしく、滑らかになるように）。

UIImageViewのbounds.Originを調整するだけで、画像が移動するはずです（画像がビュー内にits）でペイントされるため Origin、そうですか？）しかし、それはうまくいかないようです。 bounds.Originは変わりますが、画像は同じ場所に描画されます。

ほとんど機能するのは、ビューのレイヤーのcontentsRectを変更することです。ただし、画像の表示可能領域が画像全体ではない場合でも、これは単位正方形として始まります。したがって、画像の遠いエッジが表示可能領域に引き込まれていることをどのように検出するかわかりません（エッジを無限に伸ばして表示するため、回避する必要があります。 ）。

現在、ビューのcontentsGravityは、Interface Builderを介してkCAGravityTopLeftに設定されています（違いがある場合）（画像が移動するのでしょうか）。しかし、他に良いオプションはないようです。

更新：明確にするために、ビューを同じ場所に維持しながら、イメージを移動したい内部ビュー。

cocoa-touchcore-animation
26
TALlama

ブラッド・ラーソンは、UIImageViewをUIScrollViewの中に入れるようにとの彼の提案で、私を正しい道に向けました。

最後に、UIImageViewをUIScrollViewの内側に置き、scrollViewのcontentSizeandを設定して、imageViewの境界をUIImageの画像と同じサイズ：

UIImage* image = imageView.image;
imageView.bounds = CGRectMake(0, 0, image.size.width, image.size.height);
scrollView.contentSize = image.size;

次に、scrollViewのcontentOffsetをアニメーション化して、素晴らしいパン効果を実現できます。

[UIView beginAnimations:@"pan" context:nil];
[UIView setAnimationDuration:animationDuration];
scrollView.contentOffset = newRect.Origin;
[UIView commitAnimations];

私の特定のケースでは、画像のランダムなスペースにパンしています。パンするための適切な四角形toと、ニースの一定速度を得るための適切な継続時間を見つけるために、以下を使用します。

UIImage* image = imageView.image;

float xNewOrigin = [TCBRandom randomIntLessThan:image.size.width - scrollView.bounds.size.width];
float yNewOrigin = [TCBRandom randomIntLessThan:image.size.height - scrollView.bounds.size.height];

CGRect oldRect = scrollView.bounds;
CGRect newRect = CGRectMake(
    xNewOrigin,
    yNewOrigin, 
    scrollView.bounds.size.width,
    scrollView.bounds.size.height);

float xDistance = fabs(xNewOrigin - oldRect.Origin.x);
float yDistance = fabs(yNewOrigin - oldRect.Origin.y);
float hDistance = sqrtf(powf(xDistance, 2) + powf(yDistance, 2));
float hDistanceInPixels = hDistance;

float animationDuration = hDistanceInPixels / speedInPixelsPerSecond;

私はspeedInPixelsPerSecond of 10.0fを使用していますが、他のアプリケーションでは別の値を使用したい場合があります。

39
TALlama

UIImageViewをUIScrollViewで囲むことを強くお勧めします。 UIImageViewに画像全体を表示させ、UIScrollViewのc​​ontentSizeをUIImageView'sのサイズと同じになるように設定します。画像へのwindowはUIScrollViewのサイズになります。scrollRectToVisible:animated:を使用すると、画像の特定の領域にアニメーションでパンできます。

スクロールバーを表示したくない場合は、showsHorizontalScrollIndicatorおよびshowsVerticalScrollIndicatorpropertiesをNOに設定できます。

UIScrollViewは、ピンチズーム機能も提供します。

47
Brad Larson