Back to Questions
4.0k
views7
comments
How to animate shapes using WebSharper Raphael extension?
websharperf#raphael

Hey,
There is a function for that with type definition of 

1

Shape.Animate(a: obj * float) : Shape

What should I put in it as an obj? Also I assume that float is animation time in milliseconds, right?
Thanks!

.

If you want to try something different/experimental, I did some Canvas/Raphael animations using FRP (functional reactive programming) in WebSharper.

I just ported the FRAN [link:conal.net] like version used in [link:functional-programming.net] . It was very easy and straightforward. The book's source code can be found here: [link:archive.msdn.microsoft.com]

Sadly, I somehow messed my project up while upgrading to a newer WebSharper version and would have to do some cleanup before posting it. Also, I did stop before implementing events/ interactions.

Lots of fun, though.

By on 4/23/2012 2:00 PM ()

Hi Eugen, I urge you to post your FRAN port, it would be a great example and mind opener - if you need assistance with upgrading your project let me/us know (or post questions here), would be glad to help.

Thanks,
Adam.

By on 4/24/2012 8:26 AM ()

Not a problem. I will post it in a week or two. There really are not that many differences to the version used in the book, just some workarounds because of code quotations.

Basically it just worked :)

By on 4/24/2012 1:56 PM ()

Yes, that's the way we like it :)

By on 4/24/2012 3:15 PM ()

The obj argument is a JavaScript object that represents the various members of the Element object that have to be changed by the animation. For example, the following code changes the radius of a circle:

1
2

let animation = New ["r", obj 100.]
circle.Animate(animation, 1000.)

As you guessed, the float argument is the animation time. This function is a direct wrapper on the JavaScript library, so for more information, you can look at: [link:raphaeljs.com]

By on 4/23/2012 5:23 AM ()

Hi,
Thanks for an answer. Though your suggested code doesn't seem to work. This is what I do:

1
2
3

let circle = paper.Circle(100, 100, 100).Attr("fill", "#000")
let anim = (New [("r", 200. :> obj)], 1000.)
circle.Animate(anim) |> ignore

It recognizes the radius change, but it seems to be ignoring time parameter. So instead of transitioning smoothly it jumps directly to the 200 radius in no time at all. There doesn't seem to be a way to specify animation easing. What I've tried with parameters:

1
2
3
4
5
6
7
8

// specifying easing
let anim = (New [ ("r", 200. :> obj); ("easing", "linear" :> obj)], 1000.)
// specifying params as an array if other parameters
let anim2 = (New [ 
                ("params", ("r", 200.) :> obj); 
                ("ms", 1000. :> obj);
                ("easing", "linear" :> obj); ]
                , 1000.)

None of these seem to work. Actually when I specify it this way, it doesn't even change to a new radius. Is Raphael source code accessible online? I didn't find it in WebSharper repository. Maybe I am missing something and by looking at source code might reveal the solution.

By on 4/23/2012 3:22 PM ()

Hi Kostas, can you do what you want in plain JavaScript/Raphael? I can translate that to WebSharper for you and also check if we are missing any bindings that would make it easier to do so. --A

By on 4/25/2012 6:03 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper