■ DoubleAnimation 클래스의 EasingFunction 속성을 사용하는 방법을 보여준다.
▶ CustomEasingFunction.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 Windows.UI.Xaml.Media.Animation; namespace TestProject { /// <summary> /// 커스텀 완화 함수 /// </summary> public class CustomEasingFunction { //////////////////////////////////////////////////////////////////////////////////////////////////// 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 생성자 - CustomEasingFunction(name, easingFunctionBase) /// <summary> /// 생성자 /// </summary> /// <param name="name">명칭</param> /// <param name="easingFunctionBase">완화 함수 (베이스)</param> public CustomEasingFunction(string name, EasingFunctionBase easingFunctionBase) { Name = name; EasingFunctionBase = easingFunctionBase; } #endregion } } |
▶ MainPage.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 |
<Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Grid.Column="0" Width="500" Height="450"> <Grid.Resources> <Storyboard x:Name="storyboard"> <DoubleAnimation Storyboard.TargetName="translationTransform" Storyboard.TargetProperty="X" Duration="0:0:0.5" /> </Storyboard> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Button Grid.Column="0" Width="100" Height="30" Content="애니메이션" Click="animateButton_Click" /> <Rectangle Grid.Column="1" Width="50" Height="50" Fill="{ThemeResource SystemAccentColor}"> <Rectangle.RenderTransform> <TranslateTransform x:Name="translationTransform" /> </Rectangle.RenderTransform> </Rectangle> </Grid> <StackPanel Grid.Column="2" VerticalAlignment="Top" Spacing="10"> <ComboBox Name="easingModeComboBox" DisplayMemberPath="Name" SelectedValuePath="EasingFunctionBase" ItemsSource="{x:Bind CustomEasingFunctionList}" Loaded="easingModeComboBox_Loaded" /> <muxc:RadioButtons> <RadioButton Name="easeOutRadioButton" IsChecked="True" Content="EaseOut" /> <RadioButton Name="easeInRadioButton" Content="EaseIn" /> <RadioButton Name="easeInOutRadioButton" Content="EaseInOut" /> </muxc:RadioButtons> </StackPanel> </Grid> </Grid> </Page> |
▶ MainPage.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 |
using System.Collections.Generic; using Windows.Foundation; using Windows.Graphics.Display; using Windows.UI.ViewManagement; using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media.Animation; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Private #region 커스텀 완화 함수 리스트 - CustomEasingFunctionList /// <summary> /// 커스텀 완화 함수 리스트 /// </summary> private List<CustomEasingFunction> CustomEasingFunctionList { get; } = new List<CustomEasingFunction>() { new CustomEasingFunction("BackEase" , new BackEase() ), new CustomEasingFunction("BounceEase" , new BounceEase() ), new CustomEasingFunction("CircleEase" , new CircleEase() ), new CustomEasingFunction("CubicEase" , new CubicEase() ), new CustomEasingFunction("ElasticEase" , new ElasticEase() ), new CustomEasingFunction("ExponentialEase", new ExponentialEase()), new CustomEasingFunction("PowerEase" , new PowerEase() ), new CustomEasingFunction("QuadraticEase" , new QuadraticEase() ), new CustomEasingFunction("QuarticEase" , new QuarticEase() ), new CustomEasingFunction("QuinticEase" , new QuinticEase() ), new CustomEasingFunction("SineEase" , new SineEase() ) }; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); #region 윈도우 크기를 설정한다. double width = 800d; double height = 600d; double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi; ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize; Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi); ApplicationView.PreferredLaunchViewSize = windowSize; Window.Current.Activate(); ApplicationView.GetForCurrentView().TryResizeView(windowSize); #endregion #region 윈도우 제목을 설정한다. ApplicationView.GetForCurrentView().Title = "DoubleAnimation 클래스 : EasingFunction 속성 사용하기"; #endregion } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 애니메이션 버튼 클릭시 처리하기 - animateButton_Click(sender, e) /// <summary> /// 애니메이션 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void animateButton_Click(object sender, RoutedEventArgs e) { EasingFunctionBase easingFunctionBase = this.easingModeComboBox.SelectedValue as EasingFunctionBase; easingFunctionBase.EasingMode = GetEasingMode(); (this.storyboard.Children[0] as DoubleAnimation).EasingFunction = easingFunctionBase; this.storyboard.Children[0].SetValue(DoubleAnimation.FromProperty, this.translationTransform.X ); this.storyboard.Children[0].SetValue(DoubleAnimation.ToProperty , this.translationTransform.X > 0 ? 0 : 200); this.storyboard.Begin(); } #endregion #region 완화 모드 콤보 박스 로드시 처리하기 - easingModeComboBox_Loaded(sender, e) /// <summary> /// 완화 모드 콤보 박스 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void easingModeComboBox_Loaded(object sender, RoutedEventArgs e) { this.easingModeComboBox.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 } } |
