Touch Tolerance

How-to Discussions
1

Hi all,

I found your project is amazing and i was wondering if I can create an a object with movement tolerance which snap back to origin position.

see this link https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/e1c2ce52737951.5992b0e174f03.gif.

2

Oh that looks great, and appears to be totally doable. You should look into SwipeGesture, and couple that with an Attract.

Another way might be looking into a single-axis-contrained Draggable, Translation, UX expressions and Attract.

This certainly will take some reading and playing around, but should be a fun exercise. Keep us posted!

3

Alright, I actually ended up willing to give it a go myself, and here’s a little proof of concept. It’s not exactly what your GIF shows, but at least it’s something in the right direction. Hey, this one even has a two-way bound property for the counter :slight_smile:

<App>
    <Panel ux:Class="ElasticCounter" ClipToBounds="true">
        <int ux:Property="Counter" />
        <JavaScript>
            var c = this.Counter.mapTwoWay(function(v) {
                return v;
            }, function(v, sv) {
                return v;
            });
            function inc() {
                c.value++;
            }
            function dec() {
                c.value--;
            }
            module.exports = {
                c: c,
                inc: inc,
                dec: dec
            };
        </JavaScript>
        <Panel Margin="2" ux:Name="theBounds">
            <Circle ux:Name="theHandle" Width="56" Height="56" Color="#fff" Alignment="Center">
                <Text Value="{c}" Alignment="Center" />
                <Translation ux:Name="moveHandle" />

                <SwipeGesture ux:Name="swipeRight" Direction="Right" Length="width(theBounds)/2" />
                <SwipeGesture ux:Name="swipeLeft" Direction="Left" Length="width(theBounds)/2" />
                <Translation ux:Name="handle" X="0" />
                <SwipingAnimation Source="swipeRight">
                    <Move Target="theHandle" X="width(theBounds)/2-28" DurationBack="1" />
                </SwipingAnimation>
                <SwipingAnimation Source="swipeLeft">
                    <Move Target="theHandle" X="-1*width(theBounds)/2+28" DurationBack="1" />
                </SwipingAnimation>
                <Swiped Source="swipeRight">
                    <Callback Handler="{inc}" />
                </Swiped>
                <Swiped Source="swipeLeft">
                    <Callback Handler="{dec}" />
                </Swiped>

                <Shadow />
            </Circle>
        </Panel>
        <Rectangle Color="#18f" CornerRadius="height(theBounds)/2" />
    </Panel>

    <JavaScript>
    var Observable = require("FuseJS/Observable");
    var counter = Observable(0);
    counter.onValueChanged(module, function(x) {
        console.log("counter is now: " + x);
    });
    module.exports = {
        counter: counter
    };
    </JavaScript>
    <ElasticCounter Height="60" Width="128" Counter="{counter}" />
</App>

Hope this helps!

4

Thanks for your effort and amazing response your code is great but what I was asking for when the touch pass the constraint area start slow down until stopped when to touch release the bounce back to the constraint area I saw it in ScrollView

5

Well that is the part that I’d rather leave for you to figure out. As I mentioned, using Attract might be the way to go, since it offers a kind of a physics simulation.