Avalonia에서의 선형 그라데이션 애니메이션 구현

Avalonia의 그래픽 시스템은 고급 시각 효과를 구현하는 데 유연성을 제공합니다. 특히, 선형 그라데이션을 기반으로 한 색상 변화 애니메이션은 사용자 인터페이스의 동적 표현력을 크게 향상시킬 수 있습니다. 이 글에서는 Avalonia에서 그라데이션 색상 애니메이션을 구현하는 두 가지 주요 방법을 중심으로 설명하며, 코드 기반 접근과 스타일 기반 설정을 모두 다룹니다.

1. 기본 구성: 그리드 레이아웃과 컨트롤 설정

기본적인 예제로, 100×100 크기의 사각형을 생성하고, 그 내부에 선형 그라데이션을 적용합니다. 이를 통해 애니메이션의 시작점과 끝점을 조정할 수 있는 기반을 마련합니다.

<Rectangle
    Name="GradientBox"
    Width="100"
    Height="100">
    <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0" Color="Purple" />
            <GradientStop Offset="1" Color="Cyan" />
        </LinearGradientBrush>
    </Rectangle.Fill>
</Rectangle>

이 구조는 이후 애니메이션의 대상이 되는 Fill 속성의 변경을 가능하게 합니다.

2. 애니메이션 구현: 색상 및 그라데이션 포인트 변환

2.1 색상 전환 애니메이션 (고정 그라데이션)

색상을 단순히 바꾸는 애니메이션은 Animation 클래스를 사용하여 직접 제어할 수 있습니다. 아래 코드는 시작 그라데이션에서 끝 그라데이션으로의 전환을 3초 동안 진행합니다.

private async void OnAnimateClick(object? sender, RoutedEventArgs e)
{
    var box = GradientBox;
    if (box is null) return;

    var startBrush = new LinearGradientBrush
    {
        StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
        EndPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
        GradientStops = new GradientStopCollection
        {
            new GradientStop(Colors.DarkSlateBlue, 0),
            new GradientStop(Colors.LightSkyBlue, 1)
        }
    };

    var endBrush = new LinearGradientBrush
    {
        StartPoint = new RelativePoint(0, 0, RelativeUnit.Relative),
        EndPoint = new RelativePoint(1, 1, RelativeUnit.Relative),
        GradientStops = new GradientStopCollection
        {
            new GradientStop(Colors.PaleVioletRed, 0),
            new GradientStop(Colors.LimeGreen, 1)
        }
    };

    var animation = new Animation
    {
        Duration = TimeSpan.FromSeconds(3),
        FillMode = FillMode.Forward
    };

    var keyframe0 = new KeyFrame { Cue = new Cue(0) };
    keyframe0.Setters.Add(new Setter(Rectangle.FillProperty, startBrush));

    var keyframe1 = new KeyFrame { Cue = new Cue(1) };
    keyframe1.Setters.Add(new Setter(Rectangle.FillProperty, endBrush));

    animation.Children.AddRange([keyframe0, keyframe1]);

    await animation.RunAsync(box);
}

이 방식은 전체 그라데이션 정의를 애니메이션의 키프레임 안에서 완전히 교체하는 것으로, 복잡한 색상 변화를 원활하게 구현할 수 있습니다.

2.2 그라데이션 포인트 애니메이션 (동적 위치 조절)

그라데이션의 시작점과 끝점을 직접 애니메이션 처리하면, 그라데이션의 방향 변화를 자연스럽게 표현할 수 있습니다. 이 경우, LinearGradientBrush 인스턴스 자체를 애니메이션의 타겟으로 삼아야 합니다.

private async void OnPointAnimationClick(object? sender, RoutedEventArgs e)
{
    var brush = GradientBox?.Fill as LinearGradientBrush;
    if (brush is null) return;

    var animation = new Animation
    {
        Duration = TimeSpan.FromSeconds(2),
        FillMode = FillMode.Forward
    };

    var startKeyframe = new KeyFrame { Cue = new Cue(0) };
    startKeyframe.Setters.Add(new Setter(LinearGradientBrush.StartPointProperty, new RelativePoint(0, 0, RelativeUnit.Relative)));
    startKeyframe.Setters.Add(new Setter(LinearGradientBrush.EndPointProperty, new RelativePoint(1, 1, RelativeUnit.Relative)));

    var endKeyframe = new KeyFrame { Cue = new Cue(1) };
    endKeyframe.Setters.Add(new Setter(LinearGradientBrush.StartPointProperty, new RelativePoint(1, 0, RelativeUnit.Relative)));
    endKeyframe.Setters.Add(new Setter(LinearGradientBrush.EndPointProperty, new RelativePoint(0, 1, RelativeUnit.Relative)));

    animation.Children.AddRange([startKeyframe, endKeyframe]);

    await animation.RunAsync(brush);
}

이 방식은 StartPoint와 EndPoint 속성에 대한 애니메이션을 직접 수행함으로써, 그라데이션의 시각적 흐름을 변화시키며, 더 부드러운 시각 효과를 제공합니다.

3. 활용 팁: 상태 전환과 트랜지션 연계

Transitions 시스템을 활용해 마우스 오버 등 상태 변화 시 그라데이션 전환을 부드럽게 만들 수 있습니다. 예를 들어, 다음처럼 BrushTransition을 지정하면 상태 변경 시 색상 변화가 애니메이션됩니다.

<Rectangle
    Classes="gradient-box"
    Width="100"
    Height="100">
    <Rectangle.Transitions>
        <Transitions>
            <BrushTransition Property="Fill" Duration="0:0:0.4" />
        </Transitions>
    </Rectangle.Transitions>
</Rectangle>

<Style Selector="Rectangle.gradient-box:pointerover">
    <Setter Property="Fill">
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Offset="0" Color="Orange" />
            <GradientStop Offset="1" Color="Gold" />
        </LinearGradientBrush>
    </Setter>
</Style>

이렇게 하면, 마우스를 올렸을 때 그라데이션 색상이 부드럽게 전환되어 사용자 경험을 풍부하게 합니다.

4. 결론

결국, Avalonia에서 그라데이션 애니메이션은 다음과 같은 두 가지 접근 방식으로 구현할 수 있습니다:

전체 그라데이션 교체: 애니메이션 내에서 새로운 LinearGradientBrush 인스턴스를 생성하여 색상과 스톱 포인트를 완전히 변경.
포인트 애니메이션: 기존 그라데이션 객체의 StartPoint, EndPoint 속성에 대해 애니메이션을 적용하여 시각적 흐름을 조작.

이러한 기법들은 사용자 인터페이스의 생동감을 높이는 데 매우 효과적이며, 다양한 디자인 시나리오에 적용 가능합니다.

태그: Avalonia gradient-animation linear-gradient animation-api brush-transition

6월 12일 17:21에 게시됨

괴물 클럽