WPF之 使用Storyboard故事板做动画效果

**


通过Storyboard实现位移和透明度变化动画效果


第一种方式通过Window.Resources在XAML中写的

**

  <Grid>
        <Border x:Name="bor" Background="LightBlue" Margin="0,100,0,-100" Opacity="1"></Border>
        <Button x:Name="btn" Width="100" Height="40" ></Button>
    </Grid>
 <Window.Resources>
        <Storyboard x:Key="sb">
            <ThicknessAnimation Duration="0:0:1" From="0,100,0,-100" To="0,0,0,0" Storyboard.TargetProperty="Margin" Storyboard.TargetName="bor" />
            <DoubleAnimation Duration="0:0:1" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="bor"/>
        </Storyboard>
    </Window.Resources>

怎么触发呢!!!

 <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
            <BeginStoryboard Storyboard="{StaticResource sb}">
                
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

第二种方式 通过Button的Click事件触发

 ThicknessAnimation thicknessAnimation = new ThicknessAnimation();
            thicknessAnimation.Duration = new TimeSpan(0, 0, 0, 1);
            thicknessAnimation.From = new Thickness(0, 100, 0, -100);
            thicknessAnimation.To = new Thickness(0, 0, 0, 0);
            //this.bor.BeginAnimation(MarginProperty, thicknessAnimation);

            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.Duration = new TimeSpan(0, 0, 0, 1);
            doubleAnimation.From = 0;
            doubleAnimation.To = 1;
            //this.bor.BeginAnimation(OpacityProperty, doubleAnimation);

            Storyboard storyboard = new Storyboard();
            storyboard.Children.Add(thicknessAnimation);
            storyboard.Children.Add(doubleAnimation);

            Storyboard.SetTarget(thicknessAnimation, this.bor);
            Storyboard.SetTargetProperty(thicknessAnimation, new PropertyPath("Margin"));
            Storyboard.SetTarget(doubleAnimation, this.bor);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Opacity"));
            storyboard.Begin();

效果图
请添加图片描述

WPF(Windows Presentation Foundation)中,使用Storyboard创建动画是一种常见的方法。Storyboard允许你定义一个或多个动画效果,并控制它们的播放顺序和时间。以下是一个简单的步骤来创建一个基本的Storyboard动画: 1. **定义Storyboard**: 首先,你需要在XAML文件中定义一个StoryboardStoryboard可以包含一个或多个Animation元素,如TranslateTransform, RotateTransform等。 2. **设置Storyboard属性**: 你可以设置Storyboard的Duration属性来定义动画的持续时间,以及AutoReverse属性来控制动画是否自动反向播放。 3. **添加Animation到Storyboard**: 将需要的Animation元素添加到Storyboard中。例如,如果你想移动一个按钮,可以使用DoubleAnimation来改变其位置属性。 4. **触发Storyboard**: 最后,需要在某个事件触发时开始Storyboard动画。这可以通过代码或者XAML中的Trigger来实现。 下面是一个具体的例子,展示了如何在WPF使用Storyboard创建一个按钮从左到右移动的动画: ```xml <Window x:Class="WpfApp.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Button Name="myButton" Content="Move Me" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75"/> <Button Content="Start Animation" Width="100" Height="30" Click="StartAnimation_Click" HorizontalAlignment="Center" VerticalAlignment="Bottom"/> <Storyboard x:Key="myStoryboard"> <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.X)" From="0" To="200" Duration="0:0:2"/> </Storyboard> </Grid> </Window> ``` 在这个例子中,当用户点击“Start Animation”按钮时,会触发StartAnimation_Click事件处理器,该处理器启动名为“myStoryboard”的Storyboard动画,使“myButton”按钮在2秒内水平移动200像素。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值