Dynamically change the scale target

How-to Discussions
1

Hi i was playing around with some animations and was wondering if it was possible to have different elements navigate to a separate page and have animations applied to the clicked element?

Description:
Im using a Navigator to set up 2 pages and navigations between them. Following is my Main.ux

<App>
  <Router ux:Name="router" />
  <Navigator DefaultPath="one">
    <PageOne ux:Template="one" router="router" />
    <PageTwo ux:Template="two" router="router" />
  </Navigator>
</App>

in my page one I have defined 2 circles that when clicked will navigate to the next page. I have placed a scale animation to scale the circle to full screen like the login example found in the docs.

<Page ux:Class="PageOne" Transition="None">
	<Router ux:Dependency="router" />

	<JavaScript>
		var Observable = require("FuseJS/Observable");

		goToNext = function() {
			router.push('two');
		}

		module.exports = {
			goToNext
		};
	</JavaScript>

	<Circle ux:Class="MyCircle" Width="50" Height="50" Color="#f00" Margin="0,10,0,10" />

	<Panel ux:Name="transitionScaleGuide" Width="500%" Height="500%" Alignment="Center" HitTestMode="None" BoxSizing="FillAspect" Aspect="1" />

    <Transition To="two">
        <Scale Target="myCircle" Factor="3" RelativeTo="SizeFactor" RelativeNode="transitionScaleGuide"
			       Delay="0" Duration="0.7" Easing="ExponentialInOut" DurationBack="0" />
		<Change myCircle.Opacity="0" Duration="0.1" Delay="0.7" />
    </Transition>

    <StackPanel Alignment="VerticalCenter">
		<MyCircle ux:Name="myCircle" Clicked="{goToNext}" />
		<MyCircle Clicked="{goToNext}" />
	</StackPanel>
</Page>

Is it possible to set the scale animation to the circle that has been clicked? If so, how would I go about it? Thanks in advance :slight_smile:

2

Hi kvhauw,

to apply anything to something that has been clicked, you have to… apply the anything to the something. Or something along those lines.

Anyway, here’s the thing. The Transition element matches page-wide transforms semantically better and I would argue that the scaling of your circles should not be semantically linked to a “transition to another page”. The scaling is triggered by the click and that’s all the circles should care about; they don’t need to know where you’re transitioning to.

With that in mind, I moved your Scale and Change triggers inside of a Clicked trigger, inside of the MyCircle UX class. Now they animate the instance you click, and that animation does not depend on any target page or a transition.

<App>
  <Router ux:Name="router" />
  <Navigator DefaultPath="one">
    <PageOne ux:Template="one" router="router" />
    <PageTwo ux:Template="two" router="router" />
  </Navigator>

  <Page ux:Class="PageOne" Transition="None">
      <Router ux:Dependency="router" />

      <JavaScript>
          var Observable = require("FuseJS/Observable");

          goToNext = function() {
              router.push('two');
          }

          module.exports = {
              goToNext
          };
      </JavaScript>

      <Circle ux:Class="MyCircle" Width="50" Height="50" Color="#f00" Margin="0,10,0,10">
        <Panel ux:Dependency="scaleGuide" />
        <Clicked>
          <Scale Factor="3" RelativeTo="SizeFactor" RelativeNode="scaleGuide"
                     Delay="0" Duration="0.7" Easing="ExponentialInOut" DurationBack="0" />
          <Change this.Opacity="0" Duration="0.1" Delay="0.7" />
        </Clicked>
      </Circle>

      <Panel ux:Name="transitionScaleGuide" Width="500%" Height="500%" Alignment="Center" HitTestMode="None" BoxSizing="FillAspect" Aspect="1" />

      <StackPanel Alignment="VerticalCenter">
          <MyCircle Clicked="{goToNext}" scaleGuide="transitionScaleGuide" />
          <MyCircle Clicked="{goToNext}" scaleGuide="transitionScaleGuide" />
      </StackPanel>
  </Page>

  <Page ux:Class="PageTwo" Transition="None" Opacity="0">
    <ActivatingAnimation>
      <Change this.Opacity="1" Delay="0.4" Duration="0.2" />
    </ActivatingAnimation>
    <Router ux:Dependency="router" />
    <JavaScript>
      module.exports.goBack = function() {
        router.goBack();
      };
    </JavaScript>
    <Clicked>
      <Callback Handler="{goBack}" />
    </Clicked>
    <Rectangle Color="#ff0" />
  </Page>

</App>

Hope this helps!

3

Perfect, thanks!