Question

我在WP7应用程序中进行了一些录音。我想向用户显示一些基本动画，比如一个非常小的红色按钮闪烁，或者三个小按钮一个接一个地闪烁，直到录制完成。请告诉我有关如何在WP7中实现此动画的任何想法。我不确定如何将表达式混合工具用于动画。

Answer 1

基本上，这是您希望Expression Blend创建Storyboard动画的确切内容，因为它使它变得如此简单。但是，基本上你只想在设计图面上放置一些对象（在本例中我们将使用省略号作为示例），然后将它们的不透明度设置为故事板的关键帧。我继续前进，让你快速举例说明我认为你要求的东西可以根据你的需要进行定制。希望它有所帮助，否则您可能希望阅读或观看Storyboard动画的快速教程，并了解ControlStoryboardAction＆amp; EventTriggers为你做的。我不会说它完美，但它将作为一个良好的开端。：）

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

在WP7中创建动画以进行录音

1 个答案: