Need Animations To Fully Play Through

General
1

I have royally confused myself here so if the answer to this problem is easy, please go easy on me.

My end goal here is the following:

  • Click Submit Button
  • A circle the same color as the Button grows to Fill the Screen
  • Success Message is displayed
  • Message goes away
  • Circle shrinks back out of sight
  • All is as if nothing happend

And Here is the code I’ve got so far:

<App Theme="Basic">
    <JavaScript>
            var UserEvents  = require('FuseJS/UserEvents');

            var submit = function(props) {
                UserEvents.raise("UserInfoComplete");
            };

             module.exports = {
                submit:submit
            };
    </JavaScript>

    <DockPanel>
        <Rectangle ux:Name="submitBtn" Dock="Bottom" Height="60" Fill="#FF0000" Clicked="{submit}">
            <Text Value="Submit" />
        </Rectangle>
        <Circle ux:Name="messageCircle" Fill="#FF0000" MaxWidth="2000" Width="2000" MaxHeight="2000" Height="2000">
            <Scaling ux:Name="messageScaling" Factor="0" />
        </Circle>


        <OnUserEvent Name="UserInfoComplete" Filter="Global">
            <Set myTimeline.TargetProgress="1" />
        </OnUserEvent>

        <Timeline ux:Name="myTimeline">
            <BringToFront="messageCircle" />
            <Change messageScaling.Factor="1" Duration="0.5" Delay="1" DurationBack="0.5" DelayBack="1" Easing="CircularInOut" />
        </Timeline>
    </DockPanel>

The biggest issue here is that the Timeline doesn’t perform the “out” animations, so the result of the above is the red circle expands, but never goes away.

I now realize after chatting on slack with Jake and some other helpful people that this isn’t the best method for doing this.

So, anything you can offer up to achieve this animation flow would be much appreciated!

Many many thanks in advance!

-Levi

2

Aha, now I understand your case a bit more :slight_smile: Thanks for the isolated code sample!

While I don’t think we currently have a tool that will play the animation you want forwards and backwards automatically (which we probably should), I did try a couple things to work around this.

The first thing I tried was to have multiple Change animators in the timeline, so that it would play one and then the other. This didn’t work, and I’m guessing the problem is that multiple Change animators on the same Timeline would just override each other. I don’t think we have properly defined semantics for that, other than “it’s undefined so don’t do it,” but worth a shot anyways :slight_smile:

The next thing I tried was to store the “isShowingMessageCircle” state in a JS Observable and using a JS timer to change its state back after a period to hide it again. While it works, I don’t like it for a couple reasons:

  • Some animation state has now leaked into JS. Ideally you would never run into a case where this would be necessary; UX should do all the stuff you need (but it seems we’ve come accross a case where it doesn’t yet).
  • Sort of a side effect of the first point; the delay with which the state will change has now been separated from the rest of the timing information. This means you may have to go two places if you update this animation.

With those disclaimers out of the way, here’s the code that works reliably in this particular case:

<App Theme="Basic">
    <JavaScript>
        var UserEvents  = require('FuseJS/UserEvents');
        var Observable = require('FuseJS/Observable');

        var isShowingMessageCircle = Observable(false);

        var submit = function(props) {
            isShowingMessageCircle.value = true;
            setTimeout(function() {
                isShowingMessageCircle.value = false;
            }, 2000);
        };

        module.exports = {
            isShowingMessageCircle:isShowingMessageCircle,
            submit:submit
        };
    </JavaScript>

    <DockPanel>
        <Rectangle ux:Name="submitBtn" Dock="Bottom" Height="60" Fill="#FF0000" Clicked="{submit}">
            <Text Value="Submit" />
        </Rectangle>
        <Circle ux:Name="messageCircle" Fill="#00ff00" MaxWidth="2000" Width="2000" MaxHeight="2000" Height="2000">
            <Scaling ux:Name="messageScaling" Factor="0" />
        </Circle>

        <WhileTrue Value="{isShowingMessageCircle}">
            <BringToFront Target="messageCircle" />
            <Change messageScaling.Factor="1" Duration="0.5" Delay="1" DurationBack="0.5" DelayBack="1" Easing="CircularInOut" />
        </WhileTrue>
    </DockPanel>
</App>

That said, I’ll bring up this topic internally so we can start working towards a pure UX tool to do this job :slight_smile:

3

That’s great Jake thanks!!! Looking forward to seeing what the future holds for this type of animation!

4

Me too! Just filed an issue internally about it so we can start discussing it :slight_smile:

5

There is the Pulse action:

<Pulse Target="myTimeline"/>

This plays the timeline forward and backward.

There is also PulseForward and PulseBackward if you’d like to just play in one direction (these seek the end first and play in one direction, deactivating the animation when complete).

6

For real? That is perfect edA-qa mort-ora-y! I’ll try this out and see how it goes!

7

Any news on this? How did it go? :slight_smile:

8

Actually got off on a tangent and haven’t tested this yet. I will plan to early next week tho, and I’ll be sure to report back.

9

Awesome :slight_smile: