WPF Rolling Animation (슬롯머신 같은 애니메이션)

텔레비전이나 여타 다른 곳들을 보면 숫자들이 돌아가면서 바뀌는 장면이 있습니다.

WPF의 DoubleAnimation 을 통해 만들어 간단하게 만들어 보겠습니다.

메인 글자가 보이는 Label이 필요합니다.

<Label x:Name="lbl1" Content="" FontSize="100" FontWeight="Bold" 
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" RenderTransformOrigin="0.5,0.5">
    <Label.RenderTransform>
        <TransformGroup>
            <ScaleTransform/>
            <SkewTransform/>
            <RotateTransform/>
            <TranslateTransform x:Name="trans1"/>
        </TransformGroup>
    </Label.RenderTransform>
</Label>

위와 같이 TranslateTransform 을 만들어주시고 Name을 설정해 주셔야 편하게 하실 수 있습니다.

기타 설정들은 여러분 편하신대로 하시면 됩니다.

Animation 함수입니다.

void Animation(object sender, EventArgs e)
{
    if (isDa1Up == true)
    {
 
        da1.From = 0;
        da1.To = -distance;
        da1.Duration = duration_t;
    
        trans1.BeginAnimation(TranslateTransform.YProperty, da1);
 
        isDa1Up = false;
    }
    else
    {
 
        index = GetNumber();
        lbl1.Content = arr[index];
 
        da1.From = distance;
        da1.To = 0;
        da1.Duration = duration_t;
 
        trans1.BeginAnimation(TranslateTransform.YProperty, da1);
 
        isDa1Up = true;
    }
}

아래 그림에서 2번이 메인으로 보이는 곳입니다.

애니메이션을 3 ~ 2로 올라가는 경우와 2~ 1 로 올라가는 경우 2단계로 나누었습니다.

isDa1Up 이 true 일 경우 2 ~ 1 인 것이고, false인 경우 3 ~ 2 인 것입니다. false인 경우에 label의 내용을 바꾸었고, 시작할 때에는 true에서 시작하고, 정지해야 하면 false에서 멈추면 됩니다.

distance 는 1, 2, 3 의 높이 입니다. 다 같은걸로 생각하여 distance로 했고, -일 경우 위쪽이며, +일 경우 아래쪽입니다.

그래서 distance는 lbl1의 ActualHeight 로 사용합니다.

Duration은 애니메이션이 진행되는 시간입니다. duration_t는 시간을 TimeSpan 변수로 나타낸 것입니다.

label이 한개면 돌아가는 모습이 예쁘지 않습니다. 예쁘게 보이려면 label 2개를 사용하여 각각 true인 경우와 false인 경우를 번갈아가며 돌아가게 하면 됩니다.

아래는 label 2개를 사용한 예 입니다. 키가 입력되면 돌아가기 시작하도록 했습니다.