《wpf/XAML—“制作一个简单的动画”》

最新推荐文章于 2024-08-03 01:15:56 发布

龙文浩_

最新推荐文章于 2024-08-03 01:15:56 发布

阅读量592

点赞数

分类专栏： wpf/XAML专题文章标签： wpf/XAML专题

本文链接：https://blog.csdn.net/weixin_44548307/article/details/89197277

版权

wpf/XAML专题专栏收录该内容

41 篇文章 4 订阅

订阅专栏

在wpf中，动画效果是相对强烈的，下面我们来制作一则动画：
在这里插入图片描述
<Window x:Class=“MySecondWPF.AttributeAnimation”
xmlns=“http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=“http://schemas.microsoft.com/winfx/2006/xaml”

    Title="AttributeAnimation" Height="650" Width="1100">
<Window.Resources>
    <Style TargetType="Button">
        <Setter Property="Background" Value="White"></Setter>
        <Setter Property="BorderBrush" Value="White"></Setter>
        <Setter Property="Foreground" Value="Gray"></Setter>
    </Style>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*"></RowDefinition>
        <RowDefinition Height="20*"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2*"></ColumnDefinition>
        <ColumnDefinition Width="8*"></ColumnDefinition>
        <ColumnDefinition Width="2*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Grid Grid.Row="0" Grid.Column="1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <ColumnDefinition Width="1*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Click="btn_StartSports">我的电脑</Button>
    </Grid>
    <Grid Grid.Row="1" >
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <Image Source="1.jpg" Grid.Row="1" Name="MotionPicture" Width="10" ></Image>
    </Grid>
</Grid>

然后就可以看到它的页面效果如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190410222922547.?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0ODMwNw==,size_16,color_FFFFFF,t_70) 然后我们再写button的点击事件，如下： private void btn_StartSports(object sender, RoutedEventArgs e) { DoubleAnimation doubleAnimation = new DoubleAnimation(); doubleAnimation.From = MotionPicture.Width;//宽度变化 doubleAnimation.AccelerationRatio = 0.1;//开始加速 doubleAnimation.DecelerationRatio = 0.1;//开始减速 doubleAnimation.To = 250;//变化后的宽度 doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(3)); doubleAnimation.RepeatBehavior =new RepeatBehavior(1);//重复次数 MotionPicture.BeginAnimation(WidthProperty, doubleAnimation);//这里记得启动 } 然后上面就是动画的制作了。