I was building a double tap interaction to present zoom in/ zoom out features, but I found some problem as I used the variables to judge if the user is double tapping.
I wanna exclude the single tap condition, it means that only when user double tapping in short span, just like 500ms, can be judged as a double tap condition.
Here are the conditions:
I use After delay to manipulate the timer. Since AfterDelay can only be put on the parent layer, I set timer on the frame.
And on the picture object, I set the conditions and the zoom in/out action.
if tapTimes == 2and 【timer】>0Set doubleTap to trueSet tapTimes to 0Set timer to 0
if tapTimes == 2 and 【timer】==0
Set doubleTap tofalseSet tapTimes to0Set timer to0
It looks not bad, but there’re still some problems:
I don’t know why some times it was judged as a double tap, although the interval between two taps is greater than the span I set.
Best answer by jwliu
Previously, I tried different complex methods, using variables, to manipulate zoom-in interaction.
But eventually, I found an easier way to achieve my goal. You just need to create a component and add variants, just like this:
The principle is as follows:
The user enters the zoom screen, and he/ she will see the zoomPic in the default state, here I named this state “zoomOut” for later use.
When tapping the first time, zoomPic changed to another state, I named it “zoomOut-1”.
The user taps the second time. According if the interval between the first tap and second tap exceeds the span I set for double tapping, there 2 possibilities:
a. the interval>span:
This means it shouldn’t be counted as a double click but as two separate clicks.
So I set an After delay interaction to change to the previous state, preventing mistakenly zooming in.
b. the interval<span:
This situation is the definition of double tapping I thought.
So I just added a on tap to change interaction easily.
The above part is about zooming in, this principle can be used as zooming out also.
btw, in the process, I found conditional features is not so handy for me 😅
Only when you implement some action can trigger the if statement, or using after delay 1 ms to alternate. But after delay can only be used on the parent layer.
There’s no "else if " statement and nested if feature, it means that I have to add so many additional if statements to finish my work, if I have a multiple condition.
Previously, I tried different complex methods, using variables, to manipulate zoom-in interaction.
But eventually, I found an easier way to achieve my goal. You just need to create a component and add variants, just like this:
The principle is as follows:
The user enters the zoom screen, and he/ she will see the zoomPic in the default state, here I named this state “zoomOut” for later use.
When tapping the first time, zoomPic changed to another state, I named it “zoomOut-1”.
The user taps the second time. According if the interval between the first tap and second tap exceeds the span I set for double tapping, there 2 possibilities:
a. the interval>span:
This means it shouldn’t be counted as a double click but as two separate clicks.
So I set an After delay interaction to change to the previous state, preventing mistakenly zooming in.
b. the interval<span:
This situation is the definition of double tapping I thought.
So I just added a on tap to change interaction easily.
The above part is about zooming in, this principle can be used as zooming out also.
@jwliu Thanks for providing an update / how you went about this!
I merged your original topic with questions on this into this one, so that the chronological order would be preserved. This will help anyone else who is looking for help with something similar find this better <3
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.
