Databases
StackOverflow2013
Postsdbo
POXAML Storyboard - Looping a KeyFrame
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POXAML Storyboard - Looping a KeyFrame
    text
    copied!<p>So I've been playing around with Visual Studio for Windows Phone 8 and was exploring the XAML mark up language that's associated with WP8 and WPF applications. I read some guides on Storyboards and animating with Keyframes and this brings me to my question. Aside from the timed animation with Storyboards is there a way to make it repeat a section until a button is pressed (Click to start, click to stop)?</p> <pre><code>&lt;Storyboard x:Key="Storyboard1" x:Name="Testboard"&gt; &lt;DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image"&gt; &lt;SplineDoubleKeyFrame KeyTime="0" Value="0"/&gt; &lt;SplineDoubleKeyFrame KeyTime="0:0:2" Value="510.72" KeySpline="1,0,1,1" /&gt; &lt;SplineDoubleKeyFrame KeyTime="0:0:5" Value="6000.43"/&gt; &lt;SplineDoubleKeyFrame KeyTime="0:0:7" Value="9000" KeySpline="0,0,0,1" /&gt; &lt;/DoubleAnimationUsingKeyFrames&gt; &lt;/Storyboard&gt; </code></pre> <p>I have a Storyboard setup and the image is a little roulette wheel. The animation has 3 stages:</p> <ol> <li>KeyTime 0:0:2 is when the wheel begins to spin slowly picking up speed using the Keyspline.</li> <li>KeyTime 0:0:5 is where it just spins to fake the look of momentum.</li> <li>KeyTime 0:0:7 is where it slows to a halt.</li> </ol> <p>On the .cs side of things, I have a button wired up to generate a random value to replace the last Keyframe so that it stops spinning on a different slot each time. Then I call the Storyboard to begin.</p> <pre><code> private void btnStartWheel_Click(object sender, RoutedEventArgs e) { sb = (Storyboard)this.FindName("Testboard"); ((SplineDoubleKeyFrame)((DoubleAnimationUsingKeyFrames)sb.Children[0]).KeyFrames[3]).Value = wheel.getAngle(); sb.Begin(); } </code></pre> <p>I've tried using a timer that on tick would check where the position is in the story board, and if it's nearing the end of Keyframe[2] (KeyTime 0:0:5) it would use the seek() method and shift it back to the start of the frame. The problem with that method is that it completely killed the animation and started it from a value of 0 as opposed to it pre-spinning from Keyframe[1].</p> <p>Basically I would like it to:</p> <ul> <li>Press a button to start the animation.</li> <li>Loop in Keyframe[2] without losing the rotation look until the button is pressed again.</li> <li>After the button is pressed break the loop and finish the Storyboard.</li> </ul> <p>Is there an easy way to do this?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload