SwipeGesture: how to disable the apparent auto-complete when the Length hasn't been reached

How-to Discussions
1

Continuing from this post: https://www.fusetools.com/community/forums/permalink/38a9f57b-6f97-487a-819a-f1db534a85ea

SwipeGesture will auto-complete once a swipe has reached (what appears to be) 50-60% of the Length attribute. Swiped triggers automatically if beyond a certain percentage of the drag and let go (looks like about 50-60% of drag Length). Using the example in the link above, if you slowly drag and then let go before reaching the full trigger Length, the swipe will continue on its own to the finish point. Does anyone know if this can be turned off. The different Type modes didn’t seem to address the behavior. It feels more tactile (to me), using a SwipeGesture in this fashion, if it only fires the Swiped trigger when the swipe actually is released after the full Length has been reached.

It is possible; however, if the user changes their mind, they can back out of the swipe as long as they return to a location prior to the the transition point mentioned above (less than 50-60%).

From the documentation and Mortoray’s post, I understand there is a physics component that deals with swipe velocity. However, the behavior is the same regardless of the velocity when the swipe ends. It is reproducible to slowly drag in the swipe direction (down – in the example code linked above), completely stop at about 50%, hold the position, and release. The SwipeGesture continues on to completion anyway.

Fuse version 1.5.0 (build 15046)

Uno version 1.4.3 (build 6115) Windows 10 x64 83d8656

2

I’m uncertain now if the the triggering threshold (50%) was intended to also apply to non-active swipes. It’s possible it’s a defect and that shouldn’t be happening. I’ll investigate this and figure out what can be done: either fix a defect and/or provide an option to configure the trigger point.

3

Hello @edA-qa mort-ora-y! Thanks for the response!

Ultimately a configurable option would be the most flexible - with the ability to turn it off or set it to such extremes that it’s the next best thing.

I also noticed another behavior that I cannot seem to control. i.e. If I swipe to something like 75%, then stop, and come back to just under the 50% point and let go, the animation rewinds, which feels somewhat sluggish. No idea what timing is controlling it – I’ve tried DurationBack="0" on the SwipingAnimation control, but it seems to be ignored. The pulling animation (SwipingAnimation) has to rewind, then all of the WhileSwiping animations rewind, which is fine for the WhileSwiping pieces, DurationBack seems to work on the WhileSwiping animations, so I can control this aspect – but not the SwipingAnimation.

Here’s the code (more or less the same as what I posted in the other thread with a few modifications to try and control the animation rewinds.

<App Background="Black">
    <JavaScript>
        function reload() {
            console.log("reload was called");
        }
        module.exports = {
            reload: reload
        }
    </JavaScript>
    <ClientPanel>
        <SwipeGesture ux:Name="swipe" Direction="Down" Length="200" />
        <SwipingAnimation Source="swipe">
            <Change pulledAnimator.Width="width(pulledPanel)" DurationBack="0" />
            <Change pulledAnimator.Height="height(pulledPanel)" DurationBack="0"/>
        </SwipingAnimation>
        <Swiped Source="swipe">
            <Callback Handler="{reload}" />
        </Swiped>
        <WhileSwipeActive Source="swipe">
            <Change pulledText.Value="- RELEASE TO RELOAD -" />
        </WhileSwipeActive>
        <WhileSwiping Source="swipe">
            <Change pulledPanel.Height="50" 
                    Duration=".3" Easing="CubicOut" 
                    DurationBack=".1" EasingBack="CubicOut" />
            <Change pulledPanel.Opacity=".8" Duration=".3" DurationBack=".1" />
            <Change pulledText.Opacity="1" Duration=".5" DurationBack=".1" />
            <Change pulledText.Opacity=".8" Duration=".3" />
            <Change fillRect.Opacity=".4" Duration=".3"/>
            <Change bottomRect.Opacity=".5" Duration=".4"/>

        </WhileSwiping>
        
        <!-- top docked panel -->
        <Panel Dock="Top" Color="#aaa">
            <Text Value="I am at the top!" Alignment="Center" FontSize="24" />
        </Panel>
        <!-- this is the pulled panel indicator -->
        <Panel Dock="Top">
            <Rectangle ux:Name="pulledPanel" Layer="Overlay" Height="0" Color="#48f6" Opacity="0" Anchor="50%,0%">
                <Text ux:Name="pulledText" Padding="0,0,0,12" Alignment="Bottom" FontSize="14" Color="#fff" TextWrapping="Wrap" TextAlignment="Center" Opacity="0" Value="Pull to Reload" />
                <Rectangle ux:Name="pulledAnimator" Height="0" Width="0" Color="#48fd" Alignment="TopCenter" CornerRadius="5" />
            </Rectangle>
        </Panel>

        <!-- bottom docked panel -->
        <Panel Dock="Bottom" ux:Name="bottomRect" Color="#555">
            <Text Value="I am at the bottom displaying some data!" TextWrapping="Wrap" TextAlignment="Center" FontSize="24" Color="#aaa" />
            <Clicked Handler="{reload}" />
        </Panel>
        <PageControl ux:Name="fillRect">
            <PageDemo2 />
            <PageDemo2 Color="#afa" />
            <PageDemo2 Color="#faa" />
        </PageControl>
    </ClientPanel>
    <Panel ux:Class="PageDemo2" Color="#aaf">
        <Text Value="I am one page of the fill!" Alignment="Center" FontSize="24" />
    </Panel>
</App>
4

NOTE: I just tried this and it seemed to have no effect, regardless whether Duration or DurationBack is used:

        <SwipingAnimation Source="swipe">
            <Change pulledAnimator.Width="width(pulledPanel)" DurationBack="0" />
            <Change pulledAnimator.Height="height(pulledPanel)" DurationBack="0"/>
            
            <TriggerAnimation ux:Binding="BackwardAnimation">
                <Change pulledAnimator.Width="width(pulledPanel)" DurationBack="5" />
                <Change pulledAnimator.Height="height(pulledPanel)" DurationBack="5"/>
            </TriggerAnimation>
        </SwipingAnimation>