如何制作像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 
     } 
    }