2011-07-27 43 views
5

我試圖滑下UIImageView中的圖像,但我不知道UIContentMode和動畫屬性的哪個組合是正確的。 圖像應始終具有相同的大小,不應該拉伸...我想要的是,沒有什麼是可見的,然後框架延伸並顯示圖像。UIView動畫滑下

也許是更容易,如果你明白我的意思:

Illustration of my Problem

所以,它聽起來相當簡單,但什麼UIContentMode我應該使用的UIImageView的,我應該什麼動畫財產?謝謝!

+0

如何在顯示而不是重複之後添加動畫?謝謝。 –

回答

8

我帶你領先並製作了截屏視頻。 Was this what you had in mind?

我將動畫無限期地重複進行,因此使用視頻進行捕捉會更容易,但可以在按下按鈕時啓動,也可以在顯示彈出窗口及其內容的位置凍結,直到反轉再次隱藏。

我用Core Animation代替了動畫UIView,因爲我想用CALayer的mask屬性來隱藏popover並用滑動動畫顯示它。

這裏是我使用的代碼(同視頻):

- (void)viewDidLoad 
{ 

    // Declaring the popover layer 
    CALayer *popover = [CALayer layer]; 

    CGFloat popoverHeight = 64.0f; 
    CGFloat popoverWidth = 200.0f; 

    popover.frame = CGRectMake(50.0f, 100.0f, popoverWidth, popoverHeight); 
    popover.contents = (id) [UIImage imageNamed:@"popover.png"].CGImage; 

    // Declaring the mask layer 
    CALayer *maskLayer = [CALayer layer]; 
    maskLayer.frame = CGRectMake(0, - popoverHeight, popoverWidth, popoverHeight); 
    maskLayer.backgroundColor = [UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1.0f].CGColor; 

    // Setting the animation (animates the mask layer) 
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"]; 
    animation.byValue = [NSNumber numberWithFloat:popoverHeight]; 
    animation.repeatCount = HUGE_VALF; 
    animation.duration = 2.0f; 

    [maskLayer addAnimation:animation forKey:@"position.y"]; 

    //Assigning the animated maskLayer to the mask property of your popover 
    popover.mask = maskLayer; 

    [self.view.layer addSublayer:popover]; 

    [super viewDidLoad]; 
} 

注:您必須導入QuartzCore框架到您的項目,並寫在你的頭文件這一行:#import <QuartzCore/QuartzCore.h>

告訴您這是否適用於您,或者您是否需要任何幫助進行設置。

+0

哇,非常感謝你的非常詳細的答案!我以前從未與CALayer搞混,但你提供的代碼正是我所需要的。我會玩這個。 – denbec

2

試試看看這個代碼。 將UIImageView視爲imageView。

imageView.contentMode = UIViewContentModeScaleAspectFill; 
CGRect imageRect = imageView.frame; 
CGRect origImgRect = imageRect; 
imageRect.size.height = 5; 
imageView.frame = imageRect; 

[UIView animateWithDuration:2.0 
    animations:^{imageView.rect = origImgRect;} 
    completion:^(BOOL finished){ }]; 
+0

嘿,我想你的意思是imageView.frame,不正確,對吧?然後可以看到發生了什麼[這裏](http://screencast.com/t/e98VLE3if)。但是,這只是將整個視圖向下移動,我只是想讓圖片留在原地,但向下移動可見區域... – denbec

+0

是的,它是框架。實際上,我正在做的是首先將imageview框架的高度設置爲5,以便僅查看箭頭。然後,我用動畫設置實際高度。我想你可以很容易地調試這裏的東西。 – Ilanchezhian

+0

你看過我上面評論中鏈接的視頻嗎?你會看到整個視圖移動,而不是摳圖長大,用你的代碼... – denbec