■ EasingFunctionBase 클래스를 사용해 애니메이션 효과를 만드는 방법을 보여준다.
▶ NamedEasingFunction.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
using Microsoft.UI.Xaml.Media.Animation; namespace TestProject { /// <summary> /// 명칭을 갖는 이징 함수 /// </summary> public class NamedEasingFunction { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get; private set; } #endregion #region 이징 함수 베이스 - EasingFunctionBase /// <summary> /// 이징 함수 베이스 /// </summary> public EasingFunctionBase EasingFunctionBase { get; private set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - NamedEasingFunction(name, easingFunctionBase) /// <summary> /// 생성자 /// </summary> /// <param name="name">명칭</param> /// <param name="easingFunctionBase">이징 함수 베이스</param> public NamedEasingFunction(string name, EasingFunctionBase easingFunctionBase) { Name = name; EasingFunctionBase = easingFunctionBase; } #endregion } } |
▶ MainWindow.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
<?xml version="1.0" encoding="utf-8"?> <Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="TestProject"> <StackPanel Margin="10"> <Grid> <Grid.Resources> <Storyboard x:Name="storyboard1"> <DoubleAnimation Storyboard.TargetName="translationTransform1" Storyboard.TargetProperty="X" Duration="00:00:00.5"> <DoubleAnimation.EasingFunction> <CircleEase EasingMode="EaseInOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Name="animateButton1" Content="Animate" /> <Rectangle Grid.Column="1" HorizontalAlignment="Left" Margin="10 0 0 0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.RenderTransform> <TranslateTransform x:Name="translationTransform1" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="0 30 0 0"> <Grid.Resources> <Storyboard x:Name="storyboard2"> <DoubleAnimation Storyboard.TargetName="translateTransform2" Storyboard.TargetProperty="X" Duration="00:00:00.15"> <DoubleAnimation.EasingFunction> <ExponentialEase Exponent="4.5" EasingMode="EaseIn" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Name="animateButton2" Content="Animate" /> <Rectangle Grid.Column="1" HorizontalAlignment="Left" Margin="10 0 0 0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.RenderTransform> <TranslateTransform x:Name="translateTransform2" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid Margin="0 30 0 0"> <Grid.Resources> <Storyboard x:Name="storyboard3"> <DoubleAnimation Storyboard.TargetName="translateTransform3" Storyboard.TargetProperty="X" Duration="00:00:00.3"> <DoubleAnimation.EasingFunction> <ExponentialEase Exponent="7" EasingMode="EaseOut" /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Name="animateButton3" Content="Animate" /> <Rectangle Grid.Column="1" HorizontalAlignment="Left" Margin="10 0 0 0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.RenderTransform> <TranslateTransform x:Name="translateTransform3" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <Grid> <Grid.Resources> <Storyboard x:Name="storyboard4"> <DoubleAnimation Storyboard.TargetName="translateTransform4" Storyboard.TargetProperty="X" Duration="00:00:00.5" /> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Button Name="animateButton4" Grid.Column="0" Content="Animate" /> <Rectangle Grid.Column="1" HorizontalAlignment="Left" Margin="10 0 0 0" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.RenderTransform> <TranslateTransform x:Name="translateTransform4" /> </Rectangle.RenderTransform> </Rectangle> <StackPanel Grid.Column="2"> <ComboBox Name="easingComboBox" DisplayMemberPath="Name" SelectedValuePath="EasingFunctionBase" ItemsSource="{x:Bind NamedEasingFunctionList}" /> <RadioButtons> <RadioButton Name="easeOutRadioButton" Content="EaseOut" IsChecked="True" /> <RadioButton Name="easeInRadioButton" Content="EaseIn" /> <RadioButton Name="easeInOutRadioButton" Content="EaseInOut" /> </RadioButtons> </StackPanel> </Grid> </StackPanel> </Window> |
▶ MainWindow.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 |
using System.Collections.Generic; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Media.Animation; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Public #region Field /// <summary> /// 명칭을 갖는 이징 함수 리스트 /// </summary> public List<NamedEasingFunction> NamedEasingFunctionList { get; } = new List<NamedEasingFunction>() { new NamedEasingFunction("BackEase" , new BackEase() ), new NamedEasingFunction("BounceEase" , new BounceEase() ), new NamedEasingFunction("CircleEase" , new CircleEase() ), new NamedEasingFunction("CubicEase" , new CubicEase() ), new NamedEasingFunction("ElasticEase" , new ElasticEase() ), new NamedEasingFunction("ExponentialEase", new ExponentialEase()), new NamedEasingFunction("PowerEase" , new PowerEase() ), new NamedEasingFunction("QuadraticEase" , new QuadraticEase() ), new NamedEasingFunction("QuarticEase" , new QuarticEase() ), new NamedEasingFunction("QuinticEase" , new QuinticEase() ), new NamedEasingFunction("SineEase" , new SineEase() ) }; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); this.animateButton1.Click += animateButton1_Click; this.animateButton2.Click += animateButton2_Click; this.animateButton3.Click += animateButton3_Click; this.animateButton4.Click += animateButton4_Click; this.easingComboBox.Loaded += easingComboBox_Loaded; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region Animate 버튼 1 클릭시 처리하기 - animateButton1_Click(sender, e) /// <summary> /// Animate 버튼 1 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void animateButton1_Click(object sender, RoutedEventArgs e) { this.storyboard1.Children[0].SetValue(DoubleAnimation.FromProperty, this.translationTransform1.X ); this.storyboard1.Children[0].SetValue(DoubleAnimation.ToProperty , this.translationTransform1.X > 0 ? 0 : 200); this.storyboard1.Begin(); } #endregion #region Animate 버튼 2 클릭시 처리하기 - animateButton2_Click(sender, e) /// <summary> /// Animate 버튼 2 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void animateButton2_Click(object sender, RoutedEventArgs e) { this.storyboard2.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform2.X ); this.storyboard2.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform2.X > 0 ? 0 : 200); this.storyboard2.Begin(); } #endregion #region Animate 버튼 3 클릭시 처리하기 - animateButton3_Click(sender, e) /// <summary> /// Animate 버튼 3 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void animateButton3_Click(object sender, RoutedEventArgs e) { this.storyboard3.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform3.X ); this.storyboard3.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform3.X > 0 ? 0 : 200); this.storyboard3.Begin(); } #endregion #region Animate 버튼 4 클릭시 처리하기 - animateButton4_Click(sender, e) /// <summary> /// Animate 버튼 4 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void animateButton4_Click(object sender, RoutedEventArgs e) { EasingFunctionBase easingFunctionBase = this.easingComboBox.SelectedValue as EasingFunctionBase; easingFunctionBase.EasingMode = GetEasingMode(); (this.storyboard4.Children[0] as DoubleAnimation).EasingFunction = easingFunctionBase; this.storyboard4.Children[0].SetValue(DoubleAnimation.FromProperty, this.translateTransform4.X ); this.storyboard4.Children[0].SetValue(DoubleAnimation.ToProperty , this.translateTransform4.X > 0 ? 0 : 200); this.storyboard4.Begin(); } #endregion #region 이징 콤보 박스 로드시 처리하기 - easingComboBox_Loaded(sender, e) /// <summary> /// 이징 콤보 박스 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void easingComboBox_Loaded(object sender, RoutedEventArgs e) { this.easingComboBox.SelectedIndex = 0; } #endregion //////////////////////////////////////////////////////////////////////////////// Function #region 이징 모드 구하기 - GetEasingMode() /// <summary> /// 이징 모드 구하기 /// </summary> /// <returns>이징 모드</returns> private EasingMode GetEasingMode() { if(this.easeOutRadioButton.IsChecked == true) { return EasingMode.EaseOut; } else if(this.easeInRadioButton.IsChecked == true) { return EasingMode.EaseIn; } else { return EasingMode.EaseInOut; } } #endregion } } |
