(Xamarin.Forms) AnimationText 만들기

Text 에 Animation 을 적용하여 글자가 순서대로 커졌다가 작아지는 효과를 주는 방법입니다.

.NET Standard 프로젝트에 클래스를 추가하여 아래와 같이 코딩합니다.

using Xamarin.Forms;

namespace Test.Cntrol
{
    public class AnimationText : StackLayout
    {
        private const string AnimationName = "AnimatedTextAnimation";

        public static readonly BindableProperty IsRunningProperty
            = BindableProperty.Create(nameof(IsRunning), typeof(bool), typeof(AnimationText), default(bool));

        public static readonly BindableProperty TextProperty
            = BindableProperty.Create(nameof(Text), typeof(string), typeof(AnimationText), default(string));

        private Animation animation;

        public AnimationText()
        {
            Orientation = StackOrientation.Horizontal;
            Spacing = -1;
        }

        public bool IsRunning
        {
            get => (bool)GetValue(IsRunningProperty);
            set => SetValue(IsRunningProperty, value);
        }

        public string Text
        {
            get => (string)GetValue(TextProperty);
            set => SetValue(TextProperty, value);
        }

        public Color TextColor { get; set; } = Color.Blue;

        protected override void OnPropertyChanged(string propertyName = null)
        {
            base.OnPropertyChanged(propertyName);

            if (propertyName == nameof(IsRunning) && IsEnabled)
            {
                if (IsRunning)
                {
                    StartAnimation();
                }
                else
                {
                    StopAnimation();
                }
            }

            if (propertyName == nameof(Text))
            {
                InitAnimation();
            }
        }

        private void InitAnimation()
        {
            this.animation = new Animation();
            Children.Clear();

            if (string.IsNullOrWhiteSpace(Text)) return;

            var index = 0;
            foreach (var textChar in Text)
            {
                var label = new Label
                {
                    Text = textChar.ToString(),
                    TextColor = this.TextColor,
                    FontAttributes = FontAttributes.Bold,
                    FontSize = 12
                };

                Children.Add(label);

                var oneCharAnimationLength = (double)1 / (Text.Length + 1);

                this.animation.Add(index * oneCharAnimationLength, (index + 1) * oneCharAnimationLength, 
                  new Animation(v => label.Scale = v, 1, 1.75, Easing.Linear));
                this.animation.Add((index + 1) * oneCharAnimationLength, (index + 2) * oneCharAnimationLength, 
                  new Animation(v => label.Scale = v, 1.75, 1, Easing.Linear));

                this.animation.Add(index * oneCharAnimationLength, (index + 1) * oneCharAnimationLength, 
                  new Animation(v => label.TranslationY = v, 0, -10, Easing.Linear));
                this.animation.Add((index + 1) * oneCharAnimationLength, (index + 2) * oneCharAnimationLength, 
                  new Animation(v => label.TranslationY = v, -10, 0, Easing.Linear));

                index++;
            }
        }

        private void StartAnimation()
        {
            animation.Commit(this, AnimationName, 16, (uint)Children.Count * 200, Easing.Linear, null, () => true);
        }

        private void StopAnimation()
        {
            this.AbortAnimation(AnimationName);
        }
    }
}

 

이제 Page 의 화면단에 아래와 같이 컨트롤을 위치시킵니다.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Test"
             xmlns:cntrol="clr-namespace:Test.Cntrol"
             x:Class="Test.MainPage">

    <StackLayout>
        <Label Text="Welcome to Xamarin.Forms!" HorizontalOptions="Center" />
        <cntrol:AnimationText Text="Welcome to Xamarin.Forms" IsRunning="True" HorizontalOptions="Center"/>
    </StackLayout>

</ContentPage>

아래는 실행결과 입니다.

안드로이드, iOS 모두 정상적으로 동작합니다.^^