ios - UIScollView の端に近づくコンテンツをフェードアウトする

Question

タイトルが示すように、UIScrollView の 4 つの端のいずれかに近づくにつれて、いくつかの UIImageView にフェードアウト効果を与えようとしています。ユーザーは UIImages をドラッグできるので、端に向かってドラッグすると、UIScrollView に境界線があるかのようにそのカットアウト効果を与える代わりに、フェードアウトを開始します。このチュートリアルを試しました：

http://www.cocoanetics.com/2011/08/adding-fading-gradients-to-uitableview/

別のスタックオーバーフローの質問で提案されていますが、UITableViews にのみ適用できます。境界線から 1 cm 離れると、画像がフェードし始めます。

score 19 · Accepted Answer

リンク先の Cocoanetics の投稿で行ったことと同様にCAGradientLayer、スクロールビューをカバーするを作成できます。スクロールビューの背景色 (私の例では白) を使用して、左、右、上、下の端にフェードアウトさせます。

   CGColorRef innerColor = [UIColor colorWithWhite:1.0 alpha:0.0].CGColor;
   CGColorRef outerColor = [UIColor colorWithWhite:1.0 alpha:1.0].CGColor;

   // first, define a horizontal gradient (left/right edges)
   CAGradientLayer* hMaskLayer = [CAGradientLayer layer];
   hMaskLayer.opacity = .7;
   hMaskLayer.colors = [NSArray arrayWithObjects:(id)outerColor,
                        (id)innerColor, (id)innerColor, (id)outerColor, nil];
   hMaskLayer.locations = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0],
                           [NSNumber numberWithFloat:0.15],
                           [NSNumber numberWithFloat:0.85],
                           [NSNumber numberWithFloat:1.0], nil];
   hMaskLayer.startPoint = CGPointMake(0, 0.5);
   hMaskLayer.endPoint = CGPointMake(1.0, 0.5);
   hMaskLayer.bounds = self.scrollView.bounds;
   hMaskLayer.anchorPoint = CGPointZero;

   CAGradientLayer* vMaskLayer = [CAGradientLayer layer];
   // without specifying startPoint and endPoint, we get a vertical gradient
   vMaskLayer.opacity = hMaskLayer.opacity;
   vMaskLayer.colors = hMaskLayer.colors;
   vMaskLayer.locations = hMaskLayer.locations;
   vMaskLayer.bounds = self.scrollView.bounds;
   vMaskLayer.anchorPoint = CGPointZero;

   // you must add the masks to the root view, not the scrollView, otherwise
   //  the masks will move as the user scrolls!
   [self.view.layer addSublayer: hMaskLayer];
   [self.view.layer addSublayer: vMaskLayer];

免責事項: これにより、四隅のグラデーション/フェードが 2 倍になります。結果を見て、自分にとって十分かどうかを判断できます。そうでない場合は、Photoshop などで透明な画像を描画し、描画UIImageViewした画像を使用してその上にサブビューをマスクとして追加することもできます。

ここに画像の説明を入力

ユーチューブの画面キャプチャ

score 4 · Accepted Answer

Nateの回答のSwiftバージョンですが、上と下のみ:

        let innerColor = UIColor(white: 1.0, alpha: 0.0).CGColor
        let outerColor = UIColor(white: 1.0, alpha: 1.0).CGColor;

        // define a vertical gradient (up/bottom edges)
        let colors = [outerColor, innerColor,innerColor,outerColor]
        let locations = [0.0, 0.15,0.85,1.0]

        var vMaskLayer : CAGradientLayer = CAGradientLayer()// layer];
        // without specifying startPoint and endPoint, we get a vertical gradient
        vMaskLayer.opacity = 0.7
        vMaskLayer.colors = colors;
        vMaskLayer.locations = locations;
        vMaskLayer.bounds = self.scrollView.bounds;
        vMaskLayer.anchorPoint = CGPointZero;

        // you must add the mask to the root view, not the scrollView, otherwise
        //  the masks will move as the user scrolls!
        self.view.layer.addSublayer(vMaskLayer)