Animation Tutorial

Hey there!

 I'm no animation expert but here's how I made an animation that moves a scene object from point A to point B!

1) Step 1

 Make a 720x1280 white image and draw the curve from point A to point B where your object wants to animate to. Example:

2) Step 2

 Now we're going to use edge detection on this image to extract the x,y coordinates of the curve. You could use openCV or any other library of your choice. In my case I made a simple script that reads each pixel in the image and averages the X position of the non white pixels within each Y.

 Make sure to divide each x,y coordinate by 720 and 1280 respectively to get the relative position to the screen size. Also as Lens Studio Screen Transform is based on -1 ... 1 range of values, multiply your result by 2 and subtract 1!

 Result:

 var positions=[[x1,y1],[x2,y2],....[xn,yn]];

3) Step 3

 Now we just need to fire an event that at every X seconds will move our object through each position in the array.

 We're going to get a reference to your scene's screenTransform and update it's center to each one of the coordinates we gathered earlier

That's something like this:

var i=0;

var frameRate=20;

var delayedEvent = script.createEvent("DelayedCallbackEvent");

delayedEvent.bind(function(eventData)

{

  if(i<points.length)

  {

    screenTransform.anchors.setCenter(new vec2(points[i][0], points[i][1]));

    delayedEvent.reset(.01);

    i+=frameRate;

  }

});

delayedEvent1.reset(.01);

There we go! I have a pretty cool live lens with this effect that I can share with the Lens Studio team if they wanna take a look ;)

cheers!