Start a new topic

Import JS plugin into index.js

Import JS plugin into index.js


Hi, 

I want to import a JS plugin from here. 

http://pixelscommander.com/polygon/propeller/#.U2tOtPmSxUo

 

The plugin is used to rotate html elements by mouse or touch gestures.

However, I tried creating an ImageDrawable inside the index.js, and copied the necessary code to make the image spin. But the image won't spin. Is there a way to do this? Thanks!

Hi,

We support PropertyAnimations that can be used to achieve what you want, but since the library needs a HTML element in the DOM (and an ImageDrawable is not attached to the DOM, but handled within our SDK), you won't be able to use it directly. You will need a static area in the HTML (index.html) that you can hook up with the library. Once the user swipes this area, the library will notify you. You can then start the PropertyAnimation on the roll property of the ImageDrawable.

In the end, however, I assume you don't need the library directly, all you need to find out is when a user swiped over a particular HTML element in your DOM, and then start the PropertyAnimation.

Best,

Martin

Hi Martin,

Based on your Documentation, ImageDrawable can't detect rich touch interactions. So... that's what is bugging me. I am trying to achieve a spin the bottle effect. I have successfully tried PropertyAnimation but I don't know which easing paramater will let me specify correct easing so that the image will achieve the "slowing down" effect when you spin the bottle. I used the js plugin on the HTML file but I can only put the image at the center of the screen. Our client wants the image to be attached to the marker just like the ImageDrawable. Is there a way to have a custom method for this since we bought a license? Thanks.

Hi Miguel,

In this case, you need to use multiple PropertyAnimations that have an increasing duration (which will cause the rotation to slow down), and play them sequentially using a SequentialAnimation. I suggest to also try one of the EASE_OUT_*** easing curves for each Property Animation, so the slow-down effect also happens while one single PropertyAnimation is executed.

What you can also try is to start the property animation when the user clicks on the ImageDrawable (using the onClick event listener of the ImageDrawable). That way, you can control the animation directly in the marker by clicking on it.

Best,

Martin

Hi Martin,

Is there a method named SquentialAnimation?

Regards,

Miguel

Hi Miguel,

Apologies for not being precise here. You need to create a new AnimationGroup, pass the array of PropertyAnimations into it and set the type to AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL.

Here is an example usage:

 

var animationGroup = new AR.AnimationGroup(
  AR.CONST.ANIMATION_GROUP_TYPE.SEQUENTIAL, // the animations will run sequentially
   // the animations in the AnimationGroup
);

Best,

Martin

Hi Martin, 

What would you suggest on implementing detecting swipe in html?

Regards,

 

Miguel

Hi Miguel,

Even though I didn't try it myself yet: There's a jquery mobile function that can do what you need, see here: http://api.jquerymobile.com/swipe/

Best,

Martin

Hi Martin, I was able to use PropertyAnimation Correctly, however, the rotation always to the right. Is there a way to rotate the element towards left/counterclockwise? 

 

Regards,

Miguel

I think the swipe function only working on the HUD view not the 2D object, right?

 

No frederick, it works pretty well.

Hi Martin, I have this code.

this.rotationAnimationstartRight = new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, 1800, 10000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

this.rotationAnimationstartLeft= new AR.PropertyAnimation(overlayTwo, "rotate.roll", overlayTwo.roll, -941, 10000,{type: AR.CONST.EASING_CURVE_TYPE.EASE_OUT_QUAD});

 

When I swipe to the right, the property animation is correct, same with when I swipe to the left. However, If I swipe to the left,the image stops at the lower left, and then if I follow a swipe to the right, the image spin starts at the top of 0 degrees, why is that? 

 

Regards,

hi Miguel ,

You add the swipe on the HUD view? not the 2D object ImageDrawable, right?

Hi Frederick, 

Well in the propeller.js, I put it in the HUD view since the way I understand how the it needs an image in the html. I am now using the propertyAnimation for ImageDrawable.
Login or Signup to post a comment