Question: Does anyone know how to use shake feature of iPhone to start animation?


(Nick ) #1

I am looking for a way to use the shake feature of the iPhone to start a Hype animated timeline…
Not quite sure how to do this.

Thanks
Nick


Having an image change when shaking a device, possible?
#2

This is just a guess, but I’m imaging the following would be chucked inside a window.ondevicemotion event.

if ( Math.abs(event.accelerationIncludingGravity.x) > 1.5) {
alert("shake");
}

#3

Here’s a plugin I found: https://github.com/alexgibson/shake.js/


(Nick ) #4

Thanks I will try this one later tonight.


#5

The previous code didn’t work for you? I tried it and at first it was triggering a lot of annoying JavaScript alert messages. So, I bumped up the number. 1.5 wasn’t enough. 2.0 wasn’t enough either. That was too sensitive. 10 seemed to work well.

Personally, I try to avoid libraries and just use pure JavaScript. Although, with that logic, then I probably shouldn’t even be here. HA HA.


(Nick ) #6

Thanks for the tip tried it but it was not working so well.
Pure JavaScript is nice but I will always opt for libraries these days.
Much quicker less buggy.
I want to spend more time making things than debugging code😉
Too much of a creative :blush:


(Steve) #7

@Photics and @nick Did you ever get this to work?
I’m testing @Daniel’s suggestion (shake.js) and while a standalone HTML file calling the shake.js works fine I can’t make sense of where and how it should live in the Hype document.
Your help is highly appreciated!
shake.hype.zip (13.9 KB)


#8

I used the demo from here: http://qnimate.com/detect-shake-using-javascript/

And adapted it – it may be that the shake library had some updates that now make it work more reliably:

shake.hype 2.zip (9.4 KB)


(Steve) #9

Thanks @Daniel! It works perfectly. I very much appreciate your help.


(Steve) #10

Here’s @Daniel’s sample document to which I added shakes, triggering animations.
I hope it helps others who -like me- are a bit on the clumsy side of coding.
shakeToAnimate.hype.zip (55.4 KB)