0

I wish to have a circle that rotates ALONG WITH the users swipe/gragging across a screen. I am using Phonegap to make the app, and have thought about using hammer.js as a lot of people recommend it.

I have seen loads of posts about clicking a div to rotate it by 90 degrees etc.. all that is easy, but I require it so a users swipe or drag gesture can rotate an element in "real-time". As in the element will rotate to the speed of the swipe and also as the finger is actually touching the screen - giving it a native feel.

Any ideas?

JamesG
  • 2,018
  • 2
  • 28
  • 57
  • 1
    I think you would evaluate the coordinates when finger is down then how far it moved + direction, and then animate accordingly with some kind of easing to make it nice. have you tried anything yet? – webkit Jun 18 '14 at 09:37

1 Answers1

1

Im using this plugin that work very nice. Can handle multi finger swipe/drag drag start/end ecc

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

here a working code example:

$(function() {      
          $("body").swipe( {
            swipe:function(event, direction, distance, duration, fingerCount,  fingerData) {
              if(direction=="right" && fingerCount==2 && distance>100){
                //do something
              }
              else if(direction=="right" && distance>100){
                //do other....
              }
              else if(direction=="left" && distance>100){
                //other and other....   
              }
            },
            threshold:0,
            fingers:'all'
          });
            $('body').swipe("option","allowPageScroll","vertical");
        });
Vanojx1
  • 5,574
  • 2
  • 23
  • 37
  • Thanks, I was goign to use hammer.js but this seems a buit more stripped down, perfect for what I need. I ended up using the "swipeStatus" instead of just "swipe" as it allows the element to be rotated as the drag is actually happening. – JamesG Jun 18 '14 at 11:26
  • And also used some tips from this post: http://stackoverflow.com/questions/3020904/how-to-rotate-a-div-using-jquery which uses the transform to rotate the image. Very helpful thanks! – JamesG Jun 18 '14 at 11:27
  • @JamesG appreciate this question is very hold now but how did you implement swipeStatus? I just get an 'undefined' error. – dwinnbrown Jun 04 '16 at 08:20