Страница глубины Преобразование по UIView, Swift

как создать страницу глубины. Трансформировать анимацию (сверху вниз, снизу вверх), например https://youtu.be/c2ccXwwmcnA. Я искал в Google, но я не понимаю, как реализовать в iOS.

Пример вывода Пример:

эффект глубины

Ответы

Ответ 1

Я следил за учебником Анимированные переходы в Swift, и я получил этот эффект:

эффект глубины

Если вы не хотите читать весь учебник, вот в основном то, что вам нужно сделать:

1. Создайте класс TrasitionManager

//
//  TransitionManager.swift
//  Aleph Retamal
//
//  Created by Aleph Retamal on 4/19/15.
//  Copyright (c) 2015 Aleph Retamal. All rights reserved.
//

import UIKit

class TransitionManager: NSObject, UIViewControllerAnimatedTransitioning, UIViewControllerTransitioningDelegate  {

    private var presenting:Bool = true
    var leftSide:Bool = true

    // MARK: UIViewControllerAnimatedTransitioning protocol methods

    // animate a change from one viewcontroller to another
    func animateTransition(transitionContext: UIViewControllerContextTransitioning) {

        // get reference to our fromView, toView and the container view that we should perform the transition in
        let container = transitionContext.containerView()
        let fromView = transitionContext.viewForKey(UITransitionContextFromViewKey)!
        let toView = transitionContext.viewForKey(UITransitionContextToViewKey)!


        let offScreenRight = CGAffineTransformConcat(CGAffineTransformMakeTranslation(container!.frame.width, 0), CGAffineTransformMakeScale(0.1, 0.1))
        let offScreenLeft = CGAffineTransformMakeTranslation(-container!.frame.width, 0)

        // start the toView to the right of the screen
        if !leftSide {
            if self.presenting {
                toView.transform = offScreenRight
            } else {
                toView.transform = offScreenLeft
            }
        } else {
            if self.presenting {
                toView.transform = offScreenLeft
            } else {
                toView.transform = offScreenRight
            }
        }

        // add the both views to our view controller
        container!.addSubview(toView)
        container!.addSubview(fromView)

        // get the duration of the animation
        // DON'T just type '0.5s' -- the reason why won't make sense until the next post
        // but for now it important to just follow this approach
        let duration = self.transitionDuration(transitionContext)

        // perform the animation!
        // for this example, just slid both fromView and toView to the left at the same time
        // meaning fromView is pushed off the screen and toView slides into view
        // we also use the block animation usingSpringWithDamping for a little bounce
        UIView.animateWithDuration(duration, animations: { () -> Void in
            if !self.leftSide {
                if self.presenting {
                    fromView.transform = offScreenLeft
                } else {
                    container!.sendSubviewToBack(fromView)
                    fromView.transform = offScreenRight
                }
            } else {
                if self.presenting {
                    fromView.transform = offScreenRight
                    container!.sendSubviewToBack(fromView)
                } else {
                    fromView.transform = offScreenLeft
                }
            }

            toView.transform = CGAffineTransformIdentity
            }) { (finished) -> Void in
                // tell our transitionContext object that we've finished animating
                transitionContext.completeTransition(true)
        }

    }

    // return how many seconds the transiton animation will take
    func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval {
        return 1.0
    }

    // MARK: UIViewControllerTransitioningDelegate protocol methods

    // return the animataor when presenting a viewcontroller
    // remmeber that an animator (or animation controller) is any object that aheres to the UIViewControllerAnimatedTransitioning protocol
    func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.presenting = true
        return self
    }

    // return the animator used when dismissing from a viewcontroller
    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        self.presenting = false
        return self
    }

}

Здесь вы указываете, как представления должны преобразовывать

let offScreenRight = CGAffineTransformConcat(CGAffineTransformMakeTranslation(container!.frame.width, 0), CGAffineTransformMakeScale(0.1, 0.1))
let offScreenLeft = CGAffineTransformMakeTranslation(-container!.frame.width, 0)

В этом случае одно представление будет Перевести + Масштаб, а другой будет Перевести

2. Создайте TransitionManager внутри ViewController

let transitionManager = TransitionManager()

3. Установите делегата перехода

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    transitionManager.leftSide = false
    let toViewController = segue.destinationViewController
    toViewController.transitioningDelegate = self.transitionManager
}

Если вы хотите, чтобы представление появилось справа, leftSide = false

transitionManager.leftSide = false

Что это!

Изменить:

Чтобы добиться этого эффекта:

в эффекте глубины 2

Здесь git с проектом: https://github.com/alaphao/indepth

Используйте ограничения для выравнивания размера:

  • Создайте 2 представления с одинаковой шириной/высотой своего родительского представления

  • Совместите как с CenterX

  • Установите оба расстояния снизу = 0 и создайте выход для ограничений

  • Создайте PanGestureRecognizer

  • Анимируйте нижнее ограничение переднего вида соответственно кастрюле translationInView.y

Ответ 2

Вот решение сделать новый быстрый файл и скопировать этот код

import UIKit

class UltravisualLayout: UICollectionViewLayout {

    private var contentWidth:CGFloat!
    private var contentHeight:CGFloat!
    private var yOffset:CGFloat = 0

    var maxAlpha:CGFloat = 1
    var minAlpha:CGFloat = 0

     //DEFAULT VALUES
    //var widthOffset:CGFloat = 35
    // var heightOffset:CGFloat = 35

    var widthOffset:CGFloat = 100
    var heightOffset:CGFloat = 100
    private var cache = [UICollectionViewLayoutAttributes]()

    private var itemWidth:CGFloat{
        return (collectionView?.bounds.width)!
    }
    private var itemHeight:CGFloat{
        return (collectionView?.bounds.height)!
    }
    private var collectionViewHeight:CGFloat{
        return (collectionView?.bounds.height)!
    }


    private var numberOfItems:Int{
        return (collectionView?.numberOfItemsInSection(0))!
    }


    private var dragOffset:CGFloat{
        return (collectionView?.bounds.height)!
    }
    private var currentItemIndex:Int{
        return max(0, Int(collectionView!.contentOffset.y / collectionViewHeight))
    }

    var nextItemBecomeCurrentPercentage:CGFloat{
        return (collectionView!.contentOffset.y / (collectionViewHeight)) - CGFloat(currentItemIndex)
    }

    override func prepareLayout() {
        cache.removeAll(keepCapacity: false)
        yOffset = 0

        for item in 0 ..< numberOfItems{

            let indexPath = NSIndexPath(forItem: item, inSection: 0)
            let attribute = UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
            attribute.zIndex = -indexPath.row

            if (indexPath.item == currentItemIndex+1) && (indexPath.item < numberOfItems){

                attribute.alpha = minAlpha + max((maxAlpha-minAlpha) * nextItemBecomeCurrentPercentage, 0)
                let width = itemWidth - widthOffset + (widthOffset * nextItemBecomeCurrentPercentage)
                let height = itemHeight - heightOffset + (heightOffset * nextItemBecomeCurrentPercentage)

                let deltaWidth =  width/itemWidth
                let deltaHeight = height/itemHeight

                attribute.frame = CGRectMake(0, yOffset, itemWidth, itemHeight)
                attribute.transform = CGAffineTransformMakeScale(deltaWidth, deltaHeight)

                attribute.center.y = (collectionView?.center.y)! +  (collectionView?.contentOffset.y)!
                attribute.center.x = (collectionView?.center.x)! + (collectionView?.contentOffset.x)!
                yOffset += collectionViewHeight

            }else{
                attribute.frame = CGRectMake(0, yOffset, itemWidth, itemHeight)
                attribute.center.y = (collectionView?.center.y)! + yOffset
                attribute.center.x = (collectionView?.center.x)!
                yOffset += collectionViewHeight
            }
            cache.append(attribute)
        }
    }

    //Return the size of ContentView
    override func collectionViewContentSize() -> CGSize {
        contentWidth = (collectionView?.bounds.width)!
        contentHeight = CGFloat(numberOfItems) * (collectionView?.bounds.height)!
        return CGSizeMake(contentWidth, contentHeight)
    }

    //Return Attributes  whose frame lies in the Visible Rect
    override func layoutAttributesForElementsInRect(rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var layoutAttributes = [UICollectionViewLayoutAttributes]()
        for attribute in cache{
            if CGRectIntersectsRect(attribute.frame, rect){
                layoutAttributes.append(attribute)
            }
        }
        return layoutAttributes
    }


    override func shouldInvalidateLayoutForBoundsChange(newBounds: CGRect) -> Bool {
        return true
    }

    override func targetContentOffsetForProposedContentOffset(proposedContentOffset: CGPoint, withScrollingVelocity velocity: CGPoint) -> CGPoint {
        let itemIndex = round(proposedContentOffset.y / (dragOffset))
        let yOffset = itemIndex * (collectionView?.bounds.height)!
        return CGPoint(x: 0, y: yOffset)
    }
    override func layoutAttributesForItemAtIndexPath(indexPath: NSIndexPath) -> UICollectionViewLayoutAttributes? {

        // Logic that calculates the UICollectionViewLayoutAttributes of the item
        // and returns the UICollectionViewLayoutAttributes
        return UICollectionViewLayoutAttributes(forCellWithIndexPath: indexPath)
    }

}

В файле Main.storyboard используйте UICollectionView или UICollectionViewController компонент выберите UICollectionView, перейдите к инспектору атрибутов и измените Макет из потока в пользовательский и установите атрибут класса UltravisualLayout

вот ссылка и эта ссылка учебник

Надеюсь, это может помочь УДАЧИ..