Click here to Skip to main content
15,436,928 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I try to rebuild the following CSS in WPF. But I'm stuck or have a lump in my brain. Can anyone help me?
I have no idea how to finalize the implementation of the CSS in WPF Storyboard. The cube moving and hopping was still possible but the bouncing effect of the bouncing dice makes me problems to integrate the storyboard SearchRunning.




@keyframes moving {
  0%, 5% {
    left: 0;
    background-color: #039be5;
  }
  95%, 100% {
    left: calc(100% - 18px);
    background-color: #84d6fd;
  }
}
@keyframes box-2-anim {
  0% {
    transform: scale(1, 1) rotate(0deg);
    bottom: 0;
  }
  5% {
    bottom: 18px;
  }
  15% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  17.001% {
    bottom: 0;
    transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
  }
  25% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  66% {
    transform: scale(1, 1) rotate(-180deg);
    bottom: 0;
  }
  71% {
    bottom: 18px;
  }
  81% {
    bottom: 0;
    transform: scale(1, 1) rotate(0deg);
  }
  83.001% {
    bottom: 0;
    transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
  }
  91% {
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes box-3-anim {
  0% {
    transform: scale(1, 1) rotate(0deg);
    bottom: 0;
  }
  5% {
    bottom: 18px;
  }
  15% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  17.001% {
    bottom: 0;
    transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
  }
  25% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  56% {
    transform: scale(1, 1) rotate(-180deg);
    bottom: 0;
  }
  61% {
    bottom: 18px;
  }
  71% {
    bottom: 0;
    transform: scale(1, 1) rotate(0deg);
  }
  73.001% {
    bottom: 0;
    transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
  }
  81% {
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes box-4-anim {
  0% {
    transform: scale(1, 1) rotate(0deg);
    bottom: 0;
  }
  5% {
    bottom: 18px;
  }
  15% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  17.001% {
    bottom: 0;
    transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
  }
  25% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  45% {
    transform: scale(1, 1) rotate(-180deg);
    bottom: 0;
  }
  50% {
    bottom: 18px;
  }
  60% {
    bottom: 0;
    transform: scale(1, 1) rotate(0deg);
  }
  62.001% {
    bottom: 0;
    transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
  }
  70% {
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}
@keyframes box-5-anim {
  0% {
    transform: scale(1, 1) rotate(0deg);
    bottom: 0;
  }
  5% {
    bottom: 18px;
  }
  15% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  17.001% {
    bottom: 0;
    transform: translate(5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(-180deg);
  }
  25% {
    bottom: 0;
    transform: scale(1, 1) rotate(-180deg);
  }
  33% {
    transform: scale(1, 1) rotate(-180deg);
    bottom: 0;
  }
  38% {
    bottom: 18px;
  }
  48% {
    bottom: 0;
    transform: scale(1, 1) rotate(0deg);
  }
  50.001% {
    bottom: 0;
    transform: translate(-5.4px, 3.6px) scale(1.3, 0.6) translateY(0px) rotate(0deg);
  }
  58% {
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

.box-loading {
  width: 138px;
  height: 18px;
  position: relative;
  margin: 0 auto;
}
.box-loading > .box {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 3.6px;
  background-color: #007bff;
  transform-origin: -6px 9px;
  box-shadow: 0 0 6px 2px rgba(40, 139, 171, 0.15);
}
.box-loading > .box:nth-child(1) {
  left: 0px;
  background-color: #06abfc;
}
.box-loading > .box:nth-child(2) {
  left: 30px;
  background-color: #1fb4fc;
  animation: box-2-anim 2s infinite linear;
  animation-delay: 0.2222222222s;
}
.box-loading > .box:nth-child(3) {
  left: 60px;
  background-color: #38bcfc;
  animation: box-3-anim 2s infinite linear;
  animation-delay: 0.3333333333s;
}
.box-loading > .box:nth-child(4) {
  left: 90px;
  background-color: #51c5fd;
  animation: box-4-anim 2s infinite linear;
  animation-delay: 0.4444444444s;
}
.box-loading > .box:nth-child(5) {
  left: 120px;
  background-color: #6acdfd;
  animation: box-5-anim 2s infinite linear;
  animation-delay: 0.5555555556s;
}
.box-loading > .box:nth-child(1) {
  background-color: #039be5;
  animation: moving 1s infinite cubic-bezier(0.6, 0, 0.4, 1) alternate;
}


What I have tried:

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp3"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>

        <Storyboard x:Key="SearchRunning" RepeatBehavior="2x" AutoReverse="True" >
            <!--Quadrat 1-->
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.0"
                                           Storyboard.TargetName="TransQuat1"
                                           Storyboard.TargetProperty="X">
                <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="0" />
                <EasingDoubleKeyFrame KeyTime="00:00:02.4" Value="114"  >
                    <EasingDoubleKeyFrame.EasingFunction>
                        <CubicEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetName="Quat1"
                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                <LinearColorKeyFrame KeyTime="00:00:00.5" Value="#FF004A96" />
                <LinearColorKeyFrame KeyTime="00:00:02" Value="#FF21A0D2" />
            </ColorAnimationUsingKeyFrames>
            <!--Quadrat 2-->
            <PointAnimationUsingKeyFrames Storyboard.TargetName="Quat2"
                                          Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <LinearPointKeyFrame KeyTime="00:00:00.7" Value="-0.5,-0.65"/>
                <LinearPointKeyFrame KeyTime="00:00:01.4" Value="-0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat2"
                                           Storyboard.TargetProperty="X">
                <EasingDoubleKeyFrame KeyTime="00:00:00.6" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.7" Value="-2.5"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.4" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat2"
                                           Storyboard.TargetProperty="Angle">
                <EasingDoubleKeyFrame KeyTime="00:00:00.6" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.4" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
            <!--Quadrat 3-->
            <PointAnimationUsingKeyFrames Storyboard.TargetName="Quat3"
                                          Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <LinearPointKeyFrame KeyTime="00:00:00.9" Value="-0.5,-0.65"/>
                <LinearPointKeyFrame KeyTime="00:00:01.6" Value="-0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat3"
                                           Storyboard.TargetProperty="X">
                <EasingDoubleKeyFrame KeyTime="00:00:00.8" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.9" Value="-2.5"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat3"
                                           Storyboard.TargetProperty="Angle">
                <EasingDoubleKeyFrame KeyTime="00:00:00.8" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
            <!--Quadrat 4-->
            <PointAnimationUsingKeyFrames Storyboard.TargetName="Quat4"
                                          Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <LinearPointKeyFrame KeyTime="00:00:01.1" Value="-0.5,-0.65"/>
                <LinearPointKeyFrame KeyTime="00:00:01.8" Value="-0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat4"
                                           Storyboard.TargetProperty="X">
                <EasingDoubleKeyFrame KeyTime="00:00:01.0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.1" Value="-2.5"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat4"
                                           Storyboard.TargetProperty="Angle">
                <EasingDoubleKeyFrame KeyTime="00:00:01.0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.8" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
            <!--Quadrat 5-->
            <PointAnimationUsingKeyFrames Storyboard.TargetName="Quat5"
                                          Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <LinearPointKeyFrame KeyTime="00:00:01.3" Value="-0.5,-0.65"/>
                <LinearPointKeyFrame KeyTime="00:00:02.0" Value="-0.5,0.5"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="TransQuat5"
                                           Storyboard.TargetProperty="X">
                <EasingDoubleKeyFrame KeyTime="00:00:01.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.3" Value="-2.5"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.0" Value="0"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="RotaQuat5"
                                           Storyboard.TargetProperty="Angle">
                <EasingDoubleKeyFrame KeyTime="00:00:01.2" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:02.0" Value="-180"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

        <Storyboard x:Key="SearchBouncing" >
            <PointAnimationUsingKeyFrames Storyboard.TargetName="Quattest"
                                          Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)">
                <LinearPointKeyFrame KeyTime="00:00:01.1" Value="0.5,1"/>
            </PointAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
                                           Storyboard.TargetName="Quattest">
                <LinearDoubleKeyFrame KeyTime="00:00:01.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="0.6"/>
                <LinearDoubleKeyFrame KeyTime="00:00:01.8" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
                                           Storyboard.TargetName="Quattest">
                <LinearDoubleKeyFrame KeyTime="00:00:01.2" Value="1"/>
                <EasingDoubleKeyFrame KeyTime="00:00:01.6" Value="1.3"/>
                <LinearDoubleKeyFrame KeyTime="00:00:01.8" Value="1"/>
            </DoubleAnimationUsingKeyFrames>

            

        </Storyboard>

    </Window.Resources>

    <Grid>
        <Rectangle x:Name="Quat1" Fill="#FF004A96"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="100,50,0,0"
                   Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="1, 1">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform x:Name="TransQuat1" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="Quat2" Fill="#FF0860A5"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="130,50,0,0"
                   Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ScaleQuat2" ScaleX="1" ScaleY="1"/>
                    <RotateTransform x:Name="RotaQuat2" Angle="0" CenterX="0" CenterY="0"/>
                    <TranslateTransform x:Name="TransQuat2" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="Quat3" Fill="#FF147EBA"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="160,50,0,0"
                   Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ScaleQuat3" ScaleX="1" ScaleY="1"/>
                    <RotateTransform x:Name="RotaQuat3" Angle="0" CenterX="0" CenterY="0"/>
                    <TranslateTransform x:Name="TransQuat3" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="Quat4" Fill="#FF1C93C9"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="190,50,0,0"
                   Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ScaleQuat4" ScaleX="1" ScaleY="1"/>
                    <RotateTransform x:Name="RotaQuat4" Angle="0" CenterX="0" CenterY="0"/>
                    <TranslateTransform x:Name="TransQuat4" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle x:Name="Quat5" Fill="#FF21A0D2"
                   HorizontalAlignment="Left" VerticalAlignment="Top"
                   Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="220,50,0,0"
                   Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ScaleQuat5" ScaleX="1" ScaleY="1"/>
                    <RotateTransform x:Name="RotaQuat5" Angle="0" CenterX="0" CenterY="0"/>
                    <TranslateTransform x:Name="TransQuat5" />
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        

        <Rectangle x:Name="Quattest" Fill="#FF21A0D2"
            HorizontalAlignment="Left" VerticalAlignment="Top"
            Height="18" Width="18" RadiusX="4" RadiusY="4" Margin="50,90,0,0"
            Opacity="1" IsHitTestVisible="False" RenderTransformOrigin="-0.5, 0">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Window>
Posted
Updated 24-Feb-22 10:19am
v2
Comments
Richard MacCutchan 23-Feb-22 3:30am     CRLF
"Can anyone help me?" With what? You have not asked a question.
Andreas7 23-Feb-22 4:31am    
I have no idea how to finalize the implementation of the CSS in WPF Storyboard. The cube moving and hopping was still possible but the bouncing effect of the bouncing dice makes me problems to integrate the storyboard SearchRunning.

Take a look at this excellent CP article: Using CSS Selectors for Styling in WPF[^]

This NuGet might be helpful too: GitHub - warappa/XamlCSS: Style Xaml applications with CSS[^]
 
Share this answer
 
Comments
Andreas7 23-Feb-22 14:15pm    
Embedding CSS is not my inspiration for the problem, but rather rebuilding the CSS in a storyboard. Nevertheless, thanks for your proposed solution
Solved:
XML
<storyboard x:key="SearchRunning">
            <!--Quadrat 1-->
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat1" 
="" storyboard.targetproperty="X">
                <lineardoublekeyframe keytime="00:00:00.0" value="0">
                <splinedoublekeyframe keytime="00:00:02.0" value="120" keyspline="0.6, 0, 0.4, 1">
                <splinedoublekeyframe keytime="00:00:04.0" value="0" keyspline="0.6, 0, 0.4, 1">
            </splinedoublekeyframe></splinedoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <coloranimationusingkeyframes storyboard.targetname="Quat1" 
="" storyboard.targetproperty="(Shape.Fill).(SolidColorBrush.Color)">
                <linearcolorkeyframe keytime="00:00:00.0" value="#FF004A96">
                <splinecolorkeyframe keytime="00:00:02.0" value="#FF21A0D2" keyspline="0.6, 0, 0.4, 1">
                <splinecolorkeyframe keytime="00:00:03.5" value="#FF004A96" keyspline="0.6, 0, 0.4, 1">
                <linearcolorkeyframe keytime="00:00:04.0" value="#FF004A96">
            </linearcolorkeyframe></splinecolorkeyframe></splinecolorkeyframe></linearcolorkeyframe></coloranimationusingkeyframes>
            <!--Quadrat 2-->
            <!-- Delay 0.44s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat2" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.44" value="0">
                <lineardoublekeyframe keytime="00:00:01.04" value="-180">
                <discretedoublekeyframe keytime="00:00:03.10" value="-180">
                <lineardoublekeyframe keytime="00:00:03.70" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat2" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.14" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.34" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.80" value="1.275">
                <lineardoublekeyframe keytime="00:00:04.00" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat2" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.14" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.34" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.80" value="0.675">
                <lineardoublekeyframe keytime="00:00:04.00" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat2" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.54" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:00.84" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.14" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.80" value="-0.325,0.5">
                <!--LinearPointKeyFrame KeyTime="00:00:04.10" Value="-0.417,0.5"/>
                <linearpointkeyframe keytime="00:00:04.40" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:04.66" value="-0.5,0" --="">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat2" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.44" value="0">
                <lineardoublekeyframe keytime="00:00:00.54" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.14" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.34" value="-0.5">
                <discretedoublekeyframe keytime="00:00:03.10" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.20" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.80" value="-5.9">
                <lineardoublekeyframe keytime="00:00:04.00" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat2" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.14" value="3">
                <lineardoublekeyframe keytime="00:00:01.34" value="0">
                <discretedoublekeyframe keytime="00:00:03.09" value="0">
                <lineardoublekeyframe keytime="00:00:03.10" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.15" value="-3.6">
                <lineardoublekeyframe keytime="00:00:03.20" value="-7">
                <lineardoublekeyframe keytime="00:00:03.40" value="-14">
                <lineardoublekeyframe keytime="00:00:03.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.80" value="3">
                <lineardoublekeyframe keytime="00:00:04.00" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 3-->
            <!-- Delay 0.66s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat3" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.66" value="0">
                <lineardoublekeyframe keytime="00:00:01.26" value="-180">
                <discretedoublekeyframe keytime="00:00:02.88" value="-180">
                <lineardoublekeyframe keytime="00:00:03.48" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat3" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.36" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.56" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.58" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.78" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat3" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.36" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.56" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.58" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.78" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat3" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.76" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.06" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.36" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.58" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.88" value="-0.417,0.5">
                <!--LinearPointKeyFrame KeyTime="00:00:04.18" Value="-0.5,-0.65"/>
                <linearpointkeyframe keytime="00:00:04.44" value="-0.5,0" --="">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat3" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.66" value="0">
                <lineardoublekeyframe keytime="00:00:00.76" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.36" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.56" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.88" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.98" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.58" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.78" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat3" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.36" value="3">
                <lineardoublekeyframe keytime="00:00:01.56" value="0">
                <discretedoublekeyframe keytime="00:00:02.87" value="0">
                <lineardoublekeyframe keytime="00:00:02.88" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.93" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.98" value="-7">
                <lineardoublekeyframe keytime="00:00:03.18" value="-14">
                <lineardoublekeyframe keytime="00:00:03.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.58" value="3">
                <lineardoublekeyframe keytime="00:00:03.78" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 4-->
            <!-- Delay 0.88s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat4" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:00.88" value="0">
                <lineardoublekeyframe keytime="00:00:01.48" value="-180">
                <discretedoublekeyframe keytime="00:00:02.66" value="-180">
                <lineardoublekeyframe keytime="00:00:03.26" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat4" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.58" value="1.275">
                <lineardoublekeyframe keytime="00:00:01.78" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.36" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.56" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat4" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.48" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.58" value="0.675">
                <lineardoublekeyframe keytime="00:00:01.78" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.26" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.36" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.56" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat4" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:00.98" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.28" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.58" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.36" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.66" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:03.96" value="-0.5,-0.65">
                <!--LinearPointKeyFrame KeyTime="00:00:04.22" Value="-0.5,0"/-->
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat4" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:00.88" value="0">
                <lineardoublekeyframe keytime="00:00:00.98" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.58" value="5.4">
                <lineardoublekeyframe keytime="00:00:01.78" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.66" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.76" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.36" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.56" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat4" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.48" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.58" value="3">
                <lineardoublekeyframe keytime="00:00:01.78" value="0">
                <discretedoublekeyframe keytime="00:00:02.65" value="0">
                <lineardoublekeyframe keytime="00:00:02.66" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.71" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.76" value="-7">
                <lineardoublekeyframe keytime="00:00:02.96" value="-14">
                <lineardoublekeyframe keytime="00:00:03.26" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.36" value="3">
                <lineardoublekeyframe keytime="00:00:03.56" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <!--Quadrat 5-->
            <!-- Delay 1.1s -->
            <doubleanimationusingkeyframes storyboard.targetname="RotaQuat5" 
="" storyboard.targetproperty="Angle">
                <lineardoublekeyframe keytime="00:00:01.10" value="0">
                <lineardoublekeyframe keytime="00:00:01.70" value="-180">
                <discretedoublekeyframe keytime="00:00:02.44" value="-180">
                <lineardoublekeyframe keytime="00:00:03.04" value="0">
            </lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat5" 
="" storyboard.targetproperty="ScaleX">
                <lineardoublekeyframe keytime="00:00:01.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.80" value="1.275">
                <lineardoublekeyframe keytime="00:00:02.00" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.14" value="1.275">
                <lineardoublekeyframe keytime="00:00:03.34" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="ScaleQuat5" 
="" storyboard.targetproperty="ScaleY">
                <lineardoublekeyframe keytime="00:00:01.70" value="1.0">
                <lineardoublekeyframe keytime="00:00:01.80" value="0.675">
                <lineardoublekeyframe keytime="00:00:02.00" value="1.0">
                <discretedoublekeyframe keytime="00:00:03.04" value="1.0">
                <lineardoublekeyframe keytime="00:00:03.14" value="0.675">
                <lineardoublekeyframe keytime="00:00:03.34" value="1.0">
            </lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></doubleanimationusingkeyframes>
            <pointanimationusingkeyframes storyboard.targetname="Quat5" 
="" storyboard.targetproperty="(UIElement.RenderTransformOrigin)">
                <linearpointkeyframe keytime="00:00:01.20" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:01.50" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:01.70" value="-0.325,0.5">
                <discretepointkeyframe keytime="00:00:03.14" value="-0.325,0.5">
                <linearpointkeyframe keytime="00:00:03.44" value="-0.417,0.5">
                <linearpointkeyframe keytime="00:00:03.74" value="-0.5,-0.65">
                <linearpointkeyframe keytime="00:00:04.00" value="-0.5,0">
            </linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></discretepointkeyframe></linearpointkeyframe></linearpointkeyframe></linearpointkeyframe></pointanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat5" 
="" storyboard.targetproperty="X">
                <discretedoublekeyframe keytime="00:00:01.10" value="0">
                <lineardoublekeyframe keytime="00:00:01.20" value="-2.5">
                <lineardoublekeyframe keytime="00:00:01.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.80" value="5.4">
                <lineardoublekeyframe keytime="00:00:02.00" value="-0.5">
                <discretedoublekeyframe keytime="00:00:02.44" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.54" value="-5.4">
                <lineardoublekeyframe keytime="00:00:03.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.14" value="-5.9">
                <lineardoublekeyframe keytime="00:00:03.34" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
            <doubleanimationusingkeyframes storyboard.targetname="TransQuat5" 
="" storyboard.targetproperty="Y">
                <discretedoublekeyframe keytime="00:00:01.70" value="-0.5">
                <lineardoublekeyframe keytime="00:00:01.80" value="3">
                <lineardoublekeyframe keytime="00:00:02.00" value="0">
                <discretedoublekeyframe keytime="00:00:02.43" value="0">
                <lineardoublekeyframe keytime="00:00:02.44" value="-0.5">
                <lineardoublekeyframe keytime="00:00:02.49" value="-3.6">
                <lineardoublekeyframe keytime="00:00:02.54" value="-7">
                <lineardoublekeyframe keytime="00:00:02.74" value="-14">
                <lineardoublekeyframe keytime="00:00:03.04" value="-0.5">
                <lineardoublekeyframe keytime="00:00:03.14" value="3">
                <lineardoublekeyframe keytime="00:00:03.34" value="0">
            </lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></lineardoublekeyframe></lineardoublekeyframe></discretedoublekeyframe></doubleanimationusingkeyframes>
        </storyboard>
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900