ShepherdScroll 0.1.5

ShepherdScroll 0.1.5

Victor Panitz 维护。



  • 作者:
  • Victor Panitz Magalhães

![alt text](https://i.imgur.com/OCKpL18.jpg)

让我为您完成任务

Shepherd Scroll 实现了一个自定义的ScrollView,它方便在滚动处理子 ViewController 的动画。

安装

  1. 添加到 Podfile
pod 'ShepherdScroll' ~> '0.1.5'

2. 运行 pod install

引导绵羊

安装完 pod 后,将 Shepherd Scroll 导入到您要嵌套滚动的 UIViewController(确保在之前已构建应用)。

import ShepherdScroll
我们很快会回到这个控制器,但现在让我们创建绵羊的! meeeh
context.saveGState()

Ready to rock?

首先你需要一个实现了Animatable协议的UIViewController数组。Wtsheep是什么?

放松心情,朋友。

创建一个标准的UIViewController,导入ShepherdScroll,并将Animatable协议继承到UIViewController。

import UIKit
import ShepherdScroll

class SheepAViewController: UIViewController, Animatable { ... }

使用Animatable,你可以控制自己的动画!没错!Shepherd Scroll不知道视图控制器的内容是什么,这给了你自由去创建动画、视差效果以及更多。

为了做到这一点,调用animate()方法,你将在这里收到一个介于0到1之间的值。把这个值看做一个从0%到100%的动画时间线。通过这个值,你可以在滚动过程中获得很好的效果(无论你向哪个方向滚动)。

发挥你的想象力去做你想做的任何事情,比如移动图片、视图、动画图形、改变透明度等。

override func animate(step: CGFloat) {
    label.alpha = 0.3 + step
    label.transform = CGAffineTransform(scaleX: 1 + step, y: 1 + step)
            .concatenating(CGAffineTransform(translationX: 0, y: 200 * step))
}

这里是完整示例

import UIKit
import ShepherdScroll

class SheepAViewController: UIViewController, Animatable {

    let label: UILabel = {
        let label = UILabel()
        label.font = UIFont(name: "Avenir", size: 20)
        label.textColor = .white
        label.textAlignment = .center
        label.alpha = 0.3
        label.text = "DRAG UP"
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .blue
        setupLayout()
    }

    func animate(step: CGFloat) {
        label.alpha = 0.3 + step
        label.transform = CGAffineTransform(scaleX: 1 + step, y: 1 + step)
            .concatenating(CGAffineTransform(translationX: 0, y: 200 * step))
    }
    
    private func setupLayout() {
        view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
            label.heightAnchor.constraint(equalToConstant: 50),
            label.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            label.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])
    }
}

大结局!

context.restoreGState()

您已经将绵羊设置成任何基础UIViewController,但就在这里发生魔法!在主UIViewController中,您将ShepherdScrollView作为任何UIScrollView添加,并设置了些酷炫参数。

private func setupShepherdScroll() {
    scrollView = ShepherdScrollView(
        controller: self,
        viewControllers: [SheepAViewController(), SheepBViewController(), SheepCViewController()],
        size: view.frame.size,
        viewToAnimate: .next,
        orientation: .vertical,
        offset: 0.0)

    view.addSubview(scrollView)
    scrollView.translatesAutoresizingMaskIntoConstraints = false
}

之后,只需设置这个组件的约束即可。

private func setupConstraints() {        
    NSLayoutConstraint.activate([
        scrollView.topAnchor.constraint(equalTo: view.topAnchor),
        scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
        scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor)
    ])
}

查看更多详情请参考演示。 @

垂直模式(您甚至可以定义一个偏移值)

Alt Text

水平模式

Alt Text