Animated text so that the loop of letters in a circle

I have a text box that contains the letters ABC.

I would like letters to circulate. So the clockwise movement of C will be the first letter to start the circle, while C is part of the path around B, will begin to circulate, then A. When C reaches the top, I would like it to stop to B and then A will return so we have ABC again. Then repeat - I hope this makes sense.

My code (mostly copied) is below. Currently, all that happens is C, then the circle stops and then returns again, but A and B are not displayed to move

FROM#

void StartTextAnimations(object sender, RoutedEventArgs e)
    {
        txtABC.TextEffects = new TextEffectCollection();

        Storyboard sbRotate = new Storyboard();
        sbRotate.RepeatBehavior = RepeatBehavior.Forever;
        sbRotate.AutoReverse = false;

        for (int i = 0; i < txtABC.Text.Length; i++)
        {
            AddTextEffectForCharacter(i);
            AddRotationAnimation(sbRotate, i);
        }

        Timeline pause = FindResource("CharacterRotationPauseAnimation") as Timeline;
        sbRotate.Children.Add(pause);

        sbRotate.Begin(this);            
    }

    void AddTextEffectForCharacter(int charIndex)
    {
        TextEffect effect = new TextEffect();

        effect.PositionStart = charIndex;
        effect.PositionCount = 1;

        TransformGroup transGrp = new TransformGroup();
        transGrp.Children.Add(new TranslateTransform());
        transGrp.Children.Add(new RotateTransform());
        effect.Transform = transGrp;

        txtABC.TextEffects.Add(effect);
    }

    void AddRotationAnimation(Storyboard sbRotate, int charIndex)
    {
        DoubleAnimation anim = FindResource("CharacterRotationAnimation") as DoubleAnimation;

        SetBeginTime(anim, charIndex);

        string path = string.Format("TextEffects[{0}].Transform.Children[1].Angle", charIndex);

        PropertyPath propPath = new PropertyPath(path);
        Storyboard.SetTargetProperty(anim, propPath);

        sbRotate.Children.Add(anim);
    }

    void SetBeginTime(Timeline anim, int charIndex)
    {
        double totalMs = anim.Duration.TimeSpan.TotalMilliseconds;
        double offset = totalMs / 10;
        double resolvedOffset = offset * charIndex;
        anim.BeginTime = TimeSpan.FromMilliseconds(resolvedOffset);
    }

Xaml

      

    <DoubleAnimation
        x:Key="CharacterRotationAnimation"
        To="360"
        AccelerationRatio="0.5"
        DecelerationRatio="0.5"
        Duration="0:0:2"
        Storyboard.TargetName="txtABC"/>

    <DoubleAnimation
        x:Key="CharacterRotationPauseAnimation"
        Duration="0:0:8"
        Storyboard.TargetProperty="Opacity"/>        
</RibbonWindow.Resources>


<TextBlock Grid.Row="0" Grid.Column="2" Margin="10"
                x:Name="txtABC"
                Foreground="WhiteSmoke"
                Loaded="StartTextAnimations"
                Text="ABC"/>
+4
source share
1 answer

, , FindResource . , , , DoubleAnimation. , ( , ;)).

  • StartTextAnimations: for, , "c":

    //Reverse order applied
    for(int i = txtABC.Text.Length - 1; i >= 0; i--)
    {
        AddTextEffectForCharacter(i);
        AddRotationAnimation(sbRotate, i);
    }
    
  • AddRotationAnimation, :

    void AddRotationAnimation(Storyboard sbRotate, int charIndex)
    {
        DoubleAnimation anim = new DoubleAnimation(0, 360, new Duration(new TimeSpan(0, 0, 0, 3))); //0 to 360 over 3 seconds
        Storyboard.SetTargetName(anim, "txtABC"); 
        SetBeginTime(anim, charIndex);
    
        string path = string.Format("TextEffects[{0}].Transform.Children[1].Angle", charIndex);
    
        PropertyPath propPath = new PropertyPath(path);
    
        Storyboard.SetTargetProperty(anim, propPath);
    
        sbRotate.Children.Add(anim);
    }
    
  • SetBeginTime, ,

    void SetBeginTime(Timeline anim, int charIndex)
    {
        double totalMs = anim.Duration.TimeSpan.TotalMilliseconds;
        double offset = totalMs / 4.2; //slow, it, down.
        double resolvedOffset = offset * charIndex;
        anim.BeginTime = TimeSpan.FromMilliseconds(resolvedOffset);
    }
    

:

Rotating Symbols!

+2

Source: https://habr.com/ru/post/1619530/


All Articles