Skip to content

Implement Animated Lyrics Text #40

@sobhanbera

Description

@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/>
    ...
    ...
)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestfeature-implementationImplement a new featurefeature-pendingFeature implementation is pending for much timefeature-updateUpdating an existing feature.feature-urgentUrgently needed feature implementationtweakSimple and small code change. similar to good-first-issue

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions