создание анимации в WP7 для записи звука - PullRequest
Новая
       8

создание анимации в WP7 для записи звука

0 голосов
/ 07 января 2012

Я делаю аудиозапись в своем приложении WP7. Я хочу показать пользователю некоторую базовую анимацию, например мигание одной очень маленькой красной кнопки или еще три маленьких кнопки одну за другой, пока запись не будет завершена. Пожалуйста, дайте мне знать, как добиться этой анимации в WP7. Я не уверен, как использовать инструменты смешивания выражений для анимации.

1 Ответ

1 голос
/ 07 января 2012

По сути, это именно то, что вам нужно, чтобы Expression Blend создавал анимацию раскадровки, потому что это делает его намного проще. Однако в основном вы просто хотите поместить некоторые объекты (в данном случае мы будем использовать эллипсы в качестве примера) на поверхность вашего дизайна, а затем установить их непрозрачность для ключевых кадров раскадровки. Я пошел дальше и сделал вам быстрый пример того, что, как вы думаете, вы просите, вы можете настроить в соответствии со своими потребностями. Надеюсь, это поможет, в противном случае вы можете захотеть прочитать или посмотреть краткое руководство по анимации раскадровки и узнать, что ControlStoryboardAction и 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>
...