Lyrics animation, cartoons lyrics

Lyrics animation, cartoons lyrics

Achieve the animation of gradually changing the lyrics, such as karaoke can be stained according to the time progress. Because the project needs to achieve a similar effect that gradually changes the color of the lyrics, if you want to think about the implementation scheme, you still have to seek help from the omnipotent google, and finally find this blog article. This blog has been the implementation of the solution and its principles of the very clear, but there is no specific demo, so I put my demo here (https://github.com/Phelthas/LXMLyricsLabel), by the way to summarize. First, let's look at the requirement: the original text is displayed, and the color of the text is gradually changed from left to right. The difficulty is "gradually changing the color ". The solution provided in the blog is to put two labels with identical attributes except the font color, and the whiteLabel of the original font color is shown below, the above is the dyed greenLabel, and then the control greenLabel is gradually displayed. (The blog mentioned faceBook's shimmer (https://github.com/facebook/Shimmer) is also using the same way) and so on have time to carefully study how to control greenLabel gradually display it? This is not a fade-in, but a display from left to right! Therefore, partial rendering is required, that is, using the layer's mask attribute. @ Property (strong) CALayer * mask; although a mask is a layer, it is not displayed. It is a layer that uses its own alpha value to control whether the original layer content is rendered or not. If the alpha value of the mask is 1, the original layer will be rendered. Otherwise, it will not be rendered, and it will not be displayed, but transparent. Because the mask is a layer, you can add CAAnimation to the mask, so you can use the mask animation to gradually display the original layer from left to right, you only need to add an animation with the width from 0 to the label width to the mask. If you need to control the time, you can use keyFrameAnimation to meet your needs. It should be noted that the layer can only be used for position and bounds, rather than frame Animation. To change the frame of the layer, you must consider the position and bounds attributes. Here we only need to render the label from left to right, so we can use the attribute anchorPoint below to set anchorPoint to (0, 0.5) (its default value is (0.5, 0.5 )), when the bounds of the layer is changed, it only wants to expand the right side. The specific code is in the demo and will not be pasted here. If you have any questions, please discuss them.