如何让 UICollectionView 反弹来说明可滚动性?

Posted

技术标签:

【中文标题】如何让 UICollectionView 反弹来说明可滚动性?【英文标题】:How to make UICollectionView bounce to illustrate scrollability? 【发布时间】:2015-10-14 13:07:13 【问题描述】:

我见过许多应用程序,当您第一次启动它们时,它们会移动或弹跳某些东西,以证明您可以滚动乍一看可能不太清楚的东西。

我有一个显示单个单元格的 UICollectionView,我想在用户第一次使用应用程序时直观地向他们展示相关区域是可滚动的。我看过 UIKit Dynamics,但一切都集中在控件的正常使用过程中如何动画。我想强制集合视图表现得好像有人滚动了一点然后释放它(有一些额外的反弹来强调)。有什么指点吗?

【问题讨论】:

将偏移量更改为一个值并通过动画恢复正常 Petar - 谢谢,我按照您的建议做了(动画内容偏移到 50,0,然后将其动画化回 0,0)。奇怪的是,当它移动到第一个状态时,你可以看到下一个单元格,但是当我动画回到 0,0 时,下一个单元格消失了。知道为什么吗? hmm - 你能用看起来像你的单元格的虚拟视图破解它吗? 【参考方案1】:

所以我尝试了多个动画功能,但您基本上需要的是两个动画,一个用于向上,一个用于向下。我想出了这段代码,它使用了关键帧动画。

[UIView animateKeyframesWithDuration:1.0 delay:0.6 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^

    // scroll up in 40% of the duration
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.4 animations:^
        NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:1 inSection:0];
        [self.tableView scrollToRowAtIndexPath:scrollIndexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
    ];

    // scroll down starting at 40% of the duration until the end of the duration
    [UIView addKeyframeWithRelativeStartTime:0.4 relativeDuration:0.6 animations:^
        NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow:0 inSection:0];
        [self.tableView scrollToRowAtIndexPath:scrollIndexPath atScrollPosition:UITableViewScrollPositionTop animated:NO];
    ];

 completion:^(BOOL finished) 
    NSLog(@"Animation complete!");
];

您可以调整不同时间的动画以产生更符合您喜好的结果,但请注意,在函数 addKeyframeWithRelativeStartTime: relativeDuration: animations: 中,开始时间和持续时间是相对的,因此整个持续时间的 0.0 到 1.0 之间的值是在animateKeyframesWithDuration: delay: options: animations: 中指定。

通常你会在加载 tableView 中的数据时调用它。此外,您还需要添加检查是否是第一次 (stored in the NSUserDefaults)。

--

编辑: 如果您只想滚动一点,由点数指定,而不是整个项目行,您也可以使用:

[self.tableView setContentOffset:CGPointMake(0.0, 10.0)];

[self.tableView setContentOffset:CGPointMake(0.0, 0.0)];

恭敬地。

这也适用于集合视图,您还可以水平或对角滚动(取决于您如何设置坐标)。

【讨论】:

感谢您的回复 Maco03。我使用的是集合视图,而不是表格视图。我修改了集合视图的示例,但我真的想只显示下一个单元格的一小部分,而不是整个单元格。不幸的是,与 Petar 评论中的问题类似,当此动画发生时,我看不到下一个单元格。【参考方案2】:

是的,我在我的代码中遇到了同样的问题,我想做的是一个上下跳跃的动画,使用关键帧动画,animateKeyframesWithDuration,但是底部的新单元格看起来有点奇怪当第一部分动画发生时,(从(0, 0)开始,尺寸变大,从左上角飞入),看起来像是系统默认的collectionViewCell动画。我没有找到如何禁止单元格默认动画。

【讨论】:

使用[UIView animatedWithAnimation]没有这个问题,但也有“副作用”,第一部和第二部动画之间有一点停顿

以上是关于如何让 UICollectionView 反弹来说明可滚动性?的主要内容,如果未能解决你的问题,请参考以下文章

UICollectionView 最初滚动跳跃

ios中的UICollectionView单元格滚动问题

UICollectionView 垂直滚动最后一项

如何让linux反弹一个加密的shell

如何让海龟在 netlogo 中从世界边界反弹

在 Swift 中高亮时使 CollectionViewCell 反弹