How to animate background color blinking in blazor

Question

i have a Morse code project in Blazor, basically i have MudPaper components, i want to animate its background-color based on generated dash and dots of the Morse code, just like blinking.

I have no idea how to do it; any suggestions would be helpful. Thanks.

Answer 1

I created a sample for you that translates message to morse code and then you can trigger animation using a button.

Checkout the demo: https://try.mudblazor.com/snippet/QuwclYumPWcbdBtJ

@using System.Text

<PageTitle>Index</PageTitle>

<MudPaper Class="pa-4 mt-4" @ref="myMudPaper">
    <MudText Typo="Typo.h6">@morseCode</MudText>
</MudPaper>

<MudPaper Class="pa-4 mt-4">
    <MudForm>
        <MudTextField T="string"
                      @bind-Value="@message"
                      Immediate="true"
                      Label="Message"
                      Required="true"
                      RequiredError="Enter Message"/>
    </MudForm>
</MudPaper>
<MudPaper Class="pa-4 mt-4">
    <MudButton Variant="Variant.Filled"
               Color="Color.Primary"
               DisableElevation="true"
               OnClick="@AnimateMorseCode">
        Animate Background
    </MudButton>
</MudPaper>

@code {
    MudPaper myMudPaper;
    private readonly string dashClr = "#0088cc";
    private readonly string dotClr = "#ff0000";
    private string morseCode { get; set; }
    private static Dictionary<char, string> _morseAlphabetDictionary;

    private string _message;
    public string message
    {
        get => _message;
        set
        {
            _message = value;
            // when msg changes, also update the translated morsecode
            morseCode = Translate(value.ToLower());
            StateHasChanged();
        }
    }
    
    protected override void OnInitialized()
    {
        // Create the morsecode dictionary
        InitializeDictionary();
    }

    private async Task AnimateMorseCode()
    {
        foreach (var code in morseCode)
        {
            // Animation
            await Task.Delay(500);
            if (code == '.')
                myMudPaper.Style = $"background-color: {dotClr};";
            else if (code == '-')
                myMudPaper.Style = $"background-color: {dashClr};";
            else
                myMudPaper.Style = "background-color: #ffffff;";
            StateHasChanged();
            
            await Task.Delay(500);
            myMudPaper.Style = "background-color: #ffffff;";
            StateHasChanged();
        }
    }

    private static void InitializeDictionary()
    {
        _morseAlphabetDictionary = new Dictionary<char, string>
        {
            { 'a', ".-" },
            { 'b', "-..." },
            { 'c', "-.-." },
            { 'd', "-.." },
            { 'e', "." },
            { 'f', "..-." },
            { 'g', "--." },
            { 'h', "...." },
            { 'i', ".." },
            { 'j', ".---" },
            { 'k', "-.-" },
            { 'l', ".-.." },
            { 'm', "--" },
            { 'n', "-." },
            { 'o', "---" },
            { 'p', ".--." },
            { 'q', "--.-" },
            { 'r', ".-." },
            { 's', "..." },
            { 't', "-" },
            { 'u', "..-" },
            { 'v', "...-" },
            { 'w', ".--" },
            { 'x', "-..-" },
            { 'y', "-.--" },
            { 'z', "--.." },
            { '0', "-----" },
            { '1', ".----" },
            { '2', "..---" },
            { '3', "...--" },
            { '4', "....-" },
            { '5', "....." },
            { '6', "-...." },
            { '7', "--..." },
            { '8', "---.." },
            { '9', "----." }
        };
    }

    private static string Translate(string input)
    {
        var stringBuilder = new StringBuilder();

        foreach (var character in input)
        {
            if (_morseAlphabetDictionary.ContainsKey(character))
            {
                stringBuilder.Append(_morseAlphabetDictionary[character] + " ");
            }
            else if (character == ' ')
            {
                stringBuilder.Append("/ ");
            }
            else
            {
                stringBuilder.Append(character + " ");
            }
        }

        return stringBuilder.ToString();
    }

}