Skip to main content
Solved

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

  • October 23, 2023
  • 3 replies
  • 1231 views

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

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:


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! ✌️

View original
This topic has been closed for replies.

3 replies

  • Author
  • 2 replies
  • October 23, 2023

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

  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.

  • Author
  • 2 replies
  • Answer
  • October 24, 2023

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

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! ✌️


ksn
Figmate
  • Community Support
  • 1673 replies
  • October 27, 2023

@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


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings