適用於iPad的twitter的紙張摺疊/展開效果

Twitter for iPad實現了一種奇特的「捏擴展紙張摺疊」效果。這裏有一個短片。 http://www.youtube.com/watch?v=B0TuPsNJ-XY 適用於iPad的twitter的紙張摺疊/展開效果

這可以在沒有OpenGL的情況下使用CATransform3D完成嗎？一個可行的例子會很感激。

更新：我對此動畫效果的方法或實現感興趣。這就是爲什麼我在這個問題上提供賞金的原因 - srikar

來源

2011-03-22 Tim Wu

感謝您發佈視頻的真棒效果。不知道Twitter如何做到這一點。 :) – 2011-06-28 05:44:37

哇，賞金的作品！感謝您提供賞金，@Srikar。 – 2011-06-28 09:35:25

雅普賞金作品:)感謝精彩的社區... – 2011-06-29 07:32:33

下面是一個非常簡單的示例，它使用手勢識別器和CATransform3D來幫助您入門。簡單地捏住旋轉灰色視圖。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    // ... 

    CGRect rect = self.window.bounds; 
    view = [[UIView alloc] initWithFrame:CGRectMake(rect.size.width/4, rect.size.height/4, 
                 rect.size.width/2, rect.size.height/2)]; 
    view.backgroundColor = [UIColor lightGrayColor]; 
    [self.window addSubview:view]; 

    CATransform3D transform = CATransform3DIdentity; 
    transform.m34 = -1/500.0; // this allows perspective 
    self.window.layer.sublayerTransform = transform; 

    UIPinchGestureRecognizer *rec = [[UIPinchGestureRecognizer alloc] initWithTarget:self 
                       action:@selector(pinch:)]; 
    [self.window addGestureRecognizer:rec]; 
    [rec release]; 

    return YES; 
} 

- (void)pinch:(UIPinchGestureRecognizer *)rec 
{ 
    CATransform3D t = CATransform3DIdentity; 
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0); 
    t = CATransform3DRotate(t, rec.scale * M_PI, 1, 0, 0); 
    t = CATransform3DTranslate(t, 0, -self.view.bounds.size.height/2, 0); 
    self.view.layer.transform = t; 
}

來源

2011-06-28 06:17:49 jtbandes

我不明白這兩個CATransform3DTranslate方法調用的目的。 – haroldcampbell 2011-10-31 01:04:48

@haroldcampbell這些人的目標是圍繞圖層的邊緣而不是中心旋轉。 – jtbandes 2011-10-31 02:41:57

這應該通過設置圖層的anchorPoint屬性來完成。 – neilkimmett 2012-02-23 14:30:57

效果基本上只是一個圍繞X軸旋轉的視圖：當您從列表中拖出一條鳴叫時，會出現一個平行於X-Z平面的視圖。當用戶鬆開時，視圖圍繞X軸旋轉，直到它完全進入X-Y平面。所述documentation說：

的CATransform3D數據結構限定了均勻的三維變換（CGFloat的值的4乘4矩陣），其用於旋轉，縮放，偏移，傾斜和應用透視轉換爲圖層。

此外，我們知道CALayer的transform屬性是一個CATransform3D結構，它也是動畫的。 Ergo，我認爲可以肯定的是摺疊效果可以與Core Animation一起使用。

來源

2011-06-28 05:51:31 Caleb

本質上，這種效果是由幾個不同的步驟：

手勢識別時撐開發生檢測。
當手勢開始時，Twitter很可能會爲頂部和底部創建一個graphics context，從本質上創建圖層。*
將圖像作爲子視圖附加在頂部和底部。
隨着手指彎曲進出，請使用CATransform3D至add perspective來圖像。
一旦視圖「完全展開」，就可以使真實子視圖可見並刪除圖形上下文創建的圖像。

要摺疊視圖，請執行上述操作。

*因爲這些視圖比較簡單，所以它們可能不需要渲染到圖形上下文中。

來源

2011-06-28 05:53:09

適用於iPad的twitter的紙張摺疊/展開效果

回答

相關問題