IOS Core Animation Calayer Insights

using Calayer mask to achieve water injection animation effect

Core animation has always been a fun topic for iOS, and using the core animation allows for very smooth, cool animations. The Core animtion API is a more advanced package that is easy to use, freeing us to animate using OpenGL. This article mainly describes how to use Calayer mask to implement a two-way water injection animation (let's call it).



Learn about the mask of Calayer

The above is the Calayer header file about mask, mask is actually a mask of the layer content.
If we put mask is transparent, actually see the layer is completely transparent, that is, only mask the content of the opaque part and layer overlay will be displayed, the effect is as follows:



Design ideas for reference ["Smooth implementation of the KTV lyrics view based on Core animation"] (http://www.iwangke.me/2014/10/06/ how-to-implement-a-core-animation-based-60-fps-ktv-lyrics-view/), [Facebook Shimmer] (https://github.com/facebook /shimmer).

Overlay two ' uiimageview ' on ' View ': ' Grayhead ' & ' Greenhead ', the default ' Greenhead ' will block ' grayhead '. Set a ' mask ' for ' greenhead ', this mask is not an ordinary ' mask ', it consists of two ' sublayer ': ' Masklayerup ' Masklayerdown '. By default, ' Sublayer ' is displayed outside the ' mask ' content, when ' mask ' is actually transparent, and thus ' greenhead ' is also transparent. Now we want ' greenhead ' to show the content slowly from the top left and bottom right, so we just need to fill in the contents of ' Greenhead ' from two directions.

[Full Code] (Https://github.com/wuwen1030/CALayerAnimationDemo)

Summary

Calayer provides another means of manipulating the UI, although it provides a lower-level API than UIView, but it provides richer functionality and higher performance (Calayer animations are rendered in dedicated threads). When it comes to complex and high-performance UI interfaces, Calayer is more visible, such as Asyncdisplaykit. Through this piece of article, we can actually see a use of calayer, usually we deal with the fillet will go directly to modify the Calayer Cornerradius, but this practice performance is poor, especially in the list of time, now we have a mask, This allows us to change the mask of the layer directly without affecting the performance of the graphics rendering.

IOS Core Animation Calayer Insights