5

我实际上是在使用图像动画“点点点”进度。我想通过下面的代码来使用不透明度。

 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.5" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
 <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.6" Storyboard.TargetProperty="Opacity" From="0" To="1"/>

动画将持续 3 秒，有没有更简单的动画方法？

4

2 回答 2

8

这是一个快速版本，在呈现控件时会自动启动动画。加载任务完成后，您可以隐藏堆栈面板。

在此处输入图像描述

<StackPanel Orientation="Horizontal">
  <StackPanel.Triggers>
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard Name="waitingAnimation" RepeatBehavior="Forever">
          <DoubleAnimation Storyboard.TargetName="Dot1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          <DoubleAnimation Storyboard.TargetName="Dot3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From=".1" To="1" AutoReverse="True" Duration="0:0:0.4"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
  </StackPanel.Triggers>
  <Ellipse Name="Dot1" Fill="White" Opacity=".1" Width="8" Height="8"/>
  <Ellipse Name="Dot2" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
  <Ellipse Name="Dot3" Fill="White" Opacity=".1" Width="8" Height="8" Margin="2,0,0,0"/>
</StackPanel>
于 2018-02-17T06:47:54.377 回答
2

这不是精确的解决方案。我想展示你如何解决你的问题..

首先使用您在窗口中的图像制作故事板。像这样的资源..

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="600" Width="600">

<Window.Resources>
    <Storyboard RepeatBehavior="Forever" x:Key="mystoryboard" Name="hello" >
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.1" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.2" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.3" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress3" BeginTime="0:0:0.4" Storyboard.TargetProperty="Opacity" From="1" To="0"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress1" BeginTime="0:0:0.5" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
        <DoubleAnimation Storyboard.TargetName="dotProgress2" BeginTime="0:0:0.6" Storyboard.TargetProperty="Opacity" From="0" To="1"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Image Name="dotProgress2" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="302,239,240,280"/>
    <Image Name="dotProgress3" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="249,315,293,204"/>
    <Image Name="dotProgress1" Source="/dot-md.png" Stretch="Fill" Height="50" Width="50" Margin="202,239,340,280"/>
    <Button Content="Button" HorizontalAlignment="Left" Margin="41,417,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click_1"/>

</Grid>

在按钮单击事件上，在代码后面运行此情节提要，或者您也可以触发。

 public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.DataContext = this;

    }

    private void Button_Click_1(object sender, RoutedEventArgs e)
    {
        Storyboard s = (Storyboard)TryFindResource("mystoryboard");
        s.Begin();
    }
}
于 2013-09-30T06:16:40.947 回答