I constantly find my self in a situation where I would like to show something and then animate it out from the screen.
It would be very useful if something like this worked:
<Panel ux:Name="MyPanel" IsEnabled="false" Opacity="0">
<WhileEnabled>
<Change MyPanel.Opacity="1" Duration=".5" />
<Change MyPanel.IsEnabled="false" Delay="1" />
</WhileEnabled>
<WhileDisabled>
<Change MyPanel.Opacity="0" Duration=".5" />
</WhileDisabled>
</Panel>
...
MyPanel.IsEnabled = true;
WhileEnabled and WhileDisabled exists and should work. If it doesn’t - could you please provide a test case?
https://www.apexvj.com/upload/EnableDisable.rar
Note, that click doesn’t work in preview. That’s another bug. However if you build this to DotNetExe or mobile you’ll see that the red rectangle appears to screen when MyPanel IsEnable=true, but it doesn’t fade out.
Ah okay.
Note that you only need one of those triggers. Only use WhileEnabled, the state while disabled is implicitly the rest state. In your above code you have two competing animators for the same property MyPanel.Opacity.
Ok fine, but the goal is to make animation where element comes in and then goes away and this could be triggered somehow from code.
Yes - for this just use <WhileEnabled> or <WhileDisabled> depending on what is the default state. Flip IsEnabled to trigger this from code.
For anywone using JS, the same can be done with a <WhileTrue Value="{someflag}">.
But it doesn’t work. The default state is that it’s invisible (IsEnabled = false)
<App Theme="Basic" ClearColor="#000" ux:Class="MainView" ux:AutoCtor="false">
<Panel>
<Panel Width="100" Height="100" ux:Name="MyPanel" Opacity="0" IsEnabled="false">
<Rectangle>
<SolidColor Color="#FF0000" />
</Rectangle>
<WhileEnabled>
<Change MyPanel.Opacity="1" Duration=".5" />
<Change MyPanel.IsEnabled="false" Delay="1" />
</WhileEnabled>
</Panel>
<Button Text="Foo" Alignment="Bottom" Margin="20" Pointer.Released="OnClick" />
</Panel>
</App>
…
MyPanel.IsEnabled = true;
This only make it visible, but never fade out.
I constantly find my self in a situation where I would like to show something and then animate it out from the screen.
So you want to display something just briefly and then hide it again?
Sounds like what you want is a Timeline:
<Timeline ux:Name="showSomething">
<Change Target="MyPanel.Opacity">
<Keyframe Time="0" Value="0" />
<Keyframe Time="1" Value="1" />
<Keyframe Time="2" Value="0" />
</Change>
</Timeline>
And then from Uno:
showSomething.Progress = 0;
showSomething.Resume();
Hey,
still no with timeline. I uploaded a test case for you. https://www.apexvj.com/upload/EnableDisable2.rar
<App Theme="Basic" ClearColor="#000" ux:Class="MainView" ux:AutoCtor="false">
<DockPanel>
<iOS.StatusBarConfig Style="Dark" IsVisible="false" Animation="Slide" />
<StatusBarBackground DockPanel.Dock="Top" />
<BottomBarBackground DockPanel.Dock="Bottom" />
<Panel>
<Panel Width="100" Height="100" ux:Name="MyPanel" Opacity="0">
<Rectangle>
<SolidColor Color="#FF0000" />
</Rectangle>
<Timeline ux:Name="showSomething">
<Change Target="MyPanel.Opacity">
<Keyframe Time="0" Value="0" />
<Keyframe Time="1" Value="1" />
<Keyframe Time="2" Value="0" />
</Change>
</Timeline>
</Panel>
<Button Text="Foo" Alignment="Bottom" Margin="20" Pointer.Released="OnClick" />
</Panel>
</DockPanel>
And in Uno:
public void OnClick(object sender, Fuse.Input.PointerReleasedArgs args)
{
debug_log "click";
showSomething.Progress = 0;
showSomething.Resume();
}
But this doesn’t start the animation.
From UX you can use the Pulse action to trigger a Timeline, such as <Pulse Target="showSomething"/>
This will play it forward and backward. So you just need to make your timeline reveal the item and then it will invert that. A simple Change with an easing, and possible DurationBack might be best here.
In an upcoming release there is PulseForward and PulseBackward as well that only play it in one direction. This will allow more configuration of the path with keyframes.
–
Note that setting the Progress on a Timeline actually “seeks” to that location. If you are using timeline and want to play to a given progress use the TargetProgress property.
Hmm ok, I got it working with same ux code, but in Uno:
showSomething.Progress = 0;
showSomething.TargetProgress = 1;
Maybe this is a bug, but easing doesn’t have any effect on animation here:
<Panel Width="100" Height="100" ux:Name="MyPanel" Opacity="1">
<Rectangle>
<SolidColor Color="#FF0000" />
</Rectangle>
<Scaling X="0" Y="0" ux:Name="PanelScale" />
<Timeline ux:Name="showSomething">
<Change Target="PanelScale.X" Easing="ElasticOut">
<Keyframe Time="0" Value="0" />
<Keyframe Time="1" Value="1" />
<Keyframe Time="2" Value="0" />
</Change>
<Change Target="PanelScale.Y">
<Keyframe Time="0" Value="0" />
<Keyframe Time="1" Value="1" />
<Keyframe Time="2" Value="0" />
</Change>
</Timeline>
</Panel>
…
showSomething.Progress = 0;
showSomething.TargetProgress = 1;
Keyframes are a replacement to Easing, so you can’t use both at the same time.
I wonder why this doesn’t work. It scales to 1 and then scales back, but stops around 0.5
<Panel>
<Panel Width="100" Height="100" ux:Name="MyPanel" Opacity="1">
<Rectangle>
<SolidColor Color="#FF0000" />
</Rectangle>
<Scaling X="0" Y="0" ux:Name="PanelScale" />
<Timeline ux:Name="showSomething">
<Change Target="PanelScale.X" Duration="1" Value="1" Easing="ElasticOut" />
<Change Target="PanelScale.Y" Duration="1" Value="1" />
<Change Target="PanelScale.X" Duration="1" Value="0" Delay="1" />
<Change Target="PanelScale.Y" Duration="1" Value="0" Delay="1" />
</Timeline>
</Panel>
<Button Text="Foo" Alignment="Bottom" Margin="20" Pointer.Released="OnClick" />
</Panel>
...
showSomething.Progress = 0;
showSomething.TargetProgress = 1;
It seems like you got your initial issue solved, but Id like to ask something: Does what your working on require you to use the external .uno file? Because I got your initial issue working fine (at least, I assume what I did was what you needed) without it. I just simply did
<App Theme="Basic">
<Panel>
<Rectangle ux:Name="rec" Fill="#000" Width="250" Height="75" Opacity="0"/>
<Button Text="Foo" Alignment="Bottom" Margin="20">
<Clicked>
<Toggle Target="showRec"/>
</Clicked>
</Button>
<WhileTrue ux:Name="showRec">
<Change Target="rec.Opacity">
<Keyframe Value="1" Time=".25"/>
<Keyframe Value="1" Time=".5"/>
<Keyframe Value="1" Time=".75"/>
<Keyframe Value="1" Time="1"/>
<Keyframe Value="1" Time="1.25"/>
<Keyframe Value="0" Time="1.5"/>
</Change>
</WhileTrue>
</Panel>
</App>
I also got your second question working using just keyframes
<App Theme="Basic">
<Panel>
<Panel Width="100" Height="100" ux:Name="MyPanel" Opacity="1">
<Rectangle>
<SolidColor Color="#FF0000"/>
</Rectangle>
<Scaling X="0" Y="0" ux:Name="PanelScale"/>
<WhileTrue ux:Name="recSize">
<Change Target="PanelScale.X" Easing="ElasticOut">
<Keyframe Value="1" Time=".25"/>
<Keyframe Value="1" Time=".5"/>
<Keyframe Value="1" Time=".75"/>
<Keyframe Value="1" Time="1"/>
<Keyframe Value="1" Time="1.25"/>
<Keyframe Value="0" Time="1.5"/>
</Change>
<Change Target="PanelScale.Y" Easing="ElasticOut">
<Keyframe Value="1" Time=".25"/>
<Keyframe Value="1" Time=".5"/>
<Keyframe Value="1" Time=".75"/>
<Keyframe Value="1" Time="1"/>
<Keyframe Value="1" Time="1.25"/>
<Keyframe Value="0" Time="1.5"/>
</Change>
</WhileTrue>
</Panel>
<Button Text="Foo" Alignment="Bottom" Margin="20">
<Clicked>
<Toggle Target="recSize"/>
</Clicked>
</Button>
</Panel>
</App>