Enjoy this step-by-step guide to making this fun project
I like the look of an app that uses a background of average color when transitioning images. This beautiful technique can be created by calculating the average color of a given image. This example was created using images from Unsplash to create the desired effect:
The final version of the project can be found on GitHub.
- Create a new SwifUI project
- change name
- change name
- Add the swiftui-introspect package from https://github.com/siteline/SwiftUI-Introspect.git
- Add images to the project’s resources. The names of the images in the sample project are
Image 1, Image 2, Image 3,And
The swiftui-introspection library would be to use
UIScrollView he is behind
Scrollview This much
isPagingEnabled flag can be set
The average color code is not the original. There is code from https://christianselig.com/2021/04/efficient-average-color/. This code is quick and efficient. The author has a great explanation on how to build this code.
code a. is in
UIImage Category that allows it to be called directly on the image. For example:
ImageEntry.swift The file needs to be created. A smaller structure to keep in the file would be
UIImage, a UUID, and the average color. A simple constructor taking the name of the image will do all the work.
One design decision that was made is to keep the data as
UIKit objects. This keeps the code from having to bounce back and forth between SwiftUI and UIKit until needed.
- create an array of
ImageEntryItems to display in the gallery.
GeometryReaderWill be used to set the size of the image. The width of the view will also be needed to calculate the background color later.
ScrollViewHorizontal, so it scrolls from side to side.
- images a. layout in
ImageIndented 24 units with rounded corners, fitted to the screen.
GeometryViewIgnore the protected area of the screen, so the entire screen is used for the layout. This will be important if a color background is added.
Now a basic gallery is created with no background. The gallery can be scrolled through, and the images fit the screen, maintaining their aspect ratio.
Need to know the offset of the transition
ScrollView, To start, a custom view preference must be created to store the offset of the view.
value When it comes it’s already set
nextValuewhich is 0, needs to be added
value, This will cause the key to send an update message.
to keep track of
ScrollViewoffset is, need to add an empty view
ScrollView, It needs to notify the user interface as soon as the offset changes.
- Add a coordinate space called scroll to keep track of the position relative to the scroll view. (line 20)
ZStackSo the views can be layered
ScrollView, (line 2)
GeometryReaderis added which has a clear color view. (lines 3-6)
- On each redraw, get the position of the clear view relative to the scroll (
ScrollView) coordinate space and store it
ScrollViewPreferenceKeyon a clear view. (lines 5-6)
- when the value is set to
onPreferenceChangeis called a modifier. The value is the latest offset of the Clear Color view. (lines 24-26)
When the application is run, the scroll view’s offset may change in the debug console as the gallery is swiped up.
Inside the scroll view, a clear view was created
0,0, As the user swipes left, the frame will change and become negative. The frame for clear view is relative to the frame of the scroll view. Since the clear view is at the parent position of the scroll view, the offset will match the result
From a design standpoint, it makes sense to ask one color to interpolate between itself and another. For this reason, the code has been put in the extension
getComponentsa. There is a helper function to get the color components from
UIColor, The code supports a white value with either RGBA or alpha.
interpolateThe function returns the color between the source (self) and the destination colors.
The calculation takes the remaining value of the source color and adds it to the amount of color for the next page. For example, if the source color
red component = 1.0destination colored
red component = 0.5, and the scroll is 25% to the next page. The calculation is as follows:
newRed = (1.0–0.25) * 1.0 + 0.25 * 0.5newRed = 0.76 * 1.0 + 0.25 * 0.5newRed = 0.76 + 0.125newRed = 0.885
Background Calculator is where the magic happens. Two things are needed for this to work:
- viewing width. This is the screen in the application.
- The array of averaged colors is in the same order as the images.
The calculator will be an observable object that illuminates the calculated background color.
colorPublisher with the last calculated background color
widthWidth of our view needed for page count calculation
colorsAverage color list
colorpublisher is set to first color
calculateBackground(position:)Takes the offset and calculates the current background color
mostly happens in magic
fractionalPageWill be the current page with a fractional offset between the pages. For example, 0.5 page represents halfway between 0 and 1.
pagemakes an integer from
fractionalPagedouble. This will act as an index of the color of the current page.
fromColoris the background color of the current page.
fractionalPageCalculate the new background color that is between the first and last page. If not, return the color of the current page. For example, if
fractionalPage1.5 and there are two pages, there is no page at index 2. This means that no calculation is required; The background will be the background of the current page, which is 1.
To calculate color between pages:
- calculate next page
- Get the percentage between pages, which is the fractional part of
interpolateTo get the color between the current and the next page.
To put this together, three things need to be connected
- A stateful object is added to hold an instance of
BackgroundCalculator, As the calculator’s published color updates, the view will be redrawn. (line 9)
Rectangleis added behind
ScrollViewwhose foreground color is
BackgroundCalculatorCalculate color. (line 14)
- In form of
ScrollViewOffsetPrefrenceKeyCalculate the new background color based on the value of
ScrollViewcurrent status of. The new position needs to be multiplied by -1. (line 39)
GalleryViewAppears, the width of
GalleryViewand need to pass the list of average colors
BackgroundCalculator, (lines 43-44)
Running the project at this point will show a colored background behind the images that transitions smoothly between colors.
I love this transition. I think it gives personality what can be a boring transition between ideas. I hope you will also like it and find its use in your application. The full project can be found on GitHub.
If you liked this article, please leave a comment.