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
- 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.
- 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.
- 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
-
Clone the repository:
git clone https://github.com/shu223/AnimatedTransitionGallery.git
-
Open the Xcode project file.
-
Run the project on a simulator or device.
-
Explore different transitions in the gallery and refer to the corresponding implementation in the source code.
-
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
AnimatedTransitionGallery
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!
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
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot