none
Endlos-Animation mit Pausen RRS feed

  • Frage

  • Hallo!

    Ich habe ich eine Endlos-Animation (drehende Sanduhr):

    <Path Fill="Black"  
        Data="m23,28h-1v-6c0-3.619-4-3.504-4-7 0-3.477 4-3.461 4-7v-6h1c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1h-16c-0.552,
                0-1,0.447-1,1 0,0.553 0.448,1 1,1h1v6c0,3.516 4,3.547 4,7 0,3.497-4,3.429-4,7v6h-1c-0.552,0-1,0.447-1,1 0,
                0.553 0.448,1 1,1h16c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1zm-3,0h-10v-6c0-2.305 4-2.976 4-7 0-4.036-4-4.787-4-7v-6h10v6c0,
                2.318-4,3.062-4,7 0,4.021 4,4.74 4,7v6zm-2-20h-6l3,3 3-3zm-7,19h8l-4-4-4,4z">
        <Path.LayoutTransform>
            <RotateTransform/>
        </Path.LayoutTransform>
        <Path.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation
                            Storyboard.TargetProperty="(Path.LayoutTransform).(RotateTransform.Angle)"
                            To="360" Duration="0:0:5" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Path.Triggers>
    </Path>

    Nun möchte ich, dass die Drehung nach jeweils 180° für ca. 5s stoppt.

    Wie könnte ich das erreichen?


    • Bearbeitet perlfred Dienstag, 22. Mai 2018 13:56
    Dienstag, 22. Mai 2018 13:55

Antworten

  • Hi Fred,
    Dein Problem kann ich nicht nachvollziehen.

    Mit meinem Code beginnt sich die Eieruhr innerhalb von 2.5 Sekunden um 180 Grad zu drehen. Dann steht sie 5 Sekunden. Danach dreht sie sich innerhalb von 2,5 Sekunden bis 360 Grad. Und alles beginnt von vorn. Wenn Sie nach der Drehung um 360 Grad wieder 5 Sekunden stehen bleiben soll, dann könnte das so aussehen:

        <Path Fill="Black"  
        Data="m23,28h-1v-6c0-3.619-4-3.504-4-7 0-3.477 4-3.461 4-7v-6h1c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1h-16c-0.552,
                0-1,0.447-1,1 0,0.553 0.448,1 1,1h1v6c0,3.516 4,3.547 4,7 0,3.497-4,3.429-4,7v6h-1c-0.552,0-1,0.447-1,1 0,
                0.553 0.448,1 1,1h16c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1zm-3,0h-10v-6c0-2.305 4-2.976 4-7 0-4.036-4-4.787-4-7v-6h10v6c0,
                2.318-4,3.062-4,7 0,4.021 4,4.74 4,7v6zm-2-20h-6l3,3 3-3zm-7,19h8l-4-4-4,4z">
          <Path.LayoutTransform>
            <RotateTransform/>
          </Path.LayoutTransform>
          <Path.Triggers>
            <EventTrigger RoutedEvent="Loaded">
              <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                            Storyboard.TargetProperty="(Path.LayoutTransform).(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:02.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:07.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:10.000" Value="360"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:15.000" Value="360"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Path.Triggers>
        </Path>


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    • Als Antwort markiert perlfred Mittwoch, 23. Mai 2018 08:23
    Mittwoch, 23. Mai 2018 07:38

Alle Antworten

  • Hi,
    nimm KeyFrames, z.B. so:

        <Path Fill="Black"  
        Data="m23,28h-1v-6c0-3.619-4-3.504-4-7 0-3.477 4-3.461 4-7v-6h1c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1h-16c-0.552,
                0-1,0.447-1,1 0,0.553 0.448,1 1,1h1v6c0,3.516 4,3.547 4,7 0,3.497-4,3.429-4,7v6h-1c-0.552,0-1,0.447-1,1 0,
                0.553 0.448,1 1,1h16c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1zm-3,0h-10v-6c0-2.305 4-2.976 4-7 0-4.036-4-4.787-4-7v-6h10v6c0,
                2.318-4,3.062-4,7 0,4.021 4,4.74 4,7v6zm-2-20h-6l3,3 3-3zm-7,19h8l-4-4-4,4z">
          <Path.LayoutTransform>
            <RotateTransform/>
          </Path.LayoutTransform>
          <Path.Triggers>
            <EventTrigger RoutedEvent="Loaded">
              <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                            Storyboard.TargetProperty="(Path.LayoutTransform).(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:02.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:07.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:10.000" Value="360"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Path.Triggers>
        </Path>


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    Dienstag, 22. Mai 2018 19:10
  • Hallo Peter!

    Danke für deine Antwort!

    Die 180° SplineDoubleKeyFrame werden nur bei dem ersten Durchlauf beachtet. In der weiteren Folge wird immer eine Drehung von 360° ausgeführt und 10s gewartet.

    Ist für meinem Zweck nicht schlimm, aber ich denke, dass Prinzip (RepeatBehavior Forever mit Pausen) funktioniert nicht.

    Mittwoch, 23. Mai 2018 07:22
  • Hi Fred,
    Dein Problem kann ich nicht nachvollziehen.

    Mit meinem Code beginnt sich die Eieruhr innerhalb von 2.5 Sekunden um 180 Grad zu drehen. Dann steht sie 5 Sekunden. Danach dreht sie sich innerhalb von 2,5 Sekunden bis 360 Grad. Und alles beginnt von vorn. Wenn Sie nach der Drehung um 360 Grad wieder 5 Sekunden stehen bleiben soll, dann könnte das so aussehen:

        <Path Fill="Black"  
        Data="m23,28h-1v-6c0-3.619-4-3.504-4-7 0-3.477 4-3.461 4-7v-6h1c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1h-16c-0.552,
                0-1,0.447-1,1 0,0.553 0.448,1 1,1h1v6c0,3.516 4,3.547 4,7 0,3.497-4,3.429-4,7v6h-1c-0.552,0-1,0.447-1,1 0,
                0.553 0.448,1 1,1h16c0.553,0 1-0.447 1-1 0-0.553-0.447-1-1-1zm-3,0h-10v-6c0-2.305 4-2.976 4-7 0-4.036-4-4.787-4-7v-6h10v6c0,
                2.318-4,3.062-4,7 0,4.021 4,4.74 4,7v6zm-2-20h-6l3,3 3-3zm-7,19h8l-4-4-4,4z">
          <Path.LayoutTransform>
            <RotateTransform/>
          </Path.LayoutTransform>
          <Path.Triggers>
            <EventTrigger RoutedEvent="Loaded">
              <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                  <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                            Storyboard.TargetProperty="(Path.LayoutTransform).(RotateTransform.Angle)">
                    <SplineDoubleKeyFrame KeyTime="00:00:02.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:07.500" Value="180"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:10.000" Value="360"/>
                    <SplineDoubleKeyFrame KeyTime="00:00:15.000" Value="360"/>
                  </DoubleAnimationUsingKeyFrames>
                </Storyboard>
              </BeginStoryboard>
            </EventTrigger>
          </Path.Triggers>
        </Path>


    --
    Viele Grüsse
    Peter Fleischer (ehem. MVP)
    Meine Homepage mit Tipps und Tricks

    • Als Antwort markiert perlfred Mittwoch, 23. Mai 2018 08:23
    Mittwoch, 23. Mai 2018 07:38
  • Hallo Peter!

    Ja, war ein Denkfehler von mir :-(

    Dadurch das nach dem 1. Durchlauf der 360° Punkt zur gewünschten Zeit erreicht wird, aber unmittelbar (ohne Pause) der 1. KeyFrame wieder bei 180° folgt, wird optisch natürlich eine 360° Drehung ausgeführt, Inhaltlich ist dies aber bereits der erste Teil des nächsten Durchlaufes.

    Sorry!

    Mittwoch, 23. Mai 2018 08:39