Swift 横向滑动中间大图左右缩小

原创

mob64ca12dab0a2 2024-11-09 06:44:06 ©著作权

文章标签 横向滑动 swift 缩放 文章分类 Swift 移动开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dab0a2的原创作品，请联系作者获取转载授权，否则将追究法律责任

Swift 实现横向滑动中间大图左右缩小效果

在移动应用程序开发中，用户体验是我们首先考虑的因素之一。为了提升视觉效果，我们可以设计一个横向滑动的图像轮播图，当用户滑动图像时，处于中心的图像会放大，左右两侧的图像则会缩小。这种效果不仅增强了用户的参与感，还能使得应用界面更加生动。

本文将详细探讨如何在 Swift 中实现这一效果，包括代码示例，并用甘特图展示项目的开发过程。

功能需求分析

在本项目中，我们的目标是实现一个支持横向滑动的图片视图。具体需求如下：

用户可以横向滑动图片。
当图片居中时，图片会放大。
当图片移出中间位置时，图片会逐渐缩小。

甘特图

下面是我们项目的甘特图，它展示了各个功能的开发阶段。

gantt
    title 图片滑动效果开发计划
    dateFormat  YYYY-MM-DD
    section 需求分析
    需求分析             :done, a1, 2023-10-01, 3d
    section UI 设计
    界面设计             :done, a2, after a1, 5d
    section 功能实现
    图片滑动功能          :active, a3, after a2, 7d
    动画效果实现          :after a3, 4d
    section 测试
    功能测试             :after a3, 3d

技术实现

1. 创建基本的 UI 界面

首先，我们需要一个 UICollectionView 来展示图片。UICollectionView 允许我们以灵活的方式组织和显示一组数据。

import UIKit

class ImageCarouselViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource {

    var collectionView: UICollectionView!
    let images: [String] = ["image1", "image2", "image3", "image4", "image5"]

    override func viewDidLoad() {
        super.viewDidLoad()
        setupCollectionView()
    }

    func setupCollectionView() {
        let layout = UICollectionViewFlowLayout()
        layout.scrollDirection = .horizontal
        layout.minimumLineSpacing = 0
        layout.itemSize = CGSize(width: view.frame.width, height: view.frame.height)

        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: layout)
        collectionView.register(ImageCell.self, forCellWithReuseIdentifier: "ImageCell")
        collectionView.delegate = self
        collectionView.dataSource = self
        collectionView.isPagingEnabled = true

        view.addSubview(collectionView)
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return images.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ImageCell", for: indexPath) as! ImageCell
        cell.imageView.image = UIImage(named: images[indexPath.item])
        return cell
    }
}

2. 实现图像缩放效果

接下来，我们需要监听集合视图的滚动（scrollViewDidScroll 方法），并根据当前可见的图像位置调整它的缩放比例。

extension ImageCarouselViewController: UIScrollViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetX = scrollView.contentOffset.x
        let width = scrollView.frame.size.width
        
        for cell in collectionView.visibleCells {
            let indexPath = collectionView.indexPath(for: cell)!
            let centerX = CGFloat(indexPath.item) * width

            // 计算距离中心的位移
            let distanceFromCenter = abs(offsetX + (width / 2) - (centerX + (width / 2)))
            let scale = max(0.8, 1 - distanceFromCenter / width)

            // 应用缩放效果
            cell.transform = CGAffineTransform(scaleX: scale, y: scale)
        }
    }
}

3. 自定义 `UICollectionViewCell`

我们需要自定义一个 UICollectionViewCell，以便于在其中显示图片。

class ImageCell: UICollectionViewCell {
    var imageView: UIImageView!

    override init(frame: CGRect) {
        super.init(frame: frame)
        imageView = UIImageView(frame: contentView.bounds)
        imageView.contentMode = .scaleAspectFill
        imageView.clipsToBounds = true
        contentView.addSubview(imageView)
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}