Implement Animated Lyrics Text

[sobhanbera]

Currently

When the line of lyrics is changed then the next line becomes large instantly. There is no transition between lines changing.

About this feature

When any of the lines of the lyrics change the main (current) lyrics line should fade up the font with bright colour.

Implementation

we can use the following implementation to achieve this task.

// current index is the index of current line based on the lrc string
const color = Animated.interpolate(currentIndex, {
    input: [currentIndex - 1, currentIndex, currentIndex + 1],
    output: ['any_semi_dark_visual_color', 'totaly_visible_color', 'any_semi_dark_visual_color']
})
    
// same for font size...
const fontSize = Animated.interpolate(currentIndex, {
    input: [currentIndex - 1, currentIndex, currentIndex + 1],
    output: [20, 24, 20]
})

return (
    ...
    <Text
        style={{
            fontSize,
            color,
            ...
        }}
    >
        {currentLyricsLine}
    <Text/>
    ...
    ...
)