Question

背景不断变换从一个渐变到另一个非常漂亮。我不知道从哪里开始？以下是截图：

Answer 1

这是一个简单的例子：

<强> XAML

<Page
    x:Class="GradientAnimation.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:GradientAnimation"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Storyboard x:Key="GradientAnimation" RepeatBehavior="Forever" SpeedRatio="0.2">
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="MyGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[0].(GradientStop.Color)"
                EnableDependentAnimation="True"
                BeginTime="-0:0:0.5">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FF0000"/>
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FFFF00"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#00FF00"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#00FFFF"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#0000FF"/>
                <LinearColorKeyFrame KeyTime="0:0:5" Value="#FF00FF"/>
                <LinearColorKeyFrame KeyTime="0:0:6" Value="#FF0000"/>
            </ColorAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames
                Storyboard.TargetName="MyGrid"
                Storyboard.TargetProperty="(UIElement.Background).(LinearGradientBrush.GradientStops)[1].(GradientStop.Color)"
                EnableDependentAnimation="True">
                <LinearColorKeyFrame KeyTime="0:0:0" Value="#FF0000"/>
                <LinearColorKeyFrame KeyTime="0:0:1" Value="#FFFF00"/>
                <LinearColorKeyFrame KeyTime="0:0:2" Value="#00FF00"/>
                <LinearColorKeyFrame KeyTime="0:0:3" Value="#00FFFF"/>
                <LinearColorKeyFrame KeyTime="0:0:4" Value="#0000FF"/>
                <LinearColorKeyFrame KeyTime="0:0:5" Value="#FF00FF"/>
                <LinearColorKeyFrame KeyTime="0:0:6" Value="#FF0000"/>
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </Page.Resources>

    <Grid x:Name="MyGrid">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Offset="0"/>
                <GradientStop Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>

        <StackPanel VerticalAlignment="Center" Margin="10,0">
            <TextBlock Text="My App" FontSize="30" FontWeight="Bold" HorizontalAlignment="Center"/>
            <TextBox PlaceholderText="Username" Margin="0,40,0,0"/>
            <TextBox PlaceholderText="Password" Margin="0,10,0,0"/>
            <Button Margin="0,20,0,0" Content="Log in" HorizontalAlignment="Center"/>
        </StackPanel>
    </Grid>
</Page>

<强> CS

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        ((Storyboard)Resources["GradientAnimation"]).Begin();
    }
}

您可能不希望使用我在此示例中饱和的颜色。根据自己的喜好调整它们。同时根据自己的喜好调整SpeedRatio。

如何动画网格背景像Instagram uwp应用程序？

1 个答案: