制作'擦拭' WPF中的动画

时间:2015-08-29 09:37:08

标签: c# wpf animation

我希望创建一个类似于' wipe'使用WPF在Microsoft PowerPoint中创建动画。

简单地说,我想让图像在1秒内从左向右淡入。

这是我到目前为止的XAML,它同时淡化了所有图像:

var connection = new ActiveXObject("ADODB.Connection") ;
var connectionstring="Data Source=<server>;Initial Catalog=<catalog>;User ID=<user>;Password=<password>;Provider=SQLOLEDB";
connection.Open(connectionstring);
var rs = new ActiveXObject("ADODB.Recordset");
rs.Open("select COLUMN_NAME from information_schema.columns where table_name = 'Test'", connection);
rs.MoveFirst
while(!rs.eof)
{
   document.write(rs.fields(0));
   rs.movenext;
}
rs.close;
connection.close;

在后面的代码中,我只是在窗口加载时播放动画:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:WpfApplication2"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded">
    <Window.Resources>
        <Storyboard x:Key="fade">
            <DoubleAnimation From="0" To="1" Duration="0:0:1"
                             Storyboard.TargetName="logo"
                             Storyboard.TargetProperty="Opacity"/>

        </Storyboard>
    </Window.Resources>
    <Grid>
        <Image Source="image.png" x:Name="logo"/>
    </Grid>
</Window>

为了使图像淡入淡出,我需要添加到Storyboard标记,以便与PowerPoint上的擦除动画类似?

1 个答案:

答案 0 :(得分:1)

我自this博文发现了答案。我需要达到所需效果的代码与帖子中的代码相同,但我不需要第一张图片。 (UFO.jpg)

    <Window x:Class="LearnWPF.WipeEffect.Window1"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow">
    <Grid>
      <!--First image not needed.-->
      <!--<Image Source="Images/UFO.jpg" />-->
      <Image Source="Images/ladder.jpg">
        <Image.OpacityMask>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
              <GradientStop Offset="0" Color="Black" x:Name="BlackStop"/>
              <GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/>
          </LinearGradientBrush>
        </Image.OpacityMask>
      </Image> 
    </Grid>
  <Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <!--Duration changed to half a second as this is what I need. -->
            <DoubleAnimation Storyboard.TargetName="TransparentStop"
                             Storyboard.TargetProperty="Offset" By="1"  Duration="0:0:0.5"   />
            <DoubleAnimation Storyboard.TargetName="BlackStop"
                             Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5"
                             BeginTime="0:0:0.05" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Window.Triggers>
  </Window>