첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.
본 블로그는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 블로그 콘텐츠 향상을 위해 쓰여집니다.

728x90
반응형
728x170

TestProject.zip
0.02MB

▶ CustomEasingFunction.cs

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
    }
}

 

728x90

 

▶ MainPage.xaml

<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>

 

300x250

 

▶ MainPage.xaml.cs

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
    }
}
728x90
반응형
그리드형(광고전용)
Posted by 사용자 icodebroker

댓글을 달아 주세요