如何制作一个类似于Glympse应用程序的介绍屏幕

Question

当你第一次启动Glympse iphone应用程序时，Glympse会显示一个介绍屏幕。当你从上到下滚动屏幕时，它会动态地改变内容，动画非常流畅。您也可以在设置菜单中重放此介绍。

我想知道如何在iphone中创建这样一个屏幕位置感知的动画页面。我甚至想知道这个屏幕是用html5+css3构建的吗？就像this page一样。

Answer 1

下面是我是如何实现介绍序列的：

因为UIScrollViewDelegate没有为我提供滚动视图内容的实际显示坐标，所以我创建了一个从UIScrollView派生的新类并覆盖了setContentOffset。我还定义了一个委托协议，该协议在调用setContentOffset时触发，并通知侦听器传递给setContentOffset方法的contentOffset值。(理想情况下，这应该是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
        }
    }

Answer 2

看起来很流畅，它不是HTML5，而是由UIScrollViewDelegate触发的CABasicAnimation对象。

从阅读Introduction to Core Animation Programming Guide和Core Animation Cookbook开始