Does the show() toggle the Display?

Saola Animate Support Questions
1

Problem: Does the Show() toggle the Display?
Saola Animate version: v3.0.1
OS: win10

Notes:
User manual “Chapter 15: JavaScript” mentions about an API named “show(”
but this manual does not mention about which option will be turn on/off by it.

Q1) Does the Show() toggle the Display property on the Properties, General, Display?

Q2) Does API of Saola alos case-sensitive?

Hope new user manual mentions about every option to turn on/off by an API.

Thank you,
Afei

2

Hi afei,

Yes, show() toggles the Display property.
All APIs are case-sensitive.

You can set many element properties by using the (undocumented) setProperty method.
For example:

var element = doc.getElement('Div_1');
// set a single property:
element.setProperty('left', '50%');
element.setProperty('width', 300); // same as element.setProperty('width', '300px');
// set multiple properties at once:
element.setProperty({
  left: '50%',
  width: 300,
  rotateZ: 30, // degree
  opacity: 50  // %
});

Regards

1 Like
3

Could you tell me the code to set type, position, color of the gradient fill?
I want to try to animate the gradient of an element by JavaScript.

Thank you very much,
Afei

4

Hi,

You can use fillLinearGradient(angle, stops) function to change the linear gradient fill.
stops is an array of gradient stops, each stop is an array of stop position (in %) and color components (red, green, blue, alpha in the range 0 - 255).

For example:

// fill linear gradient from red at bottom to blue at top
// each stop: [position, red, green, blue, alpha]
var stop1 = [0, 255, 0, 0, 255];  // red
var stop2 = [100, 0, 0, 255, 255]; // blue
var angle = 0;
doc.getElement('Div_1').fillLinearGradient(angle, [stop1, stop2]);

Regards

1 Like
5

Q) What is the code if I want to use ‘Radial’ as the gradient type?
I found that “.fillRadialGradient” cannot work.

Thank you very much,
Afei

6

The syntax of the radial gradient filling method is fillRadialGradient(originX, originY, stops, shape, size)

  • originX, originY are the gradient origin in %
  • stops is an array of gradient stops (same as fillLinearGradient)
  • shape: gradient shape, circle is 0, ellipse is 1
  • size: 0, 1, 2, 3 for closest side, farthest side, closest corner, farthest corner respectively.

Regards

1 Like
7

Q) What is the code to get
the position, width, height of an element on current scene?

Thank you very much,
Afei

8

You can use element.dom to get the HTML element wrapped by the Saola Animate element, and get those properties from the HTML element.

For example:

var node = doc.getElement('element name').dom;
console.log('left: ' + node.offsetLeft);
console.log('top: ' + node.offsetTop);
console.log('width: ' + node.offsetWidth);
console.log('height: ' + node.offsetHeight);

Regards

1 Like
9

Q) Where can I test your code?
I don’t know how to test your code in Saola,
please tell me the steps.

Thank you very much,
Afei

10

You can add that code to any event, provided that the element is available when the event occurs.

For example, you can add it to a Run JavaScript action in the Mouse Click event of the element.
Whenever the user clicks the element in HTML5 output or preview, the element position and size will be logged to the browser console (press F12 in the browser to show its console).

You may need to take a look at this event-action tutorial:

Regards

1 Like
11

Thanks for your instructions.
but the “node.offsetTop” and node.offseLeft" are not the correct answers.

image
image1050×453 19.4 KB

image
image1095×453 22.4 KB

As you can see, no matter where the ball is, the (left, top) always be (0, 32),
and I need to know the position of the element.
for example, my scene size is 400x300,
and the position of the ball above is (Left=200, Top=150).

Please help,
Afei

12

It’s just an example.
You should google how to get a specific property from a HTML element, or view the MDN Web Docs page mentioned above.

offsetLeft, offsetTop doesn’t take transformation (translation, scaling, rotation) into account.
In your case, the ball has a motion path animation that use translation, you can use getComputedStyle(node).transform to get the transformation matrix. After that, try to get the translation from the matrix. It’s not simple so you may need to google for a code snippet to do that.

You can also use node.getBoundingClientRect but this method take all transformations (from the root element to the node) into account.

Regards

1 Like