Is there something like a 'Single way animation', favorably triggered by JS ?

Hi!

Just started with fuse since yesterday evening, and i must say, it’s quite impressive! The FPS is really good, thank you OpenGL :wink:

There is one thing i can’t find in the documentation, that is; a single way animation, right now when i press a button, and use something like the <WhilePressed> trigger, the animation always goes back to it’s resting state when i release the button.

Now i could work around this using a <WhileTrue> trigger, but i have a slighty more complicated use case in my head.

I’d like to create a Material Design inspired button, when you click it, a circle behind the button will scale up to the size of the screen, fading out quickly.

Right now i use an Observable and a trigger, i’ve set the DurationBack of the Animation properties to 0, and a setTimeout every time the button is hit. This kinda works, but using setTimeout is not very nice. Also, when you hit the button again before the animation / setTimeout is finished, nothing happens (of course).

How i would usually do this is by creating a new Circle view behind the button, scaling that up, and when the animation is done; removing the view from it’s parent.

Is something like this possible?

Thanks in advance,

Erik

I’ll let someone else answer the trigger-thing, but as for the Material Design-inspired button, did you take a look at this example?

https://www.fusetools.com/examples/material-upvote

Yes, actually, i got inspired by that one. The thing is, that just animates between 2 states. What i’m looking for is a single animation, preferably triggered by JS, that just does one job.

Or even better, a way to insert new Views (is a Circle called a View or a Layer or what do you call it?) from JS, and maybe even launching Animations on the JS generated views.

Alright i think i’m getting the hang of it, doing so much programming in XML / UX takes some time to get used to!

What i did; made an Observable that’s an array of all the circles i’m going to use. Used the <Each> tag to iterate through that Observable, then i used the <WhileTrue> trigger to animate the element. I added a Callback with a handler that removes the first item in the Array, and it all works!

Still, i think it would be kinda nice to give some more power to JS, adding / modifying ux elements, in some use cases this can be handy. For now, i fixed it the ‘UX’ way.

Thanks!

Hi!

Sounds like you solved your issue? :slight_smile: I do agree that it could be handy to have more control over UX elements from JS, but a design decision we made was to keep a strict border between UX and JS since the moment you have UI leaks into your business logic or business logic leaks into your UI the gates to hell will open. For animation and other FPS dependent user experience features that you want to make should be done in UX or Uno :slight_smile:

That said, if you know about some usecase where you can’t solve the issue without JS or it actually makes sense to do roundtrips to JS, please let me know! :slight_smile:

Hi! I want to trigger an animation when a marker in a map is tapped. Putting a inside MapView does not work. The code would not show in the preview. I have urlencoded it. Decode it here: http://meyerweb.com/eric/tools/dencoder/

%3CMapView%20ux%3AName%3D%22map%22%20ShowMyLocation%3D%22True%22%20ShowMyLocationButton%3D%22True%22%3E%0A%20%20%20%20%3CMarkerTapped%3E%0A%20%20%20%20%20%20%20%20%3CChange%20whatever%20%2F%3E%0A%20%20%20%20%3C%2FMarkerTapped%3E%0A%0A%20%20%20%20%3CEach%20Items%3D%22%7Bcompanies.companies%7D%22%3E%0A%20%20%20%20%20%20%20%20%3CMapMarker%20Latitude%3D%22%7Blat%7D%22%20Longitude%3D%22%7Blong%7D%22%20Label%3D%22%7Bname%7D%22%20IconFile%3D%22%7Bpin%7D%22%20%2F%3E%0A%20%20%20%20%3C%2FEach%3E%0A%3C%2FMapView%3E

Please open a new thread for this (preferably in the “How To”-part of the forum) rather than reviving a really old one.

You can use Github flavored markdown to put code in your posts (basically just have a line with 3 backticks before and after the code blocks)