Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF: Animating TranslateTransform from code

Tags:

I have a WPF canvas on which I'm dynamically creating objects from code. These objects are being transformed by setting the RenderTransform property, and an animation needs to be applied one of those transforms. Currently, I can't get properties of any transform to animate (although no exception gets raised and the animation appears to run - the completed event gets raised).

In addition, if the animation system is stressed, sometimes the Storyboard.Completed event is never raised.

All the examples I've come accross animate the transforms from XAML. MSDN documentation suggests that the x:Name property of a transform must be set for it to be animatable, but I haven't found a working way to set it from code.

Any ideas?

Here's the full code listing that reproduces the problem:

using System; using System.Diagnostics; using System.Windows; using System.Windows.Controls; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes;  namespace AnimationCompletedTest {     /// <summary>     /// Interaction logic for MainWindow.xaml     /// </summary>     public partial class MainWindow : Window {          Canvas panel;         public MainWindow() {             InitializeComponent();             MouseDown += DoDynamicAnimation;              Content = panel = new Canvas();         }          void DoDynamicAnimation(object sender, MouseButtonEventArgs args) {              for (int i = 0; i < 12; ++i) {                 var e = new Ellipse {                     Width = 16,                     Height = 16,                     Fill = SystemColors.HighlightBrush                 };                 Canvas.SetLeft(e, Mouse.GetPosition(this).X);                 Canvas.SetTop(e, Mouse.GetPosition(this).Y);                  var tg = new TransformGroup();                 var translation = new TranslateTransform(30, 0);                 tg.Children.Add(translation);                 tg.Children.Add(new RotateTransform(i * 30));                 e.RenderTransform = tg;                  panel.Children.Add(e);                  var s = new Storyboard();                 Storyboard.SetTarget(s, translation);                 Storyboard.SetTargetProperty(s, new PropertyPath(TranslateTransform.XProperty));                  s.Children.Add(                     new DoubleAnimation(3, 100, new Duration(new TimeSpan(0, 0, 0, 1, 0))) {                         EasingFunction = new PowerEase {EasingMode = EasingMode.EaseOut}                     });                  s.Completed +=                      (sndr, evtArgs) => {                         Debug.WriteLine("Animation {0} completed {1}", s.GetHashCode(), Stopwatch.GetTimestamp());                         panel.Children.Remove(e);                     };                  Debug.WriteLine("Animation {0} started {1}", s.GetHashCode(), Stopwatch.GetTimestamp());                  s.Begin();             }         }          [STAThread]         public static void Main() {             var app = new Application();             app.Run(new MainWindow());         }     } } 
like image 349
Ronald Zarīts Avatar asked May 15 '10 17:05

Ronald Zarīts


1 Answers

Leave out the Storyboard:

var T = new TranslateTransform(40, 0); Duration duration = new Duration(new TimeSpan(0, 0, 0, 1, 0)); DoubleAnimation anim = new DoubleAnimation(30, duration); T.BeginAnimation(TranslateTransform.YProperty, anim); 

(small fix for syntax)

like image 131
Oliver Bock Avatar answered Sep 23 '22 09:09

Oliver Bock