2012-01-27 5 views
4

興味深い問題があります。うまくいけば面白い解決策があります:)UIViewの一部が歪んでいる

私は、iPad画面の幅を占めるU​​IScrollViewビューを持っています。スクロールビューの内容は、明らかに広いです。

ここでは、スクロールビューの可視部分(つまり画面領域)に変形を適用して、両端を静かにカーブしていきたいと考えています。

このように、二つの問題があります。

1)は可能な限りこのような変換ですか?基本的には、左右を少し上に移動し、必要に応じてビューの上端と下端を湾曲させて、中点が動かないようにします。

2)私はスクロールビューの内容に適用したくありません。なぜなら、スクロールビューからスクロールすると効果が失われるからです。代わりに、結果を親コンテナに適用したいと思います。これは効果がありますか?ここで

はグラフィックです:

enter image description here

ティム

+0

確かに誰かが助けることができますか? – tarmes

+1

あなたは何を探しているのかを示すために何らかのグラフィックを提供できますか?私があなたが述べた2つの「問題」や目標を理解しているかどうかはわかりません。 fスクロールビューは画面の幅より広い)。しかし、グラフィックも大いに役立ちます。 – Jim

+1

こんにちは。おそらくこれが役立ちます:スクロールビューに長い水平の衣服ラインが含まれているとします。私は、スクロールビューのフレームで定義されているように、可視ウィンドウの端に上向きにカーブしたい。スクロールすると、可視領域に同じ曲率が適用されます。 – tarmes

答えて

1

ちょうど野生の推測が、どのようにあなたのスクロールビューの上に通常の画像を使用してはどうですか?下に表示されているビューがそのまま残されている間は、画像に「歪み」エフェクトが表示されることがあります。

+1

こんにちは。問題は、スクロールビューの内容に適用される歪みがスクロールされているのを見たいということです。さらに大きな問題は、私が記述したタイプの歪みをどのように設定するのか分かりません。 – tarmes

+0

、またはスクロールビューの背後に画像を置く方が良い。 – ader

+0

移動するときにスクロールして歪ませる画像が必要です.... – tarmes

1

デスクトップOSでは、これはのCIFilterを使用すると可能です。ただし、CALayer documentation

CALayerクラスはこのプロパティを公開していますが、Core ImageはiOSでは使用できません。現在、このプロパティで使用可能なフィルタは未定義です。

あなたの最善の策は、OpenGLフラグメントシェーダーを使ってこれを実装することです。トリッキーな部分は、リアルタイムで変換したい領域のビューの内容にアクセスすることです。

私はまだiOSのライブ(スクロール)コンテンツで動作しているものは見ていません。 Mail.appのゴミ箱のような類似のアニメーションは、アニメーション、ページのカールなどが静的なコンテンツを操作することができます(画像を1回だけレンダリングした後、その画像を変換します)。

は、現在、私がこれを可能に見る唯一の方法は次のとおりです。

  • はの上にOpenGLの出力をレンダリングあなたのOpenGLのシェーダ
  • を使用して変換一定の間隔で画像にビュー領域をレンダリング実際のコンテンツ

ビューをポーリングしてイメージにレンダリングし、それをメイン画面の一部のみをカバーするOpenGLビューとしてレンダリングする必要があるため、パフォーマンスが最適以下になると思います。

+0

それが簡略化されたソリューションを提供するならば、スクロールビューの全内容をあらかじめレンダリングするのはうれしいです。しかし、私はOpenGLについて何も知らない。私が記述している歪みの種類を実行するコードを提供することができますか? – tarmes

+1

事前レンダリングされたコンテンツを使用すると実際に役立ちます。 OpenGLアニメーションとスクロールを同期させる必要がありますが、UIScrollViewのscrollViewDidScrollデリゲートメソッドを使用すると簡単になります。実際の変換に関しては、ページカールを模倣しようとする既存のOpenGL/shaderプロジェクトを見てください。 1つのオープンソースの例は、PaperStrack:http://api.mutado.com/mobile/paperstack/です。このページはメッシュ変形とOpenGL ESページにもリンクしています。 –

+0

実際、iOS5の時点では、Core Imageが利用可能です。 – colincameron

0

ソリューション:

(1)

以下不透明かつScrollViewに丸いコーナー効果を作成するとscrollviewの上のCALayerを描きます。

短所:CALayersのレンダリングはあまりにも遅いです(特に古いデバイスでは)、ゲームなどではあまり使用しないでください。UIImagesまたはcocos2dスプライトに切り替えることができます。 OpenGLを使った独自のレイヤークラスですが、それはかなりシンプルではありません。それらのオプションの1つがあなたのために働くことを望みます。

(2)

は、あなたのスクロールビューの背後にあるコンテンツ(丸められたコーナーの下に表示されているもの)、ソリッド色またはそれ以外の場合は静的ですか?そうであれば、スクロールビューのコーナーの上に、その中央に半透明の「コーナー」グラフィックスを重ねて表示し、エッジで不透明(背景色など)を重ねることで、より良いパフォーマンスを得ることができます。コンテンツ上に4つの11x11イメージを合成するコストは、それをクリップするイメージよりも劇的に少なくなります。

短所:

:)知られていない(3)

scrollView.layer.cornerRadius = 11; 
scrollView.layer.masksToBounds = YES; 

これはiPhone 4 短所ために完全に正常に動作します:iPhone 3GS、3GとiPodで完璧に動作しません。

+0

こんにちは - 丸みを帯びたコーナーエフェクトをまったく探していません:( – tarmes

0

面白いアイデア!理論的には、行列を使ってビューを「ワープ」することはできません(行列を使って行間の変換のみを行うことが可能です)。

回避策として、上下の画面領域を薄いビューで分割できます。これらのビューのスケール:8x(たとえば)最も近い画面の境界線1、次に4x、2x ...次に、長いスクロールビューをいくつかのオフスクリーンコンテナにレンダリングし、このコンテナの一部を薄いビューにマップします。 UIKit APIを使ってそれを行う方法を知っていますが、OpenGLベースのグラフィックのための解決策です。

関連する問題