Linear Animation

Linear Animation

When selected, the Linear Animation will open the following window

• Name: You need to enter a Name for the animation (or accept Kwik’s suggestion).

  Kwik will cleanup your name if it contains spaces, strange characters, Lua reserved names, and/or if the length of the name is bigger than 15 characters.

• Option

  • Layer :Kwik automatically uses the selected Layer option (in this example, layer title).
  • Page
  • Group
    • Group dropdown list to select a group

Properties

Information about the current layer content will appear in the top of the window (position and size). It is important to understand that animations will always use the current position of the layer, group or page as starting point.

Animations end position can be:

• Fixed: in this case, use the sliders/buttons (+/-)/fields to enter the end X and Y positions, in pixels;

  DO NOT press ENTER after entering manually data into the Fixed X and Y fields. There is a bug in Photoshop that could crash the application.

• Randomize end positions: in this case, select the checkboxes for X and Y positions you want to randomize. Use the two fields in the right of each axis to set the boundaries for the end position.

  For example, if you select 100 and 500 for the X axis, your animated object will end anywhere between horizontal position 100 to 300

• Group animations control end position: When checked, do not add end positions to the animation, leaving the positioning control to a group animation where this linear animation is a member;

• Duration: this is the total time, in seconds, from start to end positions of the animation;

• Delay: wait time before the animation starts. if 0(zero), animations starts when the page loads;

• Alpha: final transparency when animation ends;

• Pause when completed: if checked, the animation pauses when it reaches its ending;

• Easing: lists all available easing options (speed before/during/after) for the animation. Samples can be found clicking the info button to the right

• Loop

  • forever
  • times: enters amount of times the animation will repeat;

• Reverse at ending: if checked, animation plays backwards when it reaches its ending;

• Rotate: angle number of rotation when animation ends;

  • Preview: this button, when pressed, previews the rotation in the canvas;
  • Undo: this button, when pressed, undoes the previous rotation preview in the canvas;

• Anchor point: lists all available anchor point options for the animation rotation. For example, a circle should rotate using its middle center point

• Scale W and H: scales, in percentages, the object during the animation;

• Starts: sets when the animation starts. Options are:

  • When page starts: in this case, the animation automatically starts with the page (respecting the Delay option above);

  • Wait request: in this case, the animation will only play if activated by a button or action;

• Return to start pos. after play: returns the object to its original start position when the animation ends;

Breadcrumbs panel:

Enabling breadcrumbs allow the user to see dots (rectangular or circular) behind the animated object, while it is animating.

• Enable: if checked, draws breadcrumbs behind the animated object;

• From: sets the position from where the breadcrumbs will show up;

• Shape: sets the breadcrumb as a rectangle or a circle;

  • Rectangle
  • Circle

• Width/Radius: sets the width, in the case of a rectangular shape, or radius, in the case of a circular shape, of the breadcrumbs;

• Height: sets the height, in the case of a rectangular shape, of the breadcrumbs;

• Color: sets the color of the breadcrumbs (you can enter it manually or use the color picker button) – if you write “rand”, the breadcrumb color will be randomly picked;

• Interval: sets the distance between breadcrumbs (this distance is defined accordingly the duration and distance from start to end point of your animation;

• Dispose: when checked, disposes each breadcrumb after the time set in the seconds field;

  Animations with breadcrumbs will always appear on top of all other screen objects (independent of its original layer position)!

Optional Audio/Action panel:

• Audio: plays an audio together the animation. For example, you may have a tweeting audio playing while a bird flies around the screen;

• Action: triggers an action together the animation.

Page & Group coordinates and Anchor Point

Normally Kwik sets the poistion of layer (X, Y) from Photoshop. It is the top left corner of layer as (X, Y) and you can change the values where to be translated to.

For instance, Layer moon2 is located at (788, 461) with width 472, height 534.

if you select the entire Page for linear animation, (x, y) is (0, 0) as default

Group

For Group linear animation, as you see gp_moon contains the three moons. The center point of the group is little bit away (8, -4) from the center of screen. I can say it is almost the center of screen.

Group is different to a normal layer and Page(the entire screen). Because group contains muliple layers, Kwik calcurates the center point of the group from the poistions of layers in the group and finally sets the (x, y) values on Linear animation panel as the distance from the center of the screen to the center of a group.

• x : 8 px
• y: -4 px

You can input the value how much to be translated from the center of the screen. The reason why uses the distance from the center is rooted about anchor point.

For more inforamtion, https://docs.coronalabs.com/guide/graphics/transform-anchor.html

For instance, gp_moon is located at (8, -4) from the center of the screen, if you like to move the bottom left corner, input the numeric value of width/2 and height/2. If you screen size is 2048,1536. The value will be 1024, 768

Page anchor point

Page ’s anchor point is at (0,0) at the top left corner. The center point of rotation is at (0,0) as default.

So the rotation does not happen using the center point of the screen. If you like to rotate around the center of the screen, create a group of Kwik and put the layers into them.