Visual Layer Experiment 2.5

Posted on by

Back in this post for some reason I couldn’t get a colour animation to work with a spinning rectangle. That is, I managed to get a bunch of spinning rectangles onto the screen that were animating their angle of rotation and their opacity but I couldn’t get them to animate their fill colour.

I set about trying to make a simple repro of this ‘problem’ this morning and, as far as I can tell, things are working fine. If I make a simple UI with a XAML Grid called myGrid and put this code behind it;

  using System;
  using System.Numerics;
  using Windows.UI;
  using Windows.UI.Composition;
  using Windows.UI.Xaml;
  using Windows.UI.Xaml.Controls;
  using Windows.UI.Xaml.Hosting;
  public sealed partial class MainPage : Page
  {
    public MainPage()
    {
      this.InitializeComponent();
      this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs e)
    {
      var elementVisual = ElementCompositionPreview.GetElementVisual(this.myGrid);
      var compositor = elementVisual.Compositor;

      // Make a visual which paints itself with a brush.
      SpriteVisual childVisual = compositor.CreateSpriteVisual();

      // Make a colour animation.
      var colourAnimation = compositor.CreateColorKeyFrameAnimation();
      colourAnimation.InsertKeyFrame(0.0f, Color.FromArgb(0xFF, 0xFF, 0x00, 0x00));
      colourAnimation.InsertKeyFrame(0.5f, Color.FromArgb(0xFF, 0xFF, 0xFF, 0x00));
      colourAnimation.InsertKeyFrame(1.0f, Color.FromArgb(0xFF, 0xFF, 0x00, 0x00));

      colourAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
      colourAnimation.Duration = TimeSpan.FromSeconds(5);

      // Make a rotation animation.
      var rotationAnimation = compositor.CreateScalarKeyFrameAnimation();
      rotationAnimation.InsertKeyFrame(0.0f, 0.0f);
      rotationAnimation.InsertKeyFrame(1.0f, 360.0f);
      rotationAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
      rotationAnimation.Duration = TimeSpan.FromSeconds(1);

      // Tell it how big it should be.
      childVisual.Size = new Vector2(200, 200);

      // Tell it how to paint itself
      childVisual.Brush = compositor.CreateColorBrush();
      childVisual.CenterPoint = new Vector3(100, 100, 0);
      childVisual.Brush.StartAnimation("Color", colourAnimation);
      childVisual.StartAnimation("RotationAngleInDegrees", rotationAnimation);

      ElementCompositionPreview.SetElementChildVisual(this.myGrid, childVisual);

    }
  }

Then, sure enough, I get a spinning rectangle that animates its fill colour over a 5 second interval from Red to Yellow and back again.

I’m not sure what I was doing wrong the last time I tried this but I thought I’d better set the record straight! Smile