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

Mobile
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

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");
}
1 Like
3

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

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

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:

2 Likes
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)

4 Likes
9

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

2 Likes
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)

1 Like
11

What do I add to make it go back one scene?

12

You would use the showPreviousScene function: https://tumult.com/hype/documentation/#showPreviousScene

So you could run:

hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionInstant);