OneOnOne -- Animering af elementer
skrevet af Niels Brinch
Det er relativt nemt at animere et element i Silverlight direkte i XML. Jeg vil gerne gøre det så mine spillere i OneOnOne bevæger sig jævnt i stedet for at bevæge sig i ryk. Da bevægelsen er afhængig spillets forløb, skal animationen defineres i min C#-kode og ikke i XML.
Alligevel starter jeg med at definere en grundanimation i XML som jeg så kan redigere løbende. Herunder er defineret animationer for at justere på player1's x- og y-koordinater. Navnet DoubleAnimation kommer af den værdi som skal justeres er af typen double.
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard x:Name="player1Timer">
<DoubleAnimation x:Name="player1AnimationX"
Storyboard.TargetName="player1"
Storyboard.TargetProperty="(Canvas.Left)"
/>
<DoubleAnimation x:Name="player1AnimationY"
Storyboard.TargetName="player1"
Storyboard.TargetProperty="(Canvas.Top)"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
På DoubleAnimation er angivet Storyboard.TargetName som er henvisning til det element som denne animation skal virke på. Desuden er angivet Storyboard.TargetProperty som er den property på elementet som animationen løbende skal påvirke. Der er paranteser om property'ens navn, fordi den er sammensat (med punktum).
Jeg tilføjer også lignende animationer for spiller 2 og for bolden. I min metode som modtager instruktioner fra serveren om hvor hver spiller skal flyttes hen, vil jeg gerne redigere og starte animationen, i stedet for at flytte spilleren i ét ryk.
// Animation for player 1
player1Timer.Duration = new Duration(new TimeSpan(0, 0, 0, 0, 100));
player1AnimationX.RepeatBehavior = new RepeatBehavior(1);
player1AnimationX.AutoReverse = false;
player1AnimationX.From = (double)player1.GetValue(Canvas.LeftProperty);
player1AnimationX.To = gameState.Player1.XPosition;
player1AnimationY.RepeatBehavior = new RepeatBehavior(1);
player1AnimationY.AutoReverse = false;
player1AnimationY.From = (double)player1.GetValue(Canvas.TopProperty);
player1AnimationY.To = gameState.Player1.YPosition;
Duration angiver varigheden af animationen. Mit spil er i kontakt med serveren hvert 100 millisekunder, hvilket gør det passende at lade animationen vare i 100 millisekunder.
RepeatBehavior kan f.eks. bruges til at angive at animationen skal gentages uendeligt eller et bestemt antal gange. I dette tilfælde vil jeg allernådigst bede om at spilleren kun flyttes én gang.
AutoReverse kan bruges til at inkludere "den modsatte" animation. I dette tilfælde ville det betyde at spilleren løber tilbage på sin plads igen. Det er ikke relevant.
From og To angiver de double-værdier som der skal ændres fra og til i løbet af animationen.
Til sidst starter jeg animationerne og så fungerer det:
player1Timer.Begin();
player2Timer.Begin();
ballTimer.Begin();
Og må jeg lige tilføje: Det øger spilbarheden i helt ufattelig grad at det er animeret.
| 0 kommentarer |
