Convert Figma logo to code with AI

shu223 logoAnimatedTransitionGallery

A gallery app of custom animated transitions for iOS.

2,534
278
2,534
1

Top Related Projects

A collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions.

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Animated side menu with customizable UI

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Quick Overview

AnimatedTransitionGallery is a comprehensive collection of custom UIViewController transitions for iOS, showcasing various animation techniques. It serves as both a reference and a learning resource for developers looking to implement engaging and interactive transitions in their iOS applications.

Pros

  • Extensive collection of diverse transition animations
  • Well-organized and easy to understand code examples
  • Regularly updated to support the latest iOS versions
  • Includes both Swift and Objective-C implementations

Cons

  • Some transitions may not be suitable for all app designs
  • Limited documentation on customizing the transitions
  • Requires a good understanding of UIKit and animation concepts
  • Some older examples may need updating for the latest iOS versions

Code Examples

  1. Basic custom transition:
class FadeAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    
    func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
        guard let toView = transitionContext.view(forKey: .to) else { return }
        
        let containerView = transitionContext.containerView
        toView.alpha = 0.0
        containerView.addSubview(toView)
        
        UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: {
            toView.alpha = 1.0
        }, completion: { _ in
            transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
        })
    }
}

This code demonstrates a basic fade transition between view controllers.

  1. Interactive transition:
class InteractiveDismissTransition: UIPercentDrivenInteractiveTransition {
    var interactionInProgress = false
    private var shouldCompleteTransition = false
    private weak var viewController: UIViewController!
    
    init(viewController: UIViewController) {
        super.init()
        self.viewController = viewController
        prepareGestureRecognizer(in: viewController.view)
    }
    
    private func prepareGestureRecognizer(in view: UIView) {
        let gesture = UIPanGestureRecognizer(target: self, action: #selector(handleGesture(_:)))
        view.addGestureRecognizer(gesture)
    }
    
    @objc func handleGesture(_ gestureRecognizer: UIPanGestureRecognizer) {
        // Implement gesture handling logic here
    }
}

This code sets up an interactive dismissal transition using a pan gesture.

  1. Transition with keyframe animations:
UIView.animateKeyframes(withDuration: duration, delay: 0, options: .calculationModeCubic, animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.4) {
        fromView.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
    }
    UIView.addKeyframe(withRelativeStartTime: 0.2, relativeDuration: 0.4) {
        toView.transform = .identity
    }
}, completion: { _ in
    transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
})

This code snippet shows how to use keyframe animations for more complex transitions.

Getting Started

  1. Clone the repository:

    git clone https://github.com/shu223/AnimatedTransitionGallery.git
    
  2. Open the Xcode project file.

  3. Run the project on a simulator or device.

  4. Explore different transitions in the gallery and refer to the corresponding implementation in the source code.

  5. To use a transition in your own project, copy the relevant animator class and set it as the transitioningDelegate of your view controller.

Competitor Comparisons

A collection of iOS7 animation controllers and interaction controllers, providing flip, fold and all kinds of other transitions.

Pros of VCTransitionsLibrary

  • More comprehensive collection of transition animations
  • Better documentation and usage examples
  • Actively maintained with recent updates

Cons of VCTransitionsLibrary

  • Slightly more complex implementation
  • Limited customization options for some transitions
  • Larger codebase, potentially impacting app size

Code Comparison

AnimatedTransitionGallery:

class FadeAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    // ... (implementation details)
}

VCTransitionsLibrary:

class CEReversibleAnimationController: NSObject, UIViewControllerAnimatedTransitioning {
    var reverse: Bool = false
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    // ... (implementation details)
}

Both libraries provide custom transition animations for iOS apps, but VCTransitionsLibrary offers a more extensive set of pre-built transitions and better documentation. However, AnimatedTransitionGallery may be simpler to implement for basic transition needs. The code comparison shows similar structure, with VCTransitionsLibrary offering additional features like reversible animations.

:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion

Pros of animated-tab-bar

  • More focused on tab bar animations, providing a specialized solution
  • Offers a wider variety of pre-built animation styles for tab bar items
  • Easier to implement for developers specifically looking for tab bar animations

Cons of animated-tab-bar

  • Limited to tab bar animations, less versatile for other transition types
  • May require more customization for non-standard tab bar layouts or designs
  • Less comprehensive documentation compared to AnimatedTransitionGallery

Code Comparison

AnimatedTransitionGallery:

let transition = CATransition()
transition.duration = 0.3
transition.type = CATransitionType.push
transition.subtype = CATransitionSubtype.fromRight
view.window!.layer.add(transition, forKey: kCATransition)

animated-tab-bar:

let animatedTabBar = RAMAnimatedTabBarController()
let item1 = RAMAnimatedTabBarItem(title: "Home", image: UIImage(named: "home"), tag: 1)
item1.animation = RAMBounceAnimation()
animatedTabBar.viewControllers = [homeViewController]
animatedTabBar.setViewControllers([homeViewController], animated: true)

The code snippets demonstrate the different focus areas of each library. AnimatedTransitionGallery uses CATransition for general view transitions, while animated-tab-bar utilizes custom classes specifically designed for tab bar animations.

Animated side menu with customizable UI

Pros of Side-Menu.iOS

  • Focused specifically on side menu implementation, providing a more specialized solution
  • Offers a visually appealing and customizable side menu with smooth animations
  • Includes a demo app for easy testing and implementation

Cons of Side-Menu.iOS

  • Limited to side menu functionality, whereas AnimatedTransitionGallery offers a wider range of transition types
  • May require more customization for integration into existing projects
  • Less frequently updated compared to AnimatedTransitionGallery

Code Comparison

Side-Menu.iOS:

let menuLeftNavigationController = UISideMenuNavigationController(rootViewController: YourViewController)
SideMenuManager.default.leftMenuNavigationController = menuLeftNavigationController

AnimatedTransitionGallery:

let transition = CATransition()
transition.type = kCATransitionPush
transition.subtype = kCATransitionFromLeft
view.window!.layer.add(transition, forKey: kCATransition)

The Side-Menu.iOS code snippet demonstrates the simplicity of setting up a side menu, while the AnimatedTransitionGallery example shows a more general approach to creating custom transitions. Side-Menu.iOS provides a higher-level abstraction for side menu implementation, whereas AnimatedTransitionGallery offers more flexibility for various transition types.

:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion

Pros of folding-cell

  • More focused and specialized animation effect (folding cell)
  • Higher star count and community engagement
  • Actively maintained with recent updates

Cons of folding-cell

  • Limited to a specific animation type
  • Less variety in transition effects
  • Steeper learning curve for customization

Code Comparison

AnimatedTransitionGallery example:

class FadeAnimator: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    // ... (implementation details)
}

folding-cell example:

class FoldingCell: UITableViewCell {
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var foregroundView: RotatedView!
    @IBOutlet weak var foregroundViewTop: NSLayoutConstraint!
    // ... (additional properties and methods)
}

AnimatedTransitionGallery offers a more general-purpose approach to creating custom transitions, while folding-cell provides a specific, polished folding animation effect. The code examples show that AnimatedTransitionGallery focuses on implementing the UIViewControllerAnimatedTransitioning protocol for custom transitions, whereas folding-cell defines a custom UITableViewCell subclass with specific properties for the folding effect.

:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion

Pros of expanding-collection

  • More polished and production-ready UI component
  • Actively maintained with recent updates
  • Comprehensive documentation and usage examples

Cons of expanding-collection

  • Limited to a specific UI pattern (expanding cards)
  • Requires more setup and configuration
  • Less flexibility for custom transitions

Code Comparison

AnimatedTransitionGallery:

class CustomAnimationController: NSObject, UIViewControllerAnimatedTransitioning {
    func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
        return 0.5
    }
    // ... (implementation of animateTransition method)
}

expanding-collection:

let expandingCollection = ExpandingCollection(collectionViewLayout: CustomCollectionViewFlowLayout())
expandingCollection.collectionView?.register(CustomCollectionViewCell.self, forCellWithReuseIdentifier: "cell")
expandingCollection.itemSize = CGSize(width: 256, height: 335)
expandingCollection.frontItemShadowColor = .black
expandingCollection.backItemShadowColor = .clear

AnimatedTransitionGallery focuses on showcasing various custom transition animations, providing a flexible framework for implementing different types of transitions. It's more of a learning resource and experimentation tool.

expanding-collection, on the other hand, is a specific UI component that implements an expanding card collection view. It offers a polished, ready-to-use solution for this particular UI pattern, with more refined animations and interactions out of the box.

While AnimatedTransitionGallery allows for more diverse transition types, expanding-collection provides a more complete and production-ready implementation for its specific use case.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

AnimatedTransitionGallery

Platform License Twitter

Collection of custom animated transitions for iOS using UIViewControllerAnimatedTransitioning protocol.

How to build

$ git clone https://github.com/shu223/AnimatedTransitionGallery
$ cd AnimatedTransitionGallery/
$ git submodule update --init --recursive

Available Transitions

  • HUTransitionVerticalLinesAnimator
  • HUTransitionHorizontalLinesAnimator
  • HUTransitionGhostAnimator
  • ZBFallenBricksAnimator
  • CoreImageTransitionBoxBlur
  • CoreImageTransitionMotionBlur
  • CoreImageTransitionCopyMachine
  • CoreImageTransitionDisintegrateWithMask
  • CoreImageTransitionDissolve
  • CoreImageTransitionFlash
  • CoreImageTransitionMod
  • CoreImageTransitionPageCurl
  • CoreImageTransitionPageCurlWithShadow
  • CoreImageTransitionRipple
  • CoreImageTransitionSwipe
  • ATCAnimatedTransitioningFade
  • ATCAnimatedTransitioningBounce
  • ATCAnimatedTransitioningSquish
  • ATCAnimatedTransitioningFloat
  • LCZoomTransition
  • ADBackFadeTransition
  • ADCarrouselTransition
  • ADCrossTransition
  • ADCubeTransition
  • ADFadeTransition
  • ADFlipTransition
  • ADFoldTransition
  • ADGhostTransition
  • ADGlueTransition
  • ADModernPushTransition
  • ADPushRotateTransition
  • ADScaleTransition
  • ADSlideTransition
  • ADSwapTransition
  • ADSwipeFadeTransition
  • ADSwipeTransition
  • ADZoomTransition
  • CECardsAnimationController
  • CECrossfadeAnimationController
  • CECubeAnimationController
  • CEExplodeAnimationController
  • CEFlipAnimationController
  • CEFoldAnimationController
  • CENatGeoAnimationController
  • CEPortalAnimationController
  • CETurnAnimationController
  • KWTransitionStyleNameRotateFromTop
  • KWTransitionStyleNameFadeBackOver
  • KWTransitionStyleNameBounceIn
  • KWTransitionStyleNameDropOut
  • KWTransitionStyleNameStepBackScroll
  • KWTransitionStyleNameStepBackSwipe
  • KWTransitionStyleNameUp
  • KWTransitionStyleNamePushUp
  • KWTransitionStyleNameFall
  • KWTransitionStyleNameSink
  • DMAlphaTransition
  • DMScaleTransition
  • DMSlideTransition
  • HFAnimator
  • HFDynamicAnimator
  • BouncePresentTransition
  • FlipTransition
  • ShrinkDismissTransition

Author

Shuichi Tsutsumi

iOS freelancer in Japan. Welcome works from abroad!

Support via PayPal