iOSは画像の上に画像を上にスライドさせ、下の画像を表示します。 （ラjQuery.slide（））

Question

私は、次のようなことをやろうとしている -

私は同じ画像、色1と黒と白の1の2つのバージョンがあります。私はB & Wを "スライドアップ"してその下にあるものを明らかにします。

高さとフレームを設定しようとしましたが、私が望むように動作させることができませんでした。例えば

、これは動いていないながら1は、他に明らかにされ、両方のUIImagesの組み合わせで、次のようになります。

任意のアイデア？ :)

Answer 1

OK、ここでは、グレー表示でマスクを使用する別の方法があります。私は実際に、blueViewとgreyViewを使ってこれをテストしました。ここでは、灰色が青色に覆い隠されています。灰色のレイヤーが表示されるように、灰色のレイヤーにマスクレイヤーを配置します。マスクを灰色のレイヤーから動かすと、灰色のレイヤーが動かずに消えるようになり、青色は灰色が消える場所を通ります。

これを試したい場合は、単一のビューでXCodeで空のプロジェクトを作成し、このコードをviewDidLoadの中に配置します。それが私がこれをテストした方法です。

self.view.backgroundColor = [UIColor whiteColor]; 

UIView* blueView = [[[UIView alloc] init] autorelease]; 
blueView.backgroundColor = [UIColor blueColor]; 
blueView.frame = CGRectMake(50,50,100,100); 

UIView* grayView = [[[UIView alloc] init] autorelease]; 
grayView.backgroundColor = [UIColor grayColor]; 
grayView.frame = CGRectMake(50,50,100,100); 

[self.view addSubview:blueView]; 
[self.view addSubview:grayView]; // gray covers the blue 

// Create a mask to allow the grey view to be visible and cover up the blue view 
CALayer* mask = [CALayer layer]; 
mask.contentsScale = grayView.layer.contentsScale; // handle retina scaling 
mask.frame   = grayView.layer.bounds; 
mask.backgroundColor = [UIColor blackColor].CGColor; 
grayView.layer.mask = mask; 

// Animate the position of the mask off the grey view, as the grey becomes unmasked, 
// that part of the grey "dissappears" and is no longer covering the blue underneath 
CABasicAnimation* a = [CABasicAnimation animationWithKeyPath:@"position"]; 
a.duration = 4; 
a.fromValue = [NSValue valueWithCGPoint:mask.position]; 
CGPoint newPosition = mask.position; 
newPosition.y += mask.bounds.size.height; 
a.toValue = [NSValue valueWithCGPoint:newPosition]; 
a.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; 
[mask addAnimation:a forKey:@"colorize"]; // animate presentation 

mask.position = newPosition;  // update actual position 

は#importsでトップでこの行を忘れないでください：

#import <QuartzCore/QuartzCore.h> 

Answer 2

1つの方法は、B & W画像でカラー画像が完全に覆われている（隠されている）カラー画像の上にB & W画像が表示されるようにUIViewを積み重ねることです。

[self.view insertSubview:bwImage aboveSubview:colorImage]; 

B & Wビューのみが表示されます。今B & WビューにclipsToBoundsを設定：その高さがB & Wの画像をクリッピングし、その背後にカラー画像を明らかに、0まで収縮するよう

bwImage.clipsToBounds = YES; 

最後bwImageの境界に高さをアニメーション化します。このような何か：

[UIView animateWithDuration:1.0 animations:^{ 
    CGRect b = bwImage.bounds; 
    b.size.height = 0; 
    bwImage.bounds = b; 
}]; 

私はこれを試していないが、うまくいけばあなたのアイデアを得ます。