How to call VelocityJS functions to implement missing Storyboard.Pause()/Resume() methods

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
TaterJuice
Posts: 147
Joined: Thu Mar 16, 2017 5:40 am
Contact:

How to call VelocityJS functions to implement missing Storyboard.Pause()/Resume() methods

Postby TaterJuice » Tue Aug 29, 2017 12:03 pm

Are there plans to bring the functions Pause() and Resume() to the StoryBoard class?

https://msdn.microsoft.com/en-us/library/ms605764(v=vs.110).aspx

Code: Select all

$element.velocity('pause');//velocity 1.4

Code: Select all

$element.velocity('resume');//velocity 1.4

Code: Select all

$element.velocity('stop', true); //velocity 1.2.3


VelocityJS 1.2.3 Example JSFiddle: https://jsfiddle.net/AtheistP3ace/znyLtfaf/4/

Code: Select all

Interop.ExecuteJavaScript("$0.velocity('stop', true);", Interop.GetDiv(_frmwrkEl));

^^^ Does not work

When I try it, I get an error in the Output:
Uncaught TypeError: this.div.velocity is not a function
at Vivrant_Particles_WeatherPanel_$l$gc__DisplayClass24_0.$l$gc__DisplayClass24_0_$lPauseStoryBoard$gb__0 (Vivrant.Particles.js?2017911715:2495)
at Delegate_Invoke (JSIL.Core.js?2017911715:9344)
at CSharpXamlForHtml5.js?2017911715:55975


I've also tried, just for debugging, to force-reproduce the velocity and jquery syntax with the following, but it doesn't work:

Code: Select all

Interop.ExecuteJavaScript("$$0.velocity('stop', true);", Interop.GetDiv(_frmwrkEl));

Code: Select all

Interop.ExecuteJavaScript("$($0).velocity('stop', true);", Interop.GetDiv(_frmwrkEl));


In conclusion, I know you said that DoubleAnimation and ColorAnimation are powered by Velocity.JS, how can I access the Velocity functions of my animations?

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: How to call VelocityJS functions to implement missing Storyboard.Pause()/Resume() methods

Postby JS-Support @Userware » Tue Sep 05, 2017 3:03 am

Hi,

Thanks for your message.

We are going to update Velocity to the latest version.

In the meantime, you should be able to update to the latest Velocity on your side by replacing the "velocity.js" file in:
C:\Program Files (x86)\MSBuild\CSharpXamlForHtml5\InternalStuff\Libraries

To interact with it, you should use the syntax without jQuery (without "$" sign). You can find more by reading the section titled "Using Velocity without jQuery" of the following page:
http://velocityjs.org/
As well as the following article:
https://www.smashingmagazine.com/2014/0 ... ut-jquery/

Thanks.
Regards,
JS-Support

TaterJuice
Posts: 147
Joined: Thu Mar 16, 2017 5:40 am
Contact:

Re: How to call VelocityJS functions to implement missing Storyboard.Pause()/Resume() methods

Postby TaterJuice » Wed Sep 06, 2017 4:37 pm

Excellent, Thank you!

For anyone else with this question, this amounts to:

Code: Select all

Interop.ExecuteJavaScript("Velocity($0, 'stop', true);", Interop.GetDiv(_frameworkElement)); //velocity 1.2.3


Yay! Animations Pause, but.....

Animations pause but the doubleAnimation.Completed event still fires, even while the animation is paused.

On a related note, Storyboard.Completed never fires for me. In order to clean up particles from my Particle framework, I have to attach to the longest animation I add to the storyboard - but that fires even when my animations are paused. I believe both of these issues are bug reports, and I've posted in the wrong forum. Can you confirm, and pass to developers, or do I need to repost in the bug report forum?

1. StoryBoard.Completed never firing and
2. DoubleAnimation.Completed firing when the animation is paused
I believe this is because the timer for the animation is still ticking somewhere in JS, and pausing the animation\storyboard should be handled by the CSHTML5 C# to JS conversion, not by me accessing velocity - unless you can tell me how to pause the doubleAnimation timers via JS Interop.
Last edited by TaterJuice on Thu Sep 07, 2017 6:42 am, edited 3 times in total.

JS-Support @Userware
Site Admin
Posts: 1142
Joined: Tue Apr 08, 2014 3:42 pm

Re: How to call VelocityJS functions to implement missing Storyboard.Pause()/Resume() methods

Postby JS-Support @Userware » Thu Sep 07, 2017 6:14 am

Hi,

Thanks a lot. I am going to pass it to the developer who worked on Storyboards.

We will keep you updated.

Regards,
JS-Support


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 3 guests