在 PageViewController 上制作漂亮的过渡 [英] Making beautiful transitions at PageViewController

问题描述

我想在 PageViewController 中进行自定义过渡:当用户移动到下一张幻灯片(滚动)时，背景图像会慢慢溶解到另一个图像中.

I want to make custom transition with in PageViewController: while user moves to next slide (scroll) then background image slowly dissolves into another image.

这种效果有苹果天气(除了有背景视频).

Such effect have Apple Weather (except there is background video).

我所做的:

• 我已经制作了带有背景图片(我需要更改的图片)的 UIViewContoller.
• 我已经在那个 UIViewController 中放置了 ContainerView，那个 ContainerView 已经嵌入了 PageViewController.UIViewController -> ContainerView -> PageViewController

那时我被卡住了，我正在使用共享背景图像的 PageViewController(来自顶部 UIViewController)，但我不知道下一步该去哪里.

At that point I'm stuck, i have working PageViewController with shared background image (from top UIViewController), but I have no idea where to go next.

现在我可以用我的委托(主 ViewContoller)捕捉页面变化:

Now I can catch page changing with my delegate (main ViewContoller):

func pageChanged(currentPage: Int) {}

和默认委托方法(PageViewContoller)(我有两张幻灯片，不知道怎么做更好):

And default delegate method (PageViewContoller) (I have 2 slides, don't know how to do it better):

func pageViewController(pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [AnyObject], transitionCompleted completed: Bool) {
    let prevController = previousViewControllers as [ContentViewController]
    if completed {
        if prevController[0].index == 0 {
            delegate.pageChanged(1)
        } else {
            delegate.pageChanged(2)
        }
    }
}

但它是即时功能，我不能在这里根据用户缓慢滑动来制作缓慢动画:)

But it is instant function, I can't do here slowly animation in dependency of user slowly swipes :).

推荐答案

我完全同意 Vasily 的观点.您需要使用 UICollectionView 并使用 self.collectionView.pagingEnabled = YES;.然后你可以通过UIScrollViewDelegate完美控制scrollview contentOffset.

I totally agree with Vasily. You need to use a UICollectionView and use self.collectionView.pagingEnabled = YES;. Then you can control perfectly the scrollview contentOffset via UIScrollViewDelegate.

optional func scrollViewDidScroll(_ scrollView: UIScrollView)

代码:

func scrollViewDidScroll(scrollView: UIScrollView) {

    var currentX = scrollView.contentOffset.x
    var ratio = currentX / UIScreen.mainScreen().bounds.size.width
    var previousPageIndex = floor(ratio)
    var nextPageIndex = ceil(ratio)
    ratio = ratio - previousPageIndex

}

例如，如果 ratio 为 0.33，则页面 previousPageIndex 和页面 nextPageIndex 之间的转换为 33%.您可以使用此值在 UIImageViews:

For instance, if the ratio is 0.33, the transition is 33% between the page previousPageIndex and the page nextPageIndex. You can use this values for set your alpha values in your UIImageViews:

func scrollViewDidScroll(scrollView: UIScrollView) {

    var currentX = scrollView.contentOffset.x
    var ratio = currentX / UIScreen.mainScreen().bounds.size.width
    var previousPageIndex = floor(ratio)
    var nextPageIndex = ceil(ratio)
    ratio = ratio - previousPageIndex

    fromImageView.alpha = 1.0 - ratio;
    toImageView.alpha = ratio;

}

PageViewController 不允许您控制滚动本身.转换在这里是一个离散事件.滑动手势也是一个离散事件，您可以使用它添加平滑效果.平移手势可以帮助您，但代码会更复杂和脏.

The PageViewController doesn't allow you control scrolling itself. The transition is a discrete event here. The swipe gesture is a discrete event too and you can add a smooth effect with it. The pan gesture can help you but the code will be more complex and dirty.

这篇关于在 PageViewController 上制作漂亮的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！