none
Animationen "synchronisieren" RRS feed

  • Frage

  • Hallo!

    Ich möchte ein Frame auf einer elliptischen Bahn rotieren lassen und die Größe des Frames in jedem Quadranten ändern. (Größe [Skalierung]: 1.Quadrant 1...0.3, 2. Quadrant 0.3...1, 3. Quadrant 1...1.5, 4. Quadrant 1.5 ... 1)

    Dazu habe ich eine Path- und eine Scale-Animation definiert:

    <Canvas Width="400" Height="400">        
        <Frame Width="150" Height="100" Source="Page1.xaml">
            <Frame.RenderTransform>
                <TransformGroup>
                    <MatrixTransform x:Name="Frame1MatrixTrans">
                        <MatrixTransform.Matrix >
                            <Matrix />
                        </MatrixTransform.Matrix>
                    </MatrixTransform>
                    <ScaleTransform CenterX="0.5" CenterY="0.5" x:Name="Frame1ScaleTrans" />
                </TransformGroup>
            </Frame.RenderTransform>
            <Frame.Triggers>
                <EventTrigger RoutedEvent="Frame.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <MatrixAnimationUsingPath
                                Storyboard.TargetName="Frame1MatrixTrans"
                                Storyboard.TargetProperty="Matrix"
                                Duration="0:0:12"
                                RepeatBehavior="Forever" >
    
                                <MatrixAnimationUsingPath.PathGeometry>
                                    <!--<PathGeometry>
                                        <PathFigure StartPoint="10,10">
                                            <ArcSegment Point="300,50" Size="250,150" />
                                        </PathFigure>
                                    </PathGeometry>-->
                                    <PathGeometry  Figures="M 199,200 A 200,100 0 1 0 200,200"/>
                                </MatrixAnimationUsingPath.PathGeometry>
                            </MatrixAnimationUsingPath>
                        </Storyboard>
                    </BeginStoryboard>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Frame1ScaleTrans"
                                                Storyboard.TargetProperty="ScaleX"
                                                From="0.5" To="1" Duration="0:0:3"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                            <DoubleAnimation Storyboard.TargetName="Frame1ScaleTrans"
                                                Storyboard.TargetProperty="ScaleY"
                                                From="0.5" To="1" Duration="0:0:3"
                                                AutoReverse="True" RepeatBehavior="Forever"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Frame.Triggers>
        </Frame>
        <Path Stroke="Aquamarine" StrokeThickness="1" Data="M 199,200 A 200,70 0 1 0 200,200" />
    </Canvas>
    

    Mein Problem ist nun, wie kann ich die Pathanimation mit der Scaleanimation synchronisieren, damit die Größenänderungen den Quadranten zugeordnet werden können???

    Fred

    Freitag, 26. April 2013 12:01

Antworten

  • Hallo,

    ich habe dir mal einen kleinen Code zusammen geschrieben, der das ganze soweit animiert, wie du es eschrieben hast und ich es verstanden habe.

    <Window x:Class="WpfApplication113.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="485" Width="525">
        <Window.Resources>
            <!--Der Pfad-->
            <PathFigureCollection x:Key="MyPathGeometry">M199,200A200,70,0,1,0,200,200</PathFigureCollection>
        </Window.Resources>
        <Canvas Width="400" Height="400">
            <Frame Width="150" Height="100" Source="Page1.xaml">
                <Frame.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="0.5" CenterY="0.5" x:Name="Frame1ScaleTrans" ScaleY="{Binding ScaleX, RelativeSource={RelativeSource Self}}" />
                        <TranslateTransform x:Name="Frame1TranslateTrans" X="0" Y="0" />
                    </TransformGroup>
                </Frame.RenderTransform>
                <Frame.Triggers>
                    <EventTrigger RoutedEvent="Frame.Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever" >
                                <!--Steuert die Größenänderung-->
                                <DoubleAnimationUsingKeyFrames Duration="0:0:12" Storyboard.TargetName="Frame1ScaleTrans" Storyboard.TargetProperty="ScaleX">
                                    <DoubleAnimationUsingKeyFrames.KeyFrames>
                                        <!--Um die Größenänderung ncht zu animieren, die EasingDoubleKeyFrame gegen DiscreteDoubleKeyFrame austauschen-->
                                        <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0"/>
                                        <EasingDoubleKeyFrame Value="0.3" KeyTime="0:0:3"/>
                                        <EasingDoubleKeyFrame Value="1" KeyTime="0:0:6"/>
                                        <EasingDoubleKeyFrame Value="1.5" KeyTime="0:0:9"/>
                                        <EasingDoubleKeyFrame Value="1" KeyTime="0:0:12"/>
                                    </DoubleAnimationUsingKeyFrames.KeyFrames>
                                </DoubleAnimationUsingKeyFrames>
    
                                <!-- Animiert den Frame anhand der X-Achse -->
                                <DoubleAnimationUsingPath   Storyboard.TargetName="Frame1TranslateTrans"
                                                            Storyboard.TargetProperty="X" Source="X"
                                                            Duration="0:0:12">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="{StaticResource MyPathGeometry}" />
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>
                                
                                <!-- Animiert den Frame anhand der Y-Achse -->
                                <DoubleAnimationUsingPath   Storyboard.TargetName="Frame1TranslateTrans"
                                                            Storyboard.TargetProperty="Y" Source="Y"
                                                            Duration="0:0:12">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="{StaticResource MyPathGeometry}" />
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Frame.Triggers>
            </Frame>
            <Path Name="MyPath" Stroke="Aquamarine" StrokeThickness="1" >
                <Path.Data>
                    <PathGeometry Figures="{StaticResource MyPathGeometry}"/>
                </Path.Data>
            </Path>
        </Canvas>
    </Window>

    Beachte die Kommentare im Code.

    PS: Ich gehe davon aus, das dir meine Antwort weiter geholfen hat.


    <Code:13/> - Koopakiller [kuːpakɪllɐ]
    Webseite | Code Beispiele | Facebook | Snippets
    Wenn die Frage beantwortet ist, dann markiert die hilfreichsten Beiträge als Antwort und bewertet die Beiträge. Danke.
    Einen Konverter zwischen C# und VB.NET Code gibt es hier.


    Freitag, 26. April 2013 15:06
    Moderator