I want to make text to fade in, fade out, then change the text, then fade in and out again with the new text and so on (Tried to get a video of it, but some encoding stuff failed).
How do I go about this in the smartest and most clean way? This is the code I have now, that is working, but its messy:
I have all the fade in/out in one change set with keyframes, and I “time” the keyframes so that I can use a separate set tag for changint the value, and I then count the Delay so that the change happens when Opacity is 0:
<Page ux:Class="SplashScreen">
<StackPanel ux:Name="sp1" X="50%" Y="25%" Anchor="50%,50%">
<AlfaPro ux:Name="alfaProIcon" />
<TextView ux:Name="tvWelcome" Value="Welcome to Alfa Pro" Alignment="Center" Opacity="0" TextColor="#fff" />
</StackPanel>
<Timeline ux:Name="timeline">
<Move Target="sp1" Y="-400" Duration="0" />
<Change Target="tvWelcome.Opacity" Delay="1.5">
<Keyframe Value="1" Time="1" />
<Keyframe Value="1" TimeDelta="2" />
<Keyframe Value="0" TimeDelta="1" />
<Keyframe Value="1" TimeDelta="1" />
<Keyframe Value="1" TimeDelta="1" />
<Keyframe Value="0" TimeDelta="1" />
</Change>
<Set tvWelcome.Value="My New value" Delay="5.5" />
<Move Target="sp1" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" />
</Timeline>
<WhileActive>
<Change timeline.TargetProgress="1" />
</WhileActive >
</Page>
But this seems very cumbersome. Any ideas?
Hi!
For this I would use an Observable to hold the text in JS, and then databind that to the Items of an <Each> in UX with <Text> inside and <AddingAnimation> and <RemovingAnimation> on the text to define the animation. To change the text simply write to the .value of the observable
Something like this:
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
var text = Observable("Hello");
var count = 1;
setInterval(function() {
text.value = "Hello " + (count++);
}, 3000)
module.exports = { text }
</JavaScript>
<Panel>
<Each Items="{text}">
<Text ux:Name="text" Value="{}" Alignment="Center">
<AddingAnimation>
<Move X="100" Duration="0.3" Easing="CubicIn" />
<Change text.Opacity="0" Duration="0.3" />
</AddingAnimation>
<RemovingAnimation>
<Move X="-100" Duration="0.3" Easing="CubicOut" />
<Change text.Opacity="0" Duration="0.3" />
</RemovingAnimation>
</Text>
</Each>
</Panel>
</App>
Alright, thanks for the input and example.
Can I make a suggestion? Is there a reason why you cannot animate one object more then once in a timeline (see this discussion: https://www.fusetools.com/community/forums/howto_discussions/timeline_does_not_allow_mod_of_same_object_twice?page=1 )
Cause the above example seems to be a bit “sidetracked”; I think most ppl see the timeline and the examples and would like to use that to control the whole animation. If you would make it possible to animate one object several times, that would make the animations much easier to create, read and understand, if its all in one timeline, in a linear way. And perhaps also consider a “DelayDeltaXXX” to have waiting periods before next state:
<Timeline ux:Name="timeline">
<Move Target="sp1" Y="-400" Duration="0" /> // Happens immediately
<Move Target="sp1" Y="400" Duration="1" Delay="0.5" Easing="BounceOut" /> // Starts 0.5 sec in, takes 1 sec
<Change tvWelcome.Opacity="1" Duration="1" DelayDeltaStart="0.5"/> // Starts 0.5 sec into the start of row 31, so halfway through the easing
<Change tvWelcome.Opacity="0" Duration="1" DelayDeltaEnd="3"/> // fades to invisible, 3 sec after it became opacity 1, so 3 sec after row 32 anim complete
<Set tvWelcome.Value="My next message" DelayDeltaEnd="0" /> // Sets the new text directly after Opacity became 0 in row 33
<Change tvWelcome.Opacity="1" Duration="1" DelayDeltaEnd="0"/> // and starts fading in the text directly after the text was set to the new value
</Timeline>
So:
-
Does it sound reasonable?
-
Is it doable?
I hope my input is of value and not taken as complaining too much, just some constructive input =)
Thanks!
The Keyframe approach solves several problems over the multiple animator approach. A curve of animation is much better described that way. To get Change to support the same continous animation would require adding more properties, which we believe would complicate it more than simplify it.
I understand you’re looking for more of a total timeline view rather than a per property view. This is something we hope to eventually have in the high level tools, an editor for the timeline that could better visualize when things are happening.
So, basically, there is no way to animate the same object then and you dont have plans to make it work?
Ted: Assuming you read eda-qa’s answer carfeully, I don’t understand your question.
The Animation system in Fuse is on purpose not timeline-centric, because timeline-based animation has lots of problems that become apparent when dealing with dynamically sized content, responsive layouts, different screensizes etc. Instead, Fuse is based on declarative triggers that respond to events and animate a temporary change in visual state based on that. This is proven to be a much more robust and scalable system.
So in this particular case where you want to replace some text from JS, and have the old text animate out and the new text animate in, the appropriate way to do that is with AddingAnimation and RemovingAnimation as in my example above. Creating a timeline that performs both animations is not recommended as that requires a lot of imperative micro-management from JS to make that work, replacing what object is animated in and out manually etc.
You can, as eda-qa points out use Keyframe to animate the same property through multiple values over the same timeline. So you can achieve what you are trying to do but it’s not the recommended way of doing things.
In general the use case for Timeline is only for things like creating a “movie clip” that animates elements of a pre-defined absolute size and position. Timeline is not for animating dynamic things like text that can change based on logic. For that, use more specific triggers like AddingAnimation, WhileTrue etc.
I did use Keyframes, like this for example:
<Timeline ux:Name="timeline" Progress="{jsProgress}" >
<Move Target="sp1" Y="-400" Duration="0" />
<Change Target="tvWelcome.Opacity" Delay="0.5">
<Keyframe Value="1" Time="0.5" />
<Keyframe Value="1" TimeDelta="0.5" />
<Keyframe Value="0" TimeDelta="0.5" />
</Change>
<Move Target="sp1" Y="400" Duration="0.5" Delay="0.1" Easing="BounceOut" />
</Timeline>
The problem is that efter that Change Target=“tvWelcome.Opacity”, I couldnt later on animate it again, as far as I understood it. So using KeyFrames works if its in one go, but not to have that more advanced Timeline I suggested above.
Im not sure exactly how to make use of the AddingAnimation and RemovingAnimation (except in the example u showed above), but I will keep it in mind and see if I can fit it in somewhere when I try my animations.
You can animate it again “later” by simply using a long TimeDelta with the same value to make it hold that value for some given time.
Then again, I do not recommend using keyframes or timelines for any common app animation use case. Use scenario-specific triggers and animators instead. Name your use case and there is probably a trigger for it.
Thanks for input.
Yes, I am aware of the TimeDelta, but using it that way is messy; thats why i suggested a more linear approach above.
Perhaps I am going about this the wrong way. As you might have seen my other forum posts regarding animations, I am struggling with doing animations that depend on other logic…
Perhaps I am going about this the wrong way.
Yes, as I have been trying to point out over several post, using Timeline is absolutely the wrong way.
I am struggling with doing animations that depend on other logic.
This is exactly why Fuse invented the trigger/animator pattern, to make it easier to create animations that depend on logic, responsive design, dynamic content etc.
This means you have to learn how to use triggers like AddingAnimation etc. instead of trying to bend Timeline to do something it wasn’t meant for.
