[C#/WINUI3/.NET6] ExpressionAnimation 클래스 : 관련된 복수 애니메이션을 함께 움직이기

■ ExpressionAnimation 클래스를 사용해 관련된 복수 애니메이션을 함께 움직이는 방법을 보여준다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Button Name="button1"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 1" />
            <Button Name="button2"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 2" />
            <Button Name="button3"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 3" />
            <Button Name="button4"
                Margin="5"
                Width="100"
                Height="50"
                Content="Item 4" />
        </StackPanel>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center">
            <RadioButtons Name="dampingRadioButtons"
                Header="Damping Ratio">
                <RadioButton Content="0.2" />
                <RadioButton Content="0.4" />
                <RadioButton Content="0.6" IsChecked="True" />
                <RadioButton Content="0.8" />
            </RadioButtons>
            <Slider Name="periodSlider"
                Header="Period (in ms)"
                Minimum="25"
                Maximum="200"
                TickFrequency="25"
                StepFrequency="25"
                Value="50" />
        </StackPanel>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Button Name="button1"

Margin="5"

Width="100"

Height="50"

Content="Item 1" />

<Button Name="button2"

Margin="5"

Width="100"

Height="50"

Content="Item 2" />

<Button Name="button3"

Margin="5"

Width="100"

Height="50"

Content="Item 3" />

<Button Name="button4"

Margin="5"

Width="100"

Height="50"

Content="Item 4" />

</StackPanel>

<StackPanel Grid.Column="2"

VerticalAlignment="Center">

<RadioButtons Name="dampingRadioButtons"

Header="Damping Ratio">

</RadioButtons>

<Slider Name="periodSlider"

Header="Period (in ms)"

Minimum="25"

Maximum="200"

TickFrequency="25"

StepFrequency="25"

Value="50" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

using Microsoft.UI.Composition;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Field
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region Field

        /// <summary>
        /// 합성자
        /// </summary>
        private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

        /// <summary>
        /// 스프링 벡터3 자연 동작 애니메이션
        /// </summary>
        private SpringVector3NaturalMotionAnimation springAnimation;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

        /// <summary>
        /// 생성자
        /// </summary>
        public MainPage()
        {
            InitializeComponent();

            Loaded                      += Page_Loaded;
            this.button1.PointerEntered += button_PointerEntered;
            this.button1.PointerExited  += button_PointerExited;
            this.button2.PointerEntered += button_PointerEntered;
            this.button2.PointerExited  += button_PointerExited;
            this.button3.PointerEntered += button_PointerEntered;
            this.button3.PointerExited  += button_PointerExited;
            this.button4.PointerEntered += button_PointerEntered;
            this.button4.PointerExited  += button_PointerExited;
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private
        //////////////////////////////////////////////////////////////////////////////// Event

        #region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

        /// <summary>
        /// 페이지 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void Page_Loaded(object sender, RoutedEventArgs e)
        {
            UpdateSpringAnimation(1.0f);

            ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

            animation.Expression = "(above.Scale.Y - 1) * 50 + above.Translation.Y % (50 * index)";
            animation.Target     = "Translation.Y";

            animation.SetExpressionReferenceParameter("above", this.button1);
            animation.SetScalarParameter("index", 1);

            this.button2.StartAnimation(animation);

            animation.SetExpressionReferenceParameter("above", this.button2);
            animation.SetScalarParameter("index", 2);

            this.button3.StartAnimation(animation);

            animation.SetExpressionReferenceParameter("above", this.button3);
            animation.SetScalarParameter("index", 3);

            this.button4.StartAnimation(animation);
        }

        #endregion
        #region 버튼 포인터 진입시 처리하기 - button_PointerEntered(sender, e)

        /// <summary>
        /// 버튼 포인터 진입시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1.5f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion
        #region 버튼 포인터 이탈시 처리하기 - button_PointerExited(sender, e)

        /// <summary>
        /// 버튼 포인터 이탈시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void button_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            UpdateSpringAnimation(1f);

            (sender as UIElement).StartAnimation(this.springAnimation);
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////// Function

        #region 댐핑 비율 구하기 - GetDampingRatio()

        /// <summary>
        /// 댐핑 비율 구하기
        /// </summary>
        /// <returns>댐핑 비율</returns>
        private float GetDampingRatio()
        {
            if(this.dampingRadioButtons.SelectedItem != null)
            {
                return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);
            }

            return 0.6f;
        }

        #endregion
        #region 기간 구하기 - GetPeriod()

        /// <summary>
        /// 기간 구하기
        /// </summary>
        /// <returns>기간</returns>
        private TimeSpan GetPeriod()
        {
            return TimeSpan.FromMilliseconds(this.periodSlider.Value);
        }

        #endregion
        #region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

        /// <summary>
        /// 스프링 애니메이션 업데이트하기
        /// </summary>
        /// <param name="finalValue">최종 값</param>
        private void UpdateSpringAnimation(float finalValue)
        {
            if(this.springAnimation == null)
            {
                this.springAnimation = this.compositor.CreateSpringVector3Animation();

                this.springAnimation.Target = "Scale";
            }

            this.springAnimation.FinalValue   = new Vector3(finalValue);
            this.springAnimation.DampingRatio = GetDampingRatio();
            this.springAnimation.Period       = GetPeriod();
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

using System;

using System.Numerics;

using Microsoft.UI.Composition;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

////////////////////////////////////////////////////////////////////////////////////////// Private

#region Field

/// <summary>

/// 합성자

/// </summary>

private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();

/// <summary>

/// 스프링 벡터3 자연 동작 애니메이션

/// </summary>

private SpringVector3NaturalMotionAnimation springAnimation;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

Loaded += Page_Loaded;

this.button1.PointerEntered += button_PointerEntered;

this.button1.PointerExited += button_PointerExited;

this.button2.PointerEntered += button_PointerEntered;

this.button2.PointerExited += button_PointerExited;

this.button3.PointerEntered += button_PointerEntered;

this.button3.PointerExited += button_PointerExited;

this.button4.PointerEntered += button_PointerEntered;

this.button4.PointerExited += button_PointerExited;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

//////////////////////////////////////////////////////////////////////////////// Event

#region 페이지 로드시 처리하기 - Page_Loaded(sender, e)

/// <summary>

/// 페이지 로드시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void Page_Loaded(object sender, RoutedEventArgs e)

{

UpdateSpringAnimation(1.0f);

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = "(above.Scale.Y - 1) * 50 + above.Translation.Y % (50 * index)";

animation.Target = "Translation.Y";

animation.SetExpressionReferenceParameter("above", this.button1);

animation.SetScalarParameter("index", 1);

this.button2.StartAnimation(animation);

animation.SetExpressionReferenceParameter("above", this.button2);

animation.SetScalarParameter("index", 2);

this.button3.StartAnimation(animation);

animation.SetExpressionReferenceParameter("above", this.button3);

animation.SetScalarParameter("index", 3);

this.button4.StartAnimation(animation);

}

#endregion

#region 버튼 포인터 진입시 처리하기 - button_PointerEntered(sender, e)

/// <summary>

/// 버튼 포인터 진입시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void button_PointerEntered(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1.5f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

#region 버튼 포인터 이탈시 처리하기 - button_PointerExited(sender, e)

/// <summary>

/// 버튼 포인터 이탈시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void button_PointerExited(object sender, PointerRoutedEventArgs e)

{

UpdateSpringAnimation(1f);

(sender as UIElement).StartAnimation(this.springAnimation);

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 댐핑 비율 구하기 - GetDampingRatio()

/// <summary>

/// 댐핑 비율 구하기

/// </summary>

/// <returns>댐핑 비율</returns>

private float GetDampingRatio()

{

if(this.dampingRadioButtons.SelectedItem != null)

{

return (float)Convert.ToDouble((this.dampingRadioButtons.SelectedItem as RadioButton).Content);

}

return 0.6f;

}

#endregion

#region 기간 구하기 - GetPeriod()

/// <summary>

/// 기간 구하기

/// </summary>

/// <returns>기간</returns>

private TimeSpan GetPeriod()

{

return TimeSpan.FromMilliseconds(this.periodSlider.Value);

}

#endregion

#region 스프링 애니메이션 업데이트하기 - UpdateSpringAnimation(finalValue)

/// <summary>

/// 스프링 애니메이션 업데이트하기

/// </summary>

/// <param name="finalValue">최종 값</param>

private void UpdateSpringAnimation(float finalValue)

{

if(this.springAnimation == null)

{

this.springAnimation = this.compositor.CreateSpringVector3Animation();

this.springAnimation.Target = "Scale";

}

this.springAnimation.FinalValue = new Vector3(finalValue);

this.springAnimation.DampingRatio = GetDampingRatio();

this.springAnimation.Period = GetPeriod();

}

#endregion

}

TestProject.zip