With Silverlight web applicationes become a 4th dimension: the time. Animations are changing elements over a timeline. In my prior post i showed how to build a slot machine with rotation numbers. I simulated with combined animations 3d effects.
But how to get the displayed number when animation is stopped?
There exists a method getvalue which can be executed on transformgroup object. This sounds to be easy but isnt!
For this sample i use a flat rotating disk which contains numbers from 0 to 9. When somebody is pressiong the stop button the displayed number is visible in a DIV. This is a part of a gambling machine (older modell)
For animation the canvas which contains also the disk you can use something like this.
<
BeginStoryboard> <
Storyboard x:Name="drehen"> <
DoubleAnimationUsingKeyFrames RepeatBehavior="forever" BeginTime="00:00:00" Storyboard.TargetName="Layer_1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"> <
SplineDoubleKeyFrame KeyTime="00:00:01" Value="360"/> </
DoubleAnimationUsingKeyFrames> </
Storyboard> </
BeginStoryboard> The canvas is rotating within 1 second for ever. Now the idea is to read the past milliseconds of the timeline. But thats not possible.
My first idea was to read the past time of timeline. Second was to access the hirarchy and index like the targetproperty is using for adressing a element in XAML. Both doesnt work.
So i changed to the target element which is animated. I can read and write the angle from my disk.
First Jscript try:
var a=slHost.content.findName("Layer_1");
var b=a.RenderTransform;
var c= b.Children[2]; bang!!
var d=c.RotateTransform.Angle;
Doesnt work!
With Silverligth 1.1 and managed code simalar works
dim pr as transformgroup
pr=Layer_1.GetValue(Canvas.Rendertransformproperty)
dim a as object =pr.Children(2).getvalue(eRotatetransform.Angleproperty)
Only mystic thing left is that the naming differs a little bit from jscript.
How it works with Jscript.
Based on my idea to take the target property instead the timeline i changed the adressing of the node.First the targetproperty must be named in XAML with x:name.
<
RotateTransform x:Name="winkel"/> That object can then be found with findname.
winkel=slHost.content.findName("winkel").Angle;
For my sample i have to do some fancy calculations with JScript to get the correct number. Based on the angle i have 10 possible values = 36 degree per value. Cause 10 should be zero i take only the first right character.
function
Button1_onclick() { var
slHost = document.getElementById("SilverlightControl"); slHost.content.findName(
"drehen").Pause(); winkel=slHost.content.findName(
"winkel").Angle; var nummer =new String(); nummer=11-parseInt((winkel/36+0.5))+
""; document.getElementById(
"label1").innerHTML=nummer.substr(-1,1); }
Thats all. You can find the live sample here.