UIScrollview 弹跳和缩放固定顶部

Posted 2023-03-16

【中文标题】UIScrollview 弹跳和缩放固定顶部

【英文标题】：UIScrollview bounce and zoom with fixed top

【发布时间】：2017-10-13 09:18:19

【问题描述】：

试图在滚动视图向下弹跳时使 UIImageView 缩放。

这个想法是从这个运球中偷来的：https://dribbble.com/shots/3341878-Product-Page

如您所见，当滚动视图向下弹跳时，图像就像是缩放。

在我的应用程序中，我在 UIScrollview 中有 UIImageView，我无法理解如何在 UIScrolvview 弹跳时修复 UIImageView 的顶部。

这是我想做的：

【问题讨论】：

查看此网址：***.com/questions/33481928/…。如果它对您的方案有帮助，可能会。

【参考方案1】：

根据滚动视图的偏移量对 imageView 应用缩放变换：

extension ViewController: UIScrollViewDelegate 
    public func scrollViewDidScroll(_ scrollView: UIScrollView) 
        let offset = scrollView.contentOffset

        if offset.y < 0.0 
            var transform = CATransform3DTranslate(CATransform3DIdentity, 0, offset.y, 0)
            let scaleFactor = 1 + (-1 * offset.y / (imageViewHeightConstraint.constant / 2))
        transform = CATransform3DScale(transform, scaleFactor, scaleFactor, 1)
            imageView.layer.transform = transform
         else 
            imageView.layer.transform = CATransform3DIdentity
        
    

通过这种方式，您无需将其“固定”到顶部，imageView 会随着内容偏移量的减少而在弹跳时简单地放大。您所需要的只是您的 imageView 具有顶部约束（加上前导、尾随）和高度。

【参考方案2】：

我建议您使用以下库之一

MXParallaxHeader

StrechyParallaxScrollView

【讨论】：

使用库来做这么简单的事情似乎有点过分了。

【参考方案3】：

您可以通过将图像放在滚动视图上方并在您的 scrollviewdelegate 上的 didScroll 方法中设置其高度来“作弊”（读取内容偏移量并确定图像高度）。如果您将图像设置为宽高比填充，它将具有您想要的效果。

【讨论】：

@Simon 可以分享一下演示吗？