在WP7中爲音頻錄製創建動畫

Question

我在WP7應用程序中做了一些錄音。我想向用戶顯示一些基本動畫，例如一個非常小的紅色按鈕閃爍，或者三個小按鈕依次閃爍直到錄製完成。請讓我知道如何在WP7中實現這個動畫。我不知道如何使用動畫表情混合工具。

Answer 1

本質上，這是您希望Expression Blend創建Storyboard動畫的確切內容，因爲它使它變得非常容易。然而，基本上你只是想在設計表面上放置一些對象（在這種情況下，我們將用橢圓作爲例子），然後將它們的不透明度設置爲故事板的關鍵幀。我繼續向你提供一個快速的例子，我想你可以根據自己的需求進行定製。希望它有幫助，否則你可能想要閱讀或觀看故事板動畫的快速教程，並且知道EventTriggers對於ya所做的事情。我不會說它的完美，但它將作爲一個好的開始。 :)

<Style x:Key="QuickAnimatedDots" TargetType="Button"> 
       <Setter Property="Background" Value="Transparent"/> 
       <Setter Property="BorderBrush" Value="{StaticResource 
PhoneForegroundBrush}"/> 
       <Setter Property="Foreground" Value="{StaticResource 
PhoneForegroundBrush}"/> 
       <Setter Property="BorderThickness" Value="{StaticResource 
PhoneBorderThickness}"/> 
       <Setter Property="FontFamily" Value="{StaticResource 
PhoneFontFamilySemiBold}"/> 
       <Setter Property="FontSize" Value="{StaticResource 
PhoneFontSizeMediumLarge}"/> 
       <Setter Property="Padding" Value="10,3,10,5"/> 
       <Setter Property="Template"> 
         <Setter.Value> 
           <ControlTemplate TargetType="Button"> 
             <Grid x:Name="grid" Background="Transparent" Width="55" Height="25"> 
               <Grid.Resources> 
                 <Storyboard x:Name="QuickNDirtyAnimatedDots" RepeatBehavior="Forever"> 
                   <ObjectAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Visibility)" 
Storyboard.TargetName="ellipse"> 
                     <DiscreteObjectKeyFrame KeyTime="0"> 
                       <DiscreteObjectKeyFrame.Value> 
                         <Visibility>Visible</Visibility> 
                       </DiscreteObjectKeyFrame.Value> 
                     </DiscreteObjectKeyFrame> 
                   </ObjectAnimationUsingKeyFrames> 
                   <ObjectAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Visibility)" 
Storyboard.TargetName="ellipse1"> 
                     <DiscreteObjectKeyFrame KeyTime="0:0:0.2"> 
                       <DiscreteObjectKeyFrame.Value> 
                         <Visibility>Visible</Visibility> 
                       </DiscreteObjectKeyFrame.Value> 
                     </DiscreteObjectKeyFrame> 
                   </ObjectAnimationUsingKeyFrames> 
                   <ObjectAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Visibility)" 
Storyboard.TargetName="ellipse2"> 
                     <DiscreteObjectKeyFrame KeyTime="0:0:0.4"> 
                       <DiscreteObjectKeyFrame.Value> 
                         <Visibility>Visible</Visibility> 
                       </DiscreteObjectKeyFrame.Value> 
                     </DiscreteObjectKeyFrame> 
                   </ObjectAnimationUsingKeyFrames> 
                   <DoubleAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Opacity)" 
Storyboard.TargetName="ellipse"> 
                     <EasingDoubleKeyFrame KeyTime="0" Value="1"/> 
                     <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0"/> 
                   </DoubleAnimationUsingKeyFrames> 
                   <DoubleAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Opacity)" 
Storyboard.TargetName="ellipse1"> 
                     <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/> 
                     <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="0"/> 
                   </DoubleAnimationUsingKeyFrames> 
                   <DoubleAnimationUsingKeyFrames 
Storyboard.TargetProperty="(UIElement.Opacity)" 
Storyboard.TargetName="ellipse2"> 
                     <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/> 
                     <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="0"/> 
                   </DoubleAnimationUsingKeyFrames> 
                 </Storyboard> 
               </Grid.Resources> 
               <VisualStateManager.VisualStateGroups> 
                 <VisualStateGroup x:Name="CommonStates"> 
                   <VisualState x:Name="Normal"/> 
                   <VisualState x:Name="MouseOver"/> 
                   <VisualState x:Name="Pressed"/> 
                   <VisualState x:Name="Disabled"/> 
                 </VisualStateGroup> 
               </VisualStateManager.VisualStateGroups> 
               <StackPanel Orientation="Horizontal"> 
                 <i:Interaction.Triggers> 
                   <i:EventTrigger EventName="Loaded" SourceName="grid"> 
                     <eim:ControlStoryboardAction Storyboard="{StaticResource 
QuickNDirtyAnimatedDots}"/> 
                   </i:EventTrigger> 
                 </i:Interaction.Triggers> 
                 <Ellipse x:Name="ellipse" HorizontalAlignment="Left" Width="15" 
Height="15" Stroke="#FFF50606" Visibility="Collapsed"> 
                   <Ellipse.Fill> 
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                       <GradientStop Color="#FF970404" Offset="0.809"/> 
                       <GradientStop Color="#FFDE0707" Offset="0.568"/> 
                       <GradientStop Color="#FFFDB4B4" Offset="0"/> 
                       <GradientStop Color="#FFFF0808" Offset="0.436"/> 
                       <GradientStop Color="#FF7A0303" Offset="0.988"/> 
                     </LinearGradientBrush> 
                   </Ellipse.Fill> 
                 </Ellipse> 
                 <Ellipse x:Name="ellipse1" HorizontalAlignment="Left" Width="15" 
Height="15" Stroke="#FFF50606" Margin="5,0" Visibility="Collapsed"> 
                   <Ellipse.Fill> 
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                       <GradientStop Color="#FF970404" Offset="0.809"/> 
                       <GradientStop Color="#FFDE0707" Offset="0.568"/> 
                       <GradientStop Color="#FFFDB4B4" Offset="0"/> 
                       <GradientStop Color="#FFFF0808" Offset="0.436"/> 
                       <GradientStop Color="#FF7A0303" Offset="0.988"/> 
                     </LinearGradientBrush> 
                   </Ellipse.Fill> 
                 </Ellipse> 
                 <Ellipse x:Name="ellipse2" HorizontalAlignment="Left" Width="15" 
Height="15" Stroke="#FFF50606" Visibility="Collapsed"> 
                   <Ellipse.Fill> 
                     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
                       <GradientStop Color="#FF970404" Offset="0.809"/> 
                       <GradientStop Color="#FFDE0707" Offset="0.568"/> 
                       <GradientStop Color="#FFFDB4B4" Offset="0"/> 
                       <GradientStop Color="#FFFF0808" Offset="0.436"/> 
                       <GradientStop Color="#FF7A0303" Offset="0.988"/> 
                     </LinearGradientBrush> 
                   </Ellipse.Fill> 
                 </Ellipse> 
               </StackPanel> 
             </Grid> 
           </ControlTemplate> 
         </Setter.Value> 
       </Setter> 
     </Style>