如何製作像Glympse的介紹屏幕iphone應用程序

Question

當您第一次啓動Glympse iPhone應用程序時，Glympse會顯示一個介紹屏幕。 當您從上至下滾動屏幕時，它會動態地改變內容並且動畫非常流暢。 您也可以在設置菜單中重放此介紹。

我很想知道如何在iphone中構建這樣的屏幕位置感知動畫頁面。 我甚至想知道這個屏幕是用html5 + css3構建的嗎？就像this page。

Answer 1

看到這是多麼的流暢，它不是HTML5，而只是由UIScrollViewDelegate觸發的CABasicAnimation對象。

開始通過閱讀Introduction to Core Animation Programming Guide和Core Animation Cookbook

Answer 2

這裏是我是如何實現的介紹順序：

由於UIScrollViewDelegate沒有提供我滾動視圖內容的實際顯示的座標，我創建衍生一個新的類UIScrollView並覆蓋setContentOffset。我還定義了一個委託協議，該協議在調用setContentOffset時觸發，並將偵聽器的contentOffset值傳遞給setContentOffset方法。 （理想情況下，這應該是iOS的UIScrollViewDelegate代表的一部分）。

委託的實現者現在能夠在滾動發生時接收實際的內容偏移量。當視圖滾動並顯示不同的內容時，我會根據contentOffset的垂直座標觸發動畫。這些觸發器是在垂直點（Y值）的數組中定義的，每個垂直點都與兩個函數調用相關聯，這兩個函數調用將UI元素動畫和動畫視爲不可見。

當contentOffset Y值大於觸發點時，我將特定UI元素動畫到視圖中並將動畫設置爲「已觸發」。動畫通常是使用Block-Based Animation淡入或調整大小。當Y值小於觸發點並且動畫先前已被觸發時，我使用不同的動畫（例如淡出）將對象設置爲不可見，並且標記爲「未觸發」

這裏是關鍵計算以確定UI元素是否可見：

CGPoint point = [contentOffset CGPointValue]; 
    CGFloat visible = _scrollView.bounds.size.height + point.y; 

    if (_triggers[ndx].y < visible) 
    { 
     if (!_triggers[ndx].triggered) 
     { 
      _triggers[ndx].triggered = true; 
      // call trigger's function to animate item into view 
     } 
    } 
    else 
    { 
     if (_triggers[ndx].triggered) 
     { 
      _triggers[ndx].triggered = false; 
      // call trigger's function to animate item out of view 
     } 
    }