2013-09-28 84 views
1

我實際上是使用圖像動畫「點點」進度。我想通過使用下面的代碼來使用不透明度。wpf動畫加載'點'進度

<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秒,是有動畫任何更簡單的方法?

+2

可以讓這個動畫故事板,並設置其重複的行爲重複.. – loop

+0

你可以給我的例子,我是新來WPF。謝謝。 – Fire

+0

爲非常簡單的解決方案..你可以直接使用加載器gif圖像..並且只是代表您設置visiblity .. – loop

回答

2

這不是確切的解決方案。我想告訴你如何在你的問題工作..

首先在這樣的window.Resources使用您的圖片做腳本..

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

謝謝,但我使用ObjectAnimationUsingKeyFrames來解決上述問題。 – Fire

1

這是一個快速的版本,將在控件呈現時自動啓動動畫。加載任務完成後,您可以隱藏堆疊面板。

enter image description here

<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>