如何运行同时运行的多个色彩绽放动画?

时间:2016-12-28 12:49:11

标签: c# windows animation uwp windows-10

我最近一直在尝试新的Windows.UI.Composition API,当使用色彩绽放动画时,我一直试图从屏幕的每一侧同时运行其中的四个。我已经能够通过点击一个按钮来运行它们中的所有四个,但是我开始的最后一次转换总是最终接管显示器,例如:

这就是:

enter image description here

但应该发生的是,所有颜色应该同时填满屏幕。我怎么能这样做?

这是我用来启动动画的代码:

private void surroundBloomButton_Click(object sender, RoutedEventArgs e)
    {

        //all of these headers are actually textblocks I've placed on the sides of the grid.
        var header = topFlower;

        var headerPosition = topFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d));

        var header2 = rightFlower;

        var header2Position = rightFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d));

        var header3 = bottomFlower;

        var header3Position = bottomFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d));

        var header4 = leftFlower;

        var header4Position = leftFlower.TransformToVisual(UICanvas).TransformPoint(new Windows.Foundation.Point(0d, 0d));




        //Uses values of the textBlock size


        var initialBounds = new Windows.Foundation.Rect()
        {
            Width = header.RenderSize.Width,
            Height = header.RenderSize.Height,
            X = headerPosition.X,
            Y = headerPosition.Y
        };

        var finalBounds = Window.Current.Bounds; // maps to the bounds of the current window
        //The code is super easy to understand if you set a break point here and 
        //check to see what happens step by step ;)
        surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 255, 0, 0)),  // the color for the circlular bloom
                             initialBounds,                                  // the initial size and position
                                   finalBounds);                             // the area to fill over the animation duration

        // Add item to queue of transitions

        initialBounds = new Rect()
        {
            Width = header2.RenderSize.Width,
            Height = header2.RenderSize.Height,
            X = header2Position.X,
            Y = header2Position.Y
        };

        surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 255, 150, 0)),  // the color for the circlular bloom
                           initialBounds,                                  // the initial size and position
                                 finalBounds);                             // the area to fill over the animation duration

        initialBounds = new Rect()
        {
            Width = header3.RenderSize.Width,
            Height = header3.RenderSize.Height,
            X = header3Position.X,
            Y = header3Position.Y
        };

        surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 0, 255, 0)),  // the color for the circlular bloom
                           initialBounds,                                  // the initial size and position
                                 finalBounds);                             // the area to fill over the animation duration

        initialBounds = new Rect()
        {
            Width = header4.RenderSize.Width,
            Height = header4.RenderSize.Height,
            X = header4Position.X,
            Y = header4Position.Y
        };

        surroundButtonTransition.Start((Windows.UI.Color.FromArgb(255, 0, 0, 255)),  // the color for the circlular bloom
                           initialBounds,                                  // the initial size and position
                                 finalBounds);                             // the area to fill over the animation duration
    }

   private void SurroundButtonTransition_ColorBloomTransitionCompleted(object sender, EventArgs e)
    {
        //Changes colour of background to "White Smoke " when 
        //the animations have finished.
        UICanvas.Background = new SolidColorBrush(Windows.UI.Colors.WhiteSmoke);
    }

1 个答案:

答案 0 :(得分:0)

正如您所说,您最近正在尝试新的Windows.UI.Composition API以及使用色彩绽放动画时。

由于您没有发布我使用GitHub中的ColorBloomTransitionHelper ContainerVisual.Children.InsertAtTop的代码。它使用ContainerVisual.Children方法在视觉集合的顶部插入新的视觉效果。

此外,没有方法可以在同一个zindex中添加新视觉效果,而不是surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 255, 0, 0)), initialBounds, finalBounds); surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 255, 150, 0)), initialBounds, finalBounds); surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 0, 255, 0)), initialBounds, finalBounds); surroundButtonTransition.Start((Windows.UI.Color.FromArgb(100, 0, 0, 255)), initialBounds, finalBounds); 中的其他视觉效果。请查看VisualCollection class中的方法。

如果您希望所有颜色同时填满屏幕,您应该可以更改颜色的Alpha值。

例如:

allowsEditing