wpf为加载'dot'进度设置动画

Question

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

 <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秒，是否有更简单的动画制作方法？

Answer 1

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

$().ready(function(){
    $(".datepicker").datepicker({
        debug:true;
  });     
});

Answer 2

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

首先在window.Resources中使用你的图像制作一个StoryBoard ..

<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();
    }
}