如何在WebView滚动到底部时实现Button View的动画效果？

你的问题在于当前代码在scrollViewDidScroll中实时修改约束和视图隐藏状态，这会导致滚动过程中频繁触发UI变更，切换非常生硬。想要实现滚动结束后的平滑动画，你可以按以下步骤修改：

1. 调整状态跟踪逻辑 #

首先添加一个变量来跟踪是否需要显示Button View，避免在滚动过程中直接操作UI：

private var shouldShowButtonView = false

2. 优化滚动过程的状态判断 #

在scrollViewDidScroll中只更新状态，不修改UI，还可以添加小偏移量避免触发过于敏感：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard isUrlLoaded else { return }
    // 增加10pt的偏移量，避免接近底部时频繁触发状态切换
    let isAtBottom = scrollView.contentOffset.y >= (scrollView.contentSize.height - scrollView.frame.size.height - 10)
    shouldShowButtonView = isAtBottom
}

3. 监听滚动结束事件 #

通过UIScrollViewDelegate的两个方法，在滚动完全停止后执行动画：

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    updateButtonViewAnimation()
}

func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    // 如果拖拽后不会减速，直接执行动画
    if !decelerate {
        updateButtonViewAnimation()
    }
}

4. 实现平滑动画逻辑 #

创建专门的方法处理动画，用alpha替代isHidden实现淡入淡出，同时配合约束更新的动画：

private func updateButtonViewAnimation() {
    UIView.animate(withDuration: 0.3) { // 动画时长可根据需求调整
        if self.shouldShowButtonView {
            // 更新WebView的底部约束到Button View顶部
            self.webView.snp.updateConstraints { make in
                make.bottom.equalTo(self.buttonView.snp.top)
            }
            self.buttonView.alpha = 1.0
        } else {
            // 恢复WebView的底部约束到容器底部
            self.webView.snp.updateConstraints { make in
                make.bottom.equalTo(self.scrollViewContainer.snp.bottom)
            }
            self.buttonView.alpha = 0.0
        }
        // 触发约束更新的动画
        self.view.layoutIfNeeded()
    }
}

5. 初始状态设置 #

在视图初始化时，设置Button View的初始alpha为0，确保一开始是隐藏状态：

// 在viewDidLoad或视图初始化代码中
buttonView.alpha = 0.0

关键说明 #

• 用scrollViewDidEndDecelerating和scrollViewDidEndDragging确保滚动完全停止后再执行动画，避免滚动过程中频繁切换UI。
• 使用alpha动画代替isHidden，实现平滑的淡入淡出过渡效果。
• 用snp.updateConstraints替代remakeConstraints，只修改需要变更的约束，提升性能。
• 添加偏移量判断底部状态，避免因微小滚动就触发状态切换，提升用户体验。

内容的提问来源于stack exchange，提问作者Aldo Sugiarto