[How-To] Build interaction of zooming in and zooming out by double tapping/clicking

General Discussion
,
1

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:

image
image857×815 104 KB

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.
image

if tapTimes == 2 and 【timer】>0
 Set doubleTap to true
 Set tapTimes to 0
 Set timer to 0

if tapTimes == 2 and 【timer】==0
 Set doubleTap to false
 Set tapTimes to 0
 Set timer to 0

image

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.

2

btw, in the process, I found conditional features is not so handy for me :sweat_smile:

  1. 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.
  2. 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.
3

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:

image
image387×745 11.3 KB

image

The principle is as follows:

  1. 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.

  2. When tapping the first time, zoomPic changed to another state, I named it “zoomOut-1”.

  3. 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.
image

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.
image

The above part is about zooming in, this principle can be used as zooming out also.

–

Here is an example file:
zoom in zoom out-figma file
image

Hope it helps! :v:

1 Like
4

@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

5