.NET MAUI에서 애니메이션 수행 알아보기: 파트 1

Wikipedia에 따르면 "Animation은 도형을 움직이는 물체로 보이도록 조작하는 방법입니다."앱의 애니메이션은 매력적인 UI와 더 나은 응답성을 제공하는 데 필수적입니다. .NET Multi-platform App UI (.NET MAUI) 앱과 같은 크로스 플랫폼 애플리케이션도 더 매력적으로 보이도록 애니메이션이 필요합니다.

.NET MAUI에서는 두 종류의 애니메이션을 적용할 수 있습니다.

기본 애니메이션

로또 애니메이션

이 블로그에서는 이러한 애니메이션 방법을 간단히 살펴보겠습니다.

.NET MAUI 기본 애니메이션

Microsoft documentation에 명시된 바와 같이, ".NET 다중 플랫폼 앱 UI(.NET MAUI) 애니메이션 클래스는 시각적 요소의 다양한 속성을 대상으로 하며, 일반적인 기본 애니메이션은 일정 기간 동안 속성을 한 값에서 다른 값으로 점진적으로 변경합니다. .”

내장 애니메이션

.NET MAUI에서 사용할 수 있는 네 가지 기본 내장 애니메이션이 있습니다.

페이드

회전

저울

번역하다

바래다

페이드 애니메이션은 불투명도를 변경하여 보기를 페이드 인 및 페이드 아웃할 수 있습니다. 다음 코드 예제를 참조하십시오.

this.fadeInImage.Opacity = 0;

//Fade in
await this.fadeInImage.FadeTo(1, 2000);

//Fade out
await this.fadeInImage.FadeTo(0, 2000);

회전

회전 지원을 사용하여 보기를 회전합니다. 일반 , 수직 , 수평 또는 상대 회전 을 사용할 수 있습니다.

다음 코드 예제를 참조하십시오.

this.rotateImage.Rotation = 0;

// General rotation
await this.rotateImage.RotateTo(360, 2000);

// Vertical rotation
await this.rotateImage.RotateXTo(360 , 2000);

// Horizontal rotation
await this.rotateImage.RotateYTo(360, 2000);

참고: 또한 각각 RotateXTo , RotateYTo 및 RelRotateTo API를 사용하여 수평, 수직 및 상대적으로 회전할 수 있습니다.

규모

Scale 속성을 사용하여 보기의 크기를 조정할 수 있습니다. 배율 조정에는 vertical , horizontal , aspect 및 relative의 네 가지 유형이 있습니다.

다음 코드 예제를 참조하십시오.

// Zoom in
await this.scaleImage.ScaleTo(1, 2000);

// Zoom out
await this.scaleImage.ScaleTo(0, 2000);

// Horizontal scaling
await this.scaleImage.ScaleXTo(1, 2000);
await this.scaleImage.ScaleXTo(0, 2000);

// Vertical scaling
await this.scaleImage.ScaleYTo(1, 2000);
await this.scaleImage.ScaleYTo(0, 2000);

참고: 각각 ScaleXTo , SacleYTo 및 RelScaleTo API를 사용하여 가로, 세로 및 상대적으로 확장할 수도 있습니다.

번역하다

애니메이션을 사용하여 보기를 다른 위치로 변환할 수 있습니다. 다음 코드 예제를 참조하십시오.

// Translate to right
await this.translateImage.TranslateTo(50, 0, 1000);

// Translate to bottom
await this.translateImage.TranslateTo(0, 50, 1000);

// Translate to left
await this.translateImage.TranslateTo(-50, 0, 1000);

// Translate to top
await this.translateImage.TranslateTo(0, -50, 1000);

// Diagonal translation
await this.translateImage.TranslateTo(50, 50, 1000);

참고: easing functions 을 사용하여 이러한 애니메이션을 만들 수도 있습니다.

롯데 애니메이션

Lottie 애니메이션은 .NET MAUI 앱에서 사용할 수 있는 무료 오픈 소스 패키지입니다. 애니메이션 콘텐츠가 포함된 JSON 파일을 사용하여 요소에 애니메이션을 적용합니다. Lottie 애니메이션에는 다양한 옵션이 있습니다.

.NET MAUI 애플리케이션에 Lottie 애니메이션을 추가하려면 다음 단계를 따르십시오.

1단계: 먼저 .NET MAUI application을 생성합니다.

2단계: 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 NuGet 패키지 관리를 선택합니다. SkiaSharp.Extended.UI.Maui를 찾아 패키지를 설치합니다.

3단계: 그런 다음 MauiProgram.cs 파일을 열고 다음 코드와 같이 SkiaShap을 구성합니다.

using SkiaSharp.Views.Maui.Controls.Hosting;
builder.UseSkiaSharp();

4단계: MainPage.xaml로 이동하여 SkiaSharp 네임스페이스를 추가합니다. 다음 코드를 참조하십시오.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
             x:Class="MAUIAnimations.MainPage">

5단계: 마지막으로 RepeatCount, Repeat Mode 및 Source 옵션을 사용하여 SkLottieView를 추가합니다.

참고: 앱에 애니메이션을 추가하는 데 사용할 수 있는 JSON 파일 목록은 LottieFiles을 참조하십시오. JSON 파일을 준비한 후 Resource-> Raw Folder에 추가합니다.

다음 코드 예제를 참조하십시오.

<skia:SKLottieView RepeatCount="-1"
                   RepeatMode="Reverse"
                   Source="example.json"
                   WidthRequest="300"
                   HeightRequest="300"/>

.NET MAUI 애니메이션

결론

읽어 주셔서 감사합니다! 이제 .NET MAUI 애플리케이션에 애니메이션을 추가하는 방법을 알았기를 바랍니다. 이 블로그의 2부에서는 .NET MAUI의 사용자 지정 애니메이션을 살펴보겠습니다!

Syncfusion.NET MAUI 컨트롤은 .NET MAUI를 사용하여 처음부터 작성되었으므로 프레임워크 컨트롤처럼 느껴집니다. 그들은 엄청난 양의 데이터로 작업하도록 미세 조정되었습니다. 이를 사용하여 크로스 플랫폼 모바일 및 데스크탑 앱을 구축하십시오!

현재 고객의 경우 새로운 Essential Studio 버전을 License and Downloads 페이지에서 다운로드할 수 있습니다. 아직 Syncfusion 고객이 아닌 경우 언제든지 당사free evaluation 를 다운로드하여 작동 중인 모든 컨트롤을 확인할 수 있습니다.

궁금한 사항은 support forum , support portal 또는 feedback portal 을 통해 문의할 수 있습니다. 기꺼이 도와드리겠습니다!

관련 블로그

Add Busy Notifications to Your .NET MAUI Application

What’s New in .NET MAUI: 2022 Volume 2

Easy Steps to Create an Investment (SIP) Calculator in .NET MAUI

Page Navigation in .NET MAUI: An Overview