Mike Taulty's Blog: Visual Layer Experiment 2.5

2016-01-07 10:56:02来源:作者:Mike Taulty's Blog人点击

Back inthis 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!