2

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

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

4

2 回答 2

3

以下是我实现介绍序列的方式:

由于 UIScrollViewDelegate 没有为我提供滚动视图内容的实际显示坐标,我创建了一个派生自 UIScrollView 的新类并覆盖了setContentOffset。我还定义了一个委托协议,它在调用 setContentOffset 时触发,并通知侦听器传递给 setContentOffset 方法的 contentOffset 值。 (理想情况下,这应该是 iOS 的 UIScrollViewDelegate 委托的一部分)

委托的实现者现在能够在滚动发生时接收实际的内容偏移量。当视图滚动显示不同的内容时,我会根据 contentOffset 的垂直坐标触发动画。这些触发器在垂直点(Y 值)数组中定义,每个垂直点与两个函数调用相关联,其中动画 UI 元素进出视图。

当 contentOffset Y 值大于触发点时,我将特定的 UI 元素动画化到视图中并将动画设置为“触发”。动画通常是使用基于块的动画淡入或调整大小。当 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
        }
    }
于 2012-11-14T23:21:33.697 回答
2

看看这有多流畅,它不是 HTML5,而是CABasicAnimationUIScrollViewDelegate.

从阅读Core Animation 编程指南简介Core Animation Cookbook开始

于 2012-11-14T09:21:32.413 回答