Transition between images in creative ways using Core Image filters.
- Core Image
You can add visual effects to an image transition by chaining together Core Image
CIFilter objects in the category CICategoryTransition. Each filter from this category represents a single transition effect.
For example, you can combine an effect that dissolves an image and one that pixelates it as a transition to a second image. This particular transition chain comprises three steps:
CIDissolvetransition filter with time as an input parameter.
CIPixellatepixelation transition filter with time as an input parameter.
Initiate the transition by adding a time step to your run loop.
Load Source and Target Images
Filters in the transition category require your program to load both source and target images in order to transform the source into the destination.
Create a Time-Dependent Dissolve Transition
The key difference of transition filters from their normal filter chain counterparts is the dependence on time. After creating a
CIFilter from the
k category, you set the value of the
input parameter to a float between
1 to indicate how far along the transition has progressed.
Write each transition filter to accept time as an input parameter, and reapply the filter at a regular interval to transform the image from its source state to the target state.
You do not need to pass time linearly from
1. In fact, you can advance the transition at a variable rate by modulating the time variable with a function, such as
simd, which is a smooth ramp function clamped between two values, imbuing the dissolve effect with an ease-in ease-out feel.
Create a Time-Dependent Pixelate Transition
Like the dissolve transition, you can write the pixelate transition filter as a time-dependent function as well.
As with the dissolve filter, you can modify the speed and acceleration of the transition by changing the way time varies between
1. In this case, unlike the
CIDissolve filter, the
CIPixellate filter accepts an
input, which you can vary over a smoothened triangle function:
This function puts the peak of the pixelation at the middle of the transition: the pixels start and end small, closely approximating the source image, but as the transition reaches its halfway point, the pixels scale to their largest size, effectively blocking out the moment farthest from source and target.
Step Time with a Display Link
In writing the filter functions to accept a time parameter, you parametrized the transition effect moving from source to target. Now, you must move time forward when you want to perform the transition.
CADisplay to your run loop gives you a way to refresh an image every time a screen redraw occurs, so you can execute on a reliably regular time interval. In the case of a transition, you need only perform the following steps:
Create the display link to call an update function.
Add to your app’s main run loop to begin the transition. Start time at
0and track time through the update function.
In the update function, update the transition filters’
inputvalue and refresh the filtered image. Since this example chains two filters for a simultaneous effect, update both filters.
In the update function, remove the link once time has expired.
Create the Display Link to Call an Update Function
Keeping the display link around beyond function scope allows you to remove it when the transition is done.
Add the Display Link to Begin the Transition
Write the Transition Update Function
CADisplay should call a time-stepping function on each pass through the run loop. Inside this function, recompute the filtered image with that frame's
As a convenience, the following helper function shows a CIImage in a UIImageView.
Explore Other Transition Visual Effects
The Core Image framework provides a number of distinct visual effects through its built-in catalog of filters. You can substitute a different transition effect for the dissolve and pixelation effects.
For example, the
CICopy filter passes a scanning light over the source image as it transforms into the target image.
CIPage filter simulates the turn of a page, peeling the source image toward the right to reveal the target image underneath. You can include a separate image on the back of the flipped page.
CIBars slices the source image into vertical bars that sequentially slide off the page, revealing the target image underneath.
You can apply transitions such as accordion folding, flash photography, disintegration, and watery rippling. Substitute the dissolve and pixellate filters with others from the same category, and tweak the
input parameter to customize the effect to fit your app.