Animation in Codebehind für Schleife, mit RenderTransform

Question

Ist es möglich, die "Old School" Weise, in Codebehind statt Xaml zu animieren?

Ich möchte nur einen Pfeil, der auf etwas mit einem 'Bounce-Effekt' zeigt, was ich leicht in meiner eigenen for-Schleife machen könnte. Aber ich weiß nicht, wie man innerhalb der Schleife auffrischt oder eine Zeitverzögerung vornimmt. Ich habe das Bild bereits im Codebehind platziert. Alles, was ich diese einfache Animation tun wollen ...

public void validationArrow() 
{ 

    var validationArrow = new Image(); 
    validationArrow.Source = new BitmapImage(new Uri("/SlProject;component/arrow.png", UriKind.RelativeOrAbsolute)); 
    LayoutRoot.Children.Add(validationArrow); 
    validationArrow.Stretch = Stretch.None; 
    validationArrow.VerticalAlignment = System.Windows.VerticalAlignment.Top; 
    validationArrow.HorizontalAlignment = System.Windows.HorizontalAlignment.Left; 
    var arrowPosition = new TranslateTransform { X = 0, Y = 0 }; 
    validationArrow.RenderTransform = arrowPosition; 

    validationArrow.Name = "validationArrow"; 

    for (int i = 150; i >= 0; i--) 
    { 
     arrowPosition.X = i; 
     validationArrow.RenderTransform = arrowPosition; 
     // how can I refresh screen and do some timing here? 
    } 
} 

Answer 1

Es gibt keine Schule wie die alte Schule;) Hier, das sollten Sie auf Ihrem Weg helfen. Sie können mit den an die BuildEasing-Methode übergebenen Millisekunden- und Y-Übersetzungswerten spielen, um die Geschwindigkeit und die Entfernung des Bounce-Effekts zu ändern.

private void RunStoryboard() 
    { 
     var arrowImage = new Image(); 
     arrowImage.RenderTransform = new CompositeTransform(); 
     arrowImage.Source = new BitmapImage(new Uri("/SlProject;component/arrow.png", UriKind.RelativeOrAbsolute)); 
     LayoutRoot.Children.Add(arrowImage); 

     Storyboard storyboard = new Storyboard(); 
     storyboard.Children.Add(BuildKeyFrame(arrowImage)); 
     storyboard.Begin(); 
    } 

    private DoubleAnimationUsingKeyFrames BuildKeyFrame(Image target) 
    { 
     DoubleAnimationUsingKeyFrames kf = new DoubleAnimationUsingKeyFrames(); 
     Storyboard.SetTarget(kf, target); 
     Storyboard.SetTargetProperty(kf, new PropertyPath("(UIElement.RenderTransform).(CompositeTransform.TranslateY)")); 

     kf.KeyFrames.Add(BuildEasing(100, 10)); 
     kf.KeyFrames.Add(BuildEasing(200, 0)); 
     kf.KeyFrames.Add(BuildEasing(300, 10)); 
     kf.KeyFrames.Add(BuildEasing(400, 0)); 
     kf.KeyFrames.Add(BuildEasing(500, 10)); 
     kf.KeyFrames.Add(BuildEasing(600, 0)); 

     return kf; 
    } 

    private EasingDoubleKeyFrame BuildEasing(int ms, int value) 
    { 
     return new EasingDoubleKeyFrame() 
     { 
      KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0, 0, ms)), 
      Value = value 
     }; 
    }