preview-transition
:octocat: PreviewTransition is a simple preview gallery UI controller with animated tranisitions. Swift UI library made by @Ramotion
Top Related Projects
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
: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
:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Quick Overview
The Ramotion/preview-transition repository is a Swift library that provides a smooth and interactive preview transition animation for iOS applications. It allows developers to create a visually appealing and engaging transition between different views or screens in their apps.
Pros
- Smooth Animations: The library offers a seamless and fluid transition animation that enhances the user experience.
- Customizable: Developers can customize various aspects of the transition, such as the animation duration, scaling, and rotation.
- Easy Integration: The library is well-documented and provides a straightforward integration process, making it easy for developers to incorporate into their projects.
- Responsive Design: The transition animations adapt well to different screen sizes and orientations, ensuring a consistent user experience across various iOS devices.
Cons
- Limited to iOS: The library is specific to the iOS platform and cannot be used for Android or other mobile platforms.
- Dependency on UIKit: The library relies on the UIKit framework, which may limit its compatibility with newer technologies or architectures that move away from UIKit.
- Performance Considerations: Depending on the complexity of the transition and the content being displayed, the animations may impact the overall performance of the app, especially on older or less powerful devices.
- Potential Learning Curve: Developers who are new to the library may need to invest time in understanding the API and the various configuration options to fully leverage its capabilities.
Code Examples
Example 1: Presenting a Preview Transition
let previewTransition = PreviewTransition()
previewTransition.presentViewController(viewController, from: self)
This code snippet demonstrates how to present a view controller using the PreviewTransition
class, creating a smooth and interactive preview transition.
Example 2: Customizing the Transition
let previewTransition = PreviewTransition()
previewTransition.transitionDuration = 0.5
previewTransition.scaleRatio = 0.8
previewTransition.rotationAngle = 15.0
previewTransition.presentViewController(viewController, from: self)
In this example, the developer customizes the transition by adjusting the duration, scale ratio, and rotation angle of the animation.
Example 3: Dismissing a Preview Transition
let previewTransition = PreviewTransition()
previewTransition.dismissViewController(viewController, from: self)
This code snippet demonstrates how to dismiss a view controller using the PreviewTransition
class, applying the same smooth and interactive transition.
Example 4: Handling Gesture-based Transitions
let previewTransition = PreviewTransition()
previewTransition.enableGestureBasedTransition = true
previewTransition.presentViewController(viewController, from: self)
In this example, the developer enables the gesture-based transition, allowing users to interact with the transition by swiping or dragging the view controller.
Getting Started
To get started with the Ramotion/preview-transition library, follow these steps:
-
Add the library to your project using a dependency manager like CocoaPods or Carthage.
# CocoaPods pod 'PreviewTransition'
-
Import the
PreviewTransition
module in your Swift file.import PreviewTransition
-
Create an instance of the
PreviewTransition
class and use it to present or dismiss view controllers.let previewTransition = PreviewTransition() previewTransition.presentViewController(viewController, from: self)
-
Customize the transition by adjusting the various properties of the
PreviewTransition
instance, such as the duration, scale ratio, and rotation angle.previewTransition.transitionDuration = 0.5 previewTransition.scaleRatio = 0.8 previewTransition.rotationAngle = 15.0
-
Enable the gesture-based transition if desired.
previewTransition.enableGestureBasedTransition = true
-
Refer to the project's documentation for more advanced usage and configuration options.
Competitor Comparisons
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
Pros of Ramotion/animated-tab-bar
- Provides a visually appealing and interactive tab bar experience with smooth animations.
- Supports customization of tab bar items, including icons, titles, and colors.
- Offers a simple and straightforward API for easy integration into iOS projects.
Cons of Ramotion/animated-tab-bar
- May have a higher learning curve compared to Ramotion/preview-transition, as it involves more complex UI elements.
- Requires more setup and configuration to achieve the desired look and feel.
Code Comparison
Ramotion/animated-tab-bar:
let tabBarController = AnimatedTabBarController()
tabBarController.viewControllers = [
UINavigationController(rootViewController: FirstViewController()),
UINavigationController(rootViewController: SecondViewController()),
UINavigationController(rootViewController: ThirdViewController())
]
Ramotion/preview-transition:
let previewTransition = PreviewTransition()
previewTransition.delegate = self
navigationController?.delegate = previewTransition
:octocat: 📃 FoldingCell is an expanding content cell with animation made by @Ramotion
Pros of Folding Cell
- Provides a unique and visually appealing way to display content, with a folding animation that can capture user attention.
- Supports customization of the folding animation, allowing developers to tailor the behavior to their specific needs.
- Includes a range of pre-built cell styles, making it easier to integrate the component into existing designs.
Cons of Folding Cell
- The folding animation may not be suitable for all types of content or UI designs, limiting its versatility.
- The library may have a steeper learning curve compared to simpler transition effects, requiring more time and effort to integrate.
- The performance of the folding animation may be a concern, especially on older or less powerful devices.
Code Comparison
Folding Cell:
let foldingCell = FoldingCell(frame: frame, isSelected: false)
foldingCell.delegate = self
foldingCell.selectedAnimation = true
foldingCell.unfoldAnimation = true
Preview Transition:
let previewTransition = PreviewTransition(frame: frame)
previewTransition.delegate = self
previewTransition.isSelected = false
previewTransition.animationDuration = 0.5
:octocat: ExpandingCollection is an animated material design UI card peek/pop controller. iOS library made by @Ramotion
Pros of Expanding Collection
- Provides a unique and visually appealing way to display content, with an expanding and collapsing collection view.
- Includes a variety of customization options, such as the ability to change the animation duration and the appearance of the collection items.
- Supports both portrait and landscape orientations, making it suitable for a wide range of device configurations.
Cons of Expanding Collection
- May not be suitable for all types of content, as the expanding and collapsing animation may not be appropriate for certain use cases.
- Requires more development effort compared to a standard collection view, as the custom animation and layout logic need to be implemented.
- May have performance implications, especially on older or less powerful devices, due to the complex animation and layout calculations.
Code Comparison
Expanding Collection
let expandingCollection = ExpandingCollection()
expandingCollection.delegate = self
expandingCollection.dataSource = self
expandingCollection.register(ExpandingCollectionViewCell.self, forCellWithReuseIdentifier: "ExpandingCollectionViewCell")
Preview Transition
let previewTransition = PreviewTransition()
previewTransition.delegate = self
previewTransition.dataSource = self
previewTransition.register(PreviewTransitionCell.self, forCellWithReuseIdentifier: "PreviewTransitionCell")
:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI library made by @Ramotion
Pros of Navigation Stack
- Provides a more robust and flexible navigation system compared to Preview Transition.
- Supports complex navigation hierarchies and nested view controllers.
- Offers advanced features like custom transitions and gesture-based navigation.
Cons of Navigation Stack
- Slightly more complex to set up and configure compared to Preview Transition.
- May have a steeper learning curve for developers unfamiliar with advanced navigation patterns.
- Potentially more resource-intensive due to the additional features and complexity.
Code Comparison
Preview Transition
let previewTransition = PreviewTransition()
previewTransition.presentationStyle = .modal
previewTransition.dismissalStyle = .modal
Navigation Stack
let navigationStack = NavigationStack()
navigationStack.pushViewController(viewController, animated: true)
navigationStack.popViewController(animated: true)
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
PREVIEW TRANSITION
Preview Transition is a simple preview gallery UI controller with animated tranisitions
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
Stay tuned for the latest updates:
About
This project is maintained by Ramotion, Inc.
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
Looking for developers for your project?
This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
Requirements
- iOS 9.0+
- Xcode 9
Licence
Preview-transition is released under the MIT license. See LICENSE for details.
Installation
Just add the Source folder to your project or use CocoaPods like this:
pod "PreviewTransition"
or Carthage users can simply add to their Cartfile
:
github "Ramotion/preview-transition"
Usage
-
import PreviewTransition
-
Create UITableViewController inherit, inheriting from
PTTableViewController
-
Add UITableViewDelegate methods
public override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return <RowsCount>
}
public override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
return tableView.dequeueReusableCellWithIdentifier(<CellIdentifier>, forIndexPath: indexPath)
}
- add a ParallaxCell
storyboards:
create a cell and inherit from ParallaxCell
; don't forget set the identifier <CellIdentifier>
or programmatically:
register a cell in viewDidLoad tableView.registerClass(ParallaxCell, forCellReuseIdentifier:<CellIdentifier>)
-
set cell height
-
create image names (image sizes must be equal to screen size or bigger)
let images = [image_name, image_name, image_name, image_name, image_name] // image names
- set image and text for ParallaxCell
public override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
guard let cell = cell as? ParallaxCell else {
return
}
let imageName = images[indexPath.row]
if let image = UIImage(named: imageName) {
cell.setImage(image, title: <SetText>)
}
}
your tableViewController should look like DemoTableViewController
Method public override func tableView(tableView: didSelectRowAtIndexPath indexPath:)
we will add later. (step 10)
-
Create UIViewController, inheriting from
PTDetailViewController
-
Add action for backButton and call
popViewController()
func backButtonHandler() {
popViewController()
}
- Push this UIViewController in UITableViewController. Add method
public override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
// create viewController
let <YourViewController> = storyboard?.instantiateViewControllerWithIdentifier(<identifier>)
if case let viewController as <YourViewController> = viewController {
pushViewController(viewController)
}
}
- Configure UINavigationBar
// transparent background
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = true
UINavigationBar.appearance().tintColor = .whiteColor()
// set font
if let font = UIFont(name: <Font name> , size: 18) {
UINavigationBar.appearance().titleTextAttributes = [
NSForegroundColorAttributeName : UIColor.whiteColor(),
NSFontAttributeName : font
]
}
ð License
Preview Transition is released under the MIT license. See LICENSE for details.
This library is a part of a selection of our best UI open-source projects.
If you use the open-source library in your project, please make sure to credit and backlink to https://www.ramotion.com/
ð± Get the Showroom App for iOS to give it a try
Try this UI component and more like this in our iOS app. Contact us if interested.
Top Related Projects
:octocat: RAMAnimatedTabBarController is a Swift UI module library for adding animation to iOS tabbar items and icons. iOS library made by @Ramotion
: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
:octocat: NavigationStack is a stack-modeled UI navigation controller. Swift UI 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