Condividi tramite


Procedura: riprodurre contenuo multimediale con animazioni

Aggiornamento: novembre 2007

In questo esempio viene illustrato come riprodurre contenuto multimediale e animazioni contemporaneamente utilizzando le classi MediaTimeline e DoubleAnimationUsingKeyFrames nello stesso oggetto Storyboard.

Esempio

È possibile utilizzare uno o più oggetti MediaTimeline in un oggetto Storyboard con altri oggetti Timeline, ad esempio animazioni.

Nell'esempio seguente la proprietà SlipBehavior dell'oggetto Storyboard è impostata su un valore Slip, che specifica che l'animazione avanza solo quando avanza il contenuto multimediale (un video nell'esempio). Questa funzionalità può essere necessaria se la riproduzione multimediale è ritardata a causa del tempo di caricamento.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

    <!-- Upper right hand Canvas contains the animations. -->
    <Border BorderBrush="Black" BorderThickness="1"  Canvas.Left="250">
      <Canvas Width="250" Height="250" Background="White" >

        <!-- The two Path elements below create the purple and gold rings
             which are animated while the media is played. -->
        <Path Stroke="Purple" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry" 
            Center="125,125" RadiusX="15" RadiusY="10" />
          </Path.Data>
        </Path>
        <Path Stroke="Gold" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry2" 
            Center="125,125" RadiusX="10" RadiusY="15" />
          </Path.Data>
        </Path>
      </Canvas>
    </Border>

    <!-- Upper left hand Canvas contains the video. -->
    <Canvas Width="250" Height="250" Background="Green">
      <MediaElement Name="myvideo" Width="250" Height="250" 
       Canvas.Left="0" Canvas.Top="0">
        <MediaElement.Triggers>
          <EventTrigger RoutedEvent="MediaElement.Loaded">
            <EventTrigger.Actions>
              <BeginStoryboard>

                <!-- This Storyboard contains both media (video in this example) and animations. Note 
               the SlipBehavior value of "Slip" specifies that the animation does not progress
               until the media progresses. This might be desirable if media playback is delayed
               because of loading time. -->
                <Storyboard SlipBehavior="Slip">

                  <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
                  <MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>

                  <!-- The animations below animate the ellipses in the right hand pane. These animations are 
                 timed to correspond to the counting in the video. -->

                  <!-- Animate the RadiusY property of the purple ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry"
                    Storyboard.TargetProperty="RadiusY"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                  <!-- Animate the RadiusX property of the gold ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry2"
                    Storyboard.TargetProperty="RadiusX"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </MediaElement.Triggers>
      </MediaElement>
    </Canvas>

  </Canvas>
</Page>
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >
  <Canvas>

    <!-- Upper right hand Canvas contains the animations. -->
    <Border BorderBrush="Black" BorderThickness="1"  Canvas.Left="250">
      <Canvas Width="250" Height="250" Background="White" >

        <!-- The two Path elements below create the purple and gold rings
             which are animated while the media is played. -->
        <Path Stroke="Purple" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry" 
            Center="125,125" RadiusX="15" RadiusY="10" />
          </Path.Data>
        </Path>
        <Path Stroke="Gold" StrokeThickness="5">
          <Path.Data>
            <EllipseGeometry x:Name="MyEllipseGeometry2" 
            Center="125,125" RadiusX="10" RadiusY="15" />
          </Path.Data>
        </Path>
      </Canvas>
    </Border>

    <!-- Upper left hand Canvas contains the video. -->
    <Canvas Width="250" Height="250" Background="Green">
      <MediaElement Name="myvideo" Width="250" Height="250" 
       Canvas.Left="0" Canvas.Top="0">
        <MediaElement.Triggers>
          <EventTrigger RoutedEvent="MediaElement.Loaded">
            <EventTrigger.Actions>
              <BeginStoryboard>

                <!-- This Storyboard contains both media (video in this example) and animations. Note 
               the SlipBehavior value of "Slip" specifies that the animation does not progress
               until the media progresses. This might be desirable if media playback is delayed
               because of loading time. -->
                <Storyboard SlipBehavior="Slip">

                  <!-- The MediaTimeline controls the timing of the video and acts like other Timeline objects.  
                 For example, although the video clip (numbers.wmv) lasts longer, playback ends after six  
                 seconds because that is the duration of the MediaTimeline (Duration="0:0:6"). -->
                  <MediaTimeline Source="media\numbers.wmv" BeginTime="0:0:0" Duration="0:0:10"/>

                  <!-- The animations below animate the ellipses in the right hand pane. These animations are 
                 timed to correspond to the counting in the video. -->

                  <!-- Animate the RadiusY property of the purple ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry"
                    Storyboard.TargetProperty="RadiusY"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                  <!-- Animate the RadiusX property of the gold ellipse. -->
                  <DoubleAnimationUsingKeyFrames
                    Storyboard.TargetName="MyEllipseGeometry2"
                    Storyboard.TargetProperty="RadiusX"
                    RepeatBehavior="10x">
                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                      <LinearDoubleKeyFrame Value="80" KeyTime="0:0:0.4" />
                      <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:1" />
                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                  </DoubleAnimationUsingKeyFrames>

                </Storyboard>
              </BeginStoryboard>
            </EventTrigger.Actions>
          </EventTrigger>
        </MediaElement.Triggers>
      </MediaElement>
    </Canvas>

  </Canvas>
</Page>

Per l'esempio completo, vedere Raccolta di supporti.

Vedere anche

Attività

Raccolta di supporti

Concetti

Cenni preliminari sugli storyboard

Cenni preliminari sulle animazioni con fotogrammi chiave

Cenni preliminari sull'animazione

Cenni preliminari su supporti, animazione e grafica WPF

Riferimenti

MediaTimeline

DoubleAnimationUsingKeyFrames

Storyboard

SlipBehavior

Altre risorse

Procedure relative a contenuti audio e video