API Cheat Sheet [motion5]

Creates animation elements.

Functions

Sprite

Creates new a sprite element.

Parameters

• width:number - The width of the sprite. Required
• height:number - The height of the sprite. Required
• image:string - The image of the sprite. Required

Return

Returns the new Sprite instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let sprite = motion5.Sprite(50, 45,"/images/sprite.png");
let player = $.Create("p#player");

// Apply the sprite to player
sprite.Effect(player);

---

Scroll

Creates new a scroller element.

Parameters

• width:number - The width of the scroller. Required
• height:number - The height of the scroller. Required
• image:string - The image of the scroller. Required

Return

Returns the new Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");

// Apply the scroll to city
scroll.Effect(city);

---

Class Sprite

Manipulating the sprite instance.

Run

Run a sprite animation with the fps.

Parameter

• fps:number - The number presents the framerate of the sprite's animation. Default, it is set 30 value.

Return

Returns the Sprite instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let sprite = motion5.Sprite(50, 45, "/images/sprite.png");
let player = $.Create("p#player");
sprite.Effect(player);

// Run the sprite
player.MotionSprite.Run();

---

Stop

Stop a sprite animation from playing.

Parameter

• Has no parameter.

Return

Returns the Sprite instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let sprite = motion5.Sprite(50, 45, "/images/sprite.png");
let player = $.Create("p#player");
sprite.Effect(player);

// Stop the motion
player.MotionSprite.Stop();

---

Pause

Pause a sprite animation from playing.

Parameter

• Has no parameter.

Return

Returns the Sprite instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let sprite = motion5.Sprite(50, 45, "/images/sprite.png");
let player = $.Create("p#player");
sprite.Effect(player);

// Pause the motion
player.MotionSprite.Pause();

---

Action

Changes the acrion of the player.

Parameter

• index:number - The number presents the row number. Default, it is set 0 value.

Return

Returns the Sprite instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let sprite = motion5.Sprite(50, 45, "/images/sprite.png");
let player = $.Create("p#player");
sprite.Effect(player);

// Changes the player action
player.MotionSprite.Action();

---

Class Scroll

Manipulating the scroller instance.

Run

Run a scroll animation with the fps.

Parameter

• fps:number - The number presents the framerate of the scroll's animation. Default, it is set 30 value.

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Run the scroll
city.MotionScroll.Run();

---

Stop

Stop a scroll animation from playing.

Parameter

• Has no parameter.

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Stop the scroll
city.MotionScroll.Stop();

---

Pause

Pause a scroll animation in playing

Parameter

• Has no parameter.

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Pause the scroll
city.MotionScroll.Pause();

---

AddVelocity

Adds the velocity of the animation.

Parameters

• x:number - The number presents the pixel step of the scroll's horizontal moving. Required
• y:number - The number presents the pixel step of the scroll's vertical moving. Required

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Adds velocity to scroll
city.MotionScroll.AddVelocity(10, 12);

---

AddVelocityX

Adds the velocity in horizontal of the animation.

Parameter

• value:number - The number presents the pixel step of the scroll's horizontal moving. Required

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Adds velocity to scroll
city.MotionScroll.AddVelocityX(10);

---

AddVelocityY

Adds the velocity in vertical of the animation.

Parameter

• value:number - The number presents the pixel step of the scroll's vertical moving. Required

Return

Returns the Scroll instance.

Example

import {element5 as $, motion5} from '@bapquad/element5'

let scroll = motion5.Scroll(50, 45, "/images/sprite.png");
let city = $.Create("p#city");
scroll.Effect(city);

// Adds velocity to scroll
city.MotionScroll.AddVelocityY(12);