none
Animation von mehreren CIRCLES in/auf einer Kreisbewegung in einer W10 UWP - APP RRS feed

  • Frage

  • Hallo,

    ich möchte mehrere Kreise auf einer Kreisbahn bewegen, permanent. Das ganze soll in einer Windows 10 - UWP laufen.

    In einem WPF - Window habe ich ähnliches laufen:

    #region Animation
            private TimeSpan lastRenderTime;
            double d1 = 0;
            double d2 = 0;
            #endregion
            public WindowTEST01()
            {
                InitializeComponent();
    
                #region Animation
                lastRenderTime = TimeSpan.FromTicks(DateTime.Now.Ticks);
                CompositionTarget.Rendering += ReadyToAnimate;
                #endregion
            }
    
            #region Animation
            protected void ReadyToAnimate(object sender, EventArgs e)
            {
                // RenderingEventArgs prçvides a Rendering Time property which is used to obtain the current frame's rendering time.  
                RenderingEventArgs renderEventArgs = (RenderingEventArgs)e;
                d2 = (renderEventArgs.RenderingTime - lastRenderTime).TotalSeconds;
                lastRenderTime = renderEventArgs.RenderingTime;
                double x = 180 + 150 * Math.Cos(2 * d1);
                double y = 180 + 75 * Math.Sin(2 * d1);
                ball1.Center = new Point(x, y);
                x = 180 + 75 * Math.Cos(0.5 * d1);
                y = 180 + 150 * Math.Sin(0.5 * d1);
                ball2.Center = new Point(x, y);
                d1 += d2;
            }
            #endregion

    ...

    <Canvas>
                <Path Fill="Red" >
                    <Path.Data>
                        <EllipseGeometry x:Name="ball1" Center="30,180" RadiusX="15" RadiusY="15"/>
                    </Path.Data>
                </Path>
                <Path Fill="Green" >
                    <Path.Data>
                        <EllipseGeometry x:Name="ball2" Center="180,30" RadiusX="15" RadiusY="15"/>
                    </Path.Data>
                </Path>
            </Canvas>

    Das lässt sich aber nicht einfach in ein App - Projekt übertragen, es gibt folgende Fehlermeldung:

    "Keine Überladung für "ReadyToAnimate" stimmt mit dem Delegaten "EventHandler<object>" überein."

    Angestrebt ist allerdings, das sich mehrere Kreise/Bälle nacheinander/übereinander auf einer gemeinsamen Kreisbahn mit unterschiedlichen Geschwindigkeiten bewegen.

    Kann man das ganze im WPF lösen, ohne Code-Behind?

    Gruß

    Donnerstag, 10. Dezember 2015 11:11

Antworten

  • Hallo Stefan,

    hier eine kleine Demo von dem an was ich dachte:

    <Border Height="500" Width="500">
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever"
                                            Storyboard.TargetProperty="Rotation" 
                                            Storyboard.TargetName="outerTransform"/>
                        <!--Animation zum "zurück" drehen des sich bewegenden Kreises. Spielt nur eine Rolle sofern dieser nicht mit gedreht werden darf.-->                                
                        <DoubleAnimation From="360" To="0" Duration="0:0:2" RepeatBehavior="Forever"
                                            Storyboard.TargetProperty="Rotation" 
                                            Storyboard.TargetName="innerTransform"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <Canvas RenderTransformOrigin="0.5,0.5">
            <Canvas.RenderTransform>
                <CompositeTransform x:Name="outerTransform" Rotation="0"/>
            </Canvas.RenderTransform>
            <Ellipse Name="outer" Height="400" Width="400" Stroke="black" StrokeThickness="1" Canvas.Top="50" Canvas.Left="50"></Ellipse>
            <Ellipse Name="inner" Height="100" Width="100" Stroke="black" StrokeThickness="1" Canvas.Top="0" Canvas.Left="200">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <CompositeTransform x:Name="innerTransform" Rotation="0" CenterX="50" CenterY="50"/>
                </Ellipse.RenderTransform>
            </Ellipse>
                    
        </Canvas>
    </Border>


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Freitag, 11. Dezember 2015 23:42
    Moderator

Alle Antworten

  • Hallo Stefan,

    ReadyToAnimate hat die Falsche Signatur um zu funktionieren. Wenn du mal in die MSDN oder auch in die Fehlermeldung an sich guckst, dann seihst du dass der EventArgs-Parameter vom Typ Object sein muss. Ändere das also entsprechend:

    protected void ReadyToAnimate(object sender, object e)
    Kann man das ganze im WPF lösen, ohne Code-Behind?

    Wenn ich es mal streng nehme, dann passt die Frage nicht zu dem davor geschriebenen. WPF ist das Framework, du meinst wohl eher XAML.
    Ich würde hier versuchen ein Objekt um ein Zentrum zu drehen, wären die Ellipse in der Ecke hängt und sich ggf. gegenläufig um ihr Zentrum dreht. Dass kannst du auch im XAML erreichen. Dafür musst du nur das Storyboard inkl. Trigger im XAML deklarieren und die Transformationseigenschaften (Angle) binden.


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Donnerstag, 10. Dezember 2015 17:10
    Moderator
  • Hi,

    danke für deine Antwort.


    ...dann seihst du dass der EventArgs-Parameter vom Typ Object sein muss.

    Oha, das habe ich nicht auf Anhieb ge-checked, danke.

    Kann man das ganze im WPF lösen, ohne Code-Behind?

    Ja genau, da meinte ich ganz klar XAML.

    Kannst du mir ein kleines Beispiel, quasi als Anschubser geben?

    Danke, Gruß


    Donnerstag, 10. Dezember 2015 18:14
  • Hallo Stefan,

    hier eine kleine Demo von dem an was ich dachte:

    <Border Height="500" Width="500">
        <Border.Triggers>
            <EventTrigger RoutedEvent="Border.Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="360" Duration="0:0:2" RepeatBehavior="Forever"
                                            Storyboard.TargetProperty="Rotation" 
                                            Storyboard.TargetName="outerTransform"/>
                        <!--Animation zum "zurück" drehen des sich bewegenden Kreises. Spielt nur eine Rolle sofern dieser nicht mit gedreht werden darf.-->                                
                        <DoubleAnimation From="360" To="0" Duration="0:0:2" RepeatBehavior="Forever"
                                            Storyboard.TargetProperty="Rotation" 
                                            Storyboard.TargetName="innerTransform"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Border.Triggers>
        <Canvas RenderTransformOrigin="0.5,0.5">
            <Canvas.RenderTransform>
                <CompositeTransform x:Name="outerTransform" Rotation="0"/>
            </Canvas.RenderTransform>
            <Ellipse Name="outer" Height="400" Width="400" Stroke="black" StrokeThickness="1" Canvas.Top="50" Canvas.Left="50"></Ellipse>
            <Ellipse Name="inner" Height="100" Width="100" Stroke="black" StrokeThickness="1" Canvas.Top="0" Canvas.Left="200">
                <Ellipse.Fill>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="Black" Offset="0"/>
                        <GradientStop Color="White" Offset="1"/>
                    </LinearGradientBrush>
                </Ellipse.Fill>
                <Ellipse.RenderTransform>
                    <CompositeTransform x:Name="innerTransform" Rotation="0" CenterX="50" CenterY="50"/>
                </Ellipse.RenderTransform>
            </Ellipse>
                    
        </Canvas>
    </Border>


    Tom Lambert - .NET (C#) MVP
    Wozu Antworten markieren und für Beiträge abstimmen? Klicke hier.
    Nützliche Links: .NET Quellcode | C# ↔ VB.NET Konverter | Account bestätigen (Verify Your Account)
    Ich: Webseite | Code Beispiele | Facebook | Twitter | Snippets

    Freitag, 11. Dezember 2015 23:42
    Moderator