UIScrollview 弹跳和缩放固定顶部 [英] UIScrollview bounce and zoom with fixed top

问题描述

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

这个想法是从这个 dribbble 中窃取的:

解决方案

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

extension ViewController: UIScrollViewDelegate {public func scrollViewDidScroll(_ scrollView: UIScrollView) {让偏移量 = scrollView.contentOffset如果 offset.y <0.0 {var 变换 = CATransform3DTranslate(CATransform3DIdentity, 0, offset.y, 0)让 scaleFactor = 1 + (-1 * offset.y/(imageViewHeightConstraint.constant/2))变换 = CATransform3DScale(变换，比例因子，比例因子，1)imageView.layer.transform = 变换} 别的 {imageView.layer.transform = CATransform3DIdentity}}}

通过这种方式，您无需将其固定"到顶部，imageView 将随着弹跳时内容偏移量的减小而简单地放大.你只需要你的 imageView 有一个顶部约束(加上前导、尾随)和一个高度.

Trying to make UIImageView scale when the scrollview is bouncing down.

The idea was stolen from this dribbble: https://dribbble.com/shots/3341878-Product-Page

As you can see, image is like'a scaling when the scrollview is bouncing down.

In my app I have the UIImageView inside the UIScrollview, I can't understand how to fix the top of the UIImageView while the UIScrolvview is bouncing down.

Here is what I want to do:

解决方案

Apply a scale transform to your imageView based on your scrollview's offsets:

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
        }
    }
}

In this way you don't need to "fix" it to top, the imageView will simply scale up as the content offset decreases when bouncing. All you need is that your imageView has a top constraint (plus leading, trailing) and a height.

这篇关于UIScrollview 弹跳和缩放固定顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！