Ordering of ActivatingAnimation and DeactivatingAnimation

Bug Reports
1

Running Fuse 0.29.0 on El Capitan.

This is probably not a bug…it’s likely I’m doing something wrong, but thought this seemed like the right place.

I’m trying figure out the ordering of ActivatingAnimation and DeactivatingAnimation. When paging through a PageControl left-to-right, the ActivatingAnimation appears to be triggered before the DeactivatingAnimation of the previous page. When paging right-to-left, it looks like the DeactivatingAnimation is being triggered first.

Some source to repro with some notes of what I’m trying to accomplish…

  • Basically I’m just messing around trying to reproduce the iOS camera app.
  • The code below is pared down to a green panel with text Hello World. (this is supposed to be the camera view)
  • In front of that panel is a PageControl to switch between the different modes of operation.
  • When switching from one mode to another, the camera view is supposed to blur. I handle this with the ActivatingAnimation and DeactivatingAnimation.
  • You might ask why I need the DeactivatingAnimation when I already set the blur radius to 0 on the Activated trigger, but I’ll be posting another bug report on that.
<App>
  <JavaScript>
    var Observable = require("FuseJS/Observable");
    module.exports = {
      pagesView: Observable(
        {name: "TIME-LAPSE"},
        {name: "SLO-MO"},
        {name: "VIDEO"},
        {name: "PHOTO"},
        {name: "SQUARE"},
        {name: "PANO"}
      )
    };
  </JavaScript>

  <Panel>

    <Panel>
      <LinearNavigation ux:Name="nav">
        <NavigationMotion GotoEasing="QuadraticOut" GotoDuration="0.3" />
      </LinearNavigation>
      <SwipeNavigate SwipeDirection="Left"/>
      <Panel ux:Name="self" ux:InnerClass="Mode">
        <ActivatingAnimation>
          <Change self.Opacity="1" Duration="0.5"/>
          <Change text.Color="#ffaa00" Duration="0.5" />
          <Set blur.Radius="2" />
          <DebugAction Message="{name}" />
          <DebugAction Message="activating" />
        </ActivatingAnimation>
        <Activated>
          <Set blur.Radius="0" />
          <DebugAction Message="{name}" />
          <DebugAction Message="activated" />
        </Activated>
        <DeactivatingAnimation>
          <Set blur.Radius="0" />
          <DebugAction Message="{name}" />
          <DebugAction Message="deactivating" />
        </DeactivatingAnimation>
        <EnteringAnimation Scale="0.25">
          <Move RelativeTo="Size">
            <Keyframe Time="0.25" X="-0.2" />
            <Keyframe Time="0.5"  X="-0.4" />
            <Keyframe Time="0.75" X="-0.6" />
            <Keyframe Time="1"    X="-0.8" />
          </Move>
        </EnteringAnimation>
        <ExitingAnimation Scale="0.25">
          <Move RelativeTo="Size">
            <Keyframe Time="0.25" X="0.2" />
            <Keyframe Time="0.5"  X="0.4" />
            <Keyframe Time="0.75" X="0.6" />
            <Keyframe Time="1"    X="0.8" />
          </Move>
        </ExitingAnimation>

        <Panel HitTestMode="LocalBounds" Height="100%" Color="#00000000">
          <DockPanel>
            <Text Dock="Bottom" Y="-90" ux:Name="text" Margin="10" FontSize="12" Alignment="Center" Color="#ffffff" Value="{name}"></Text>
          </DockPanel>
        </Panel>
      </Panel>

      <Each Items="{pagesView}">
        <Mode />
      </Each>
    </Panel>

    <Panel Height="100%" Color="#007700">
      <Blur ux:Name="blur" Radius="2" />
      <Text Alignment="Center" Value="Hello World" Color="#ffffff"/>
    </Panel>

  </Panel>

</App>

Here’s an example of the logging I get when going from time-lapse to slo-mo:

LOG: TIME-LAPSE
LOG: deactivating
LOG: SLO-MO
LOG: activating
LOG: SLO-MO
LOG: activated

Bug when going the opposite direction:

LOG: TIME-LAPSE
LOG: activating
LOG: SLO-MO
LOG: deactivating
LOG: TIME-LAPSE
LOG: activated

The effect is that I don’t get the blur effect when going right-to-left. Is this ordering by design?

Thanks!
-Atish

2

ActivatingAnimation and DeactivatingAnimation are both continious triggers that apply based on the navigation progress. They will meet in the middle, both being at 0.5 progress at the same time.

They both express a change from the rest state of the page. It’s kind of uncommon to need to use both of them. You either express the change to the inactive state, or to the active state.

This topic covers it a bit: https://www.fusetools.com/docs/navigation/navigationorder

3

Thank you edA-qa mort-ora-y! This makes sense. I alluded to another potential bug regarding the activated trigger, but I’ve yet to whittle it down to a post-able bug report. This issue can be resolved.