Play Animation Frame based on Slider Position - SOLVED!

General Discussion
#1

Hello. I have a plane which I’m using as a finger slider with this code which works well. It successfully moves a plane along the X axis and then generates a variable called frameNumber, which is the X position multiplied by 1000 and rounded up to the nearest integer. It works well.

I want the frameNumber variable to feed into a function that would play an animation by using the animationFrame (…) method. The animation is in a controller called camera_explode in a timeline called explode. The animation is of parts of a 3D camera moving away from each other giving an exploded view.

//slides the plane like a slider. Works well.
var fingerPosition = e.screenPosition;
var parentPosition = parent.position();
parentPosition [0] = fingerPosition [0];
//parentPosition [1] = fingerPosition [1]; Y axis not needed
parent.position(parentPosition);

//creates a variable (eventually) called frameNumber, which is essentially (fingerPosition [0] +1.3)*1000 rounded up to the next digit.
let posit:number = fingerPosition [0];
let numberFixer:number = posit + 1.3;
let frameRaw: number = numberFixer * 1000;
let frameNumber: number = Math.ceil(frameRaw);

image

2 Likes
Slider animation
#2

SOLVED!!

Hi, all. I solved this yesterday and thought you’d be interested in the solution. Here’s the code:
const switchTxt = symbol.nodes.switchTxt;

parent.on(“pointermove”, (e) => {
// Runs when pointermove occurs on the parent node
// The argument e contains useful info about this event:
// https://docs.zap.works/studio/scripting/reference/object/events/pointermove/

//CHECK FINGER POSITION AND MOVE SLIDER
//checks finger position and feeds value into parentPosition of object. Moves object where finger is on X axis

var fingerPosition = e.screenPosition;
var parentPosition = parent.position();
parentPosition [0] = fingerPosition [0];
//parentPosition [1] = fingerPosition [1]; Y axis not needed

parent.position(parentPosition);

// TURN FINGERPOSITION (a number from - 1.3 to 2.4) INTO FRAMENUMBER (0 - 2000)
//a roundabout and clunky way to turn fingerPosition [0] into a variable called frameNumber The animation
// //is 2000 frames long so frameNumber approximates that.

let posit:number = fingerPosition [0]; 
let numberFixer:number = posit + 1.3;
let frameRaw: number = numberFixer * 1000;
let frameNumber: number = Math.ceil(frameRaw);

//this just displays the number to a Text String for diagnostic purposes. NOT NEEDED

let displaySentence: string = `Pos: ${frameNumber}`;

switchTxt.text(displaySentence);

// PASS FRAMENUMBER VARIABLE INTO THE TIME METHOD OF THE ANIMATION
//This feeds the frameNumber variable into the .time method of the animation.

const camera_explode_explode = symbol.controllers.camera_explode.elements.explode;
camera_explode_explode.time(frameNumber);

});

imagex

2 Likes