IframeItem

IframeItem

Control the animation of iframe

Constructor

new IframeItem(properties, options)

Source:
Name Type Description
properties any properties
options SceneItemOptions options
Example
// index.html (parent)
import Scene from "scenejs";
import IframeItem from "@scenejs/iframe";

var scene = new Scene({
    "#iframe1": new IframeItem({}, { duration: 3.4, delay: 0 }),
    "#iframe2": new IframeItem({}, { duration: 3.4, delay: 0.15 }),
    "#iframe3": new IframeItem({}, { duration: 3.4, delay: 0.3 }),
    "#iframe4": new IframeItem({}, { duration: 3.4, delay: 0.45 }),
}, {
    selector: true,
    iterationCount: "infinite",
});

Extends

Methods

(static) register(item) → {void}

Source:
Register an animator to be controlled by the parent.
Name Type Description
item Animator The target to register
Example
import Scene from "scenejs";
import { register } from "@scenejs/iframe";
var scene = new Scene({
    ....
});
// IframeItem.register(scene);
register(scene);
Returns:
Type
void

append(item)

Source:
Inherited From:
Append the item or object at the last time.
Name Type Description
item SceneItem | IObject<any> the scene item or item object
Example
item.append(new SceneItem({
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  }));
  item.append({
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  });
  item.set(item.getDuration(), {
      0: {
          opacity: 0,
      },
      1: {
          opacity: 1,
      }
  });
Returns:
An instance itself

clone() → {SceneItem}

Source:
Inherited From:
clone SceneItem.
Example
item.clone();
Returns:
An instance of clone
Type
SceneItem

end() → {Animator}

Source:
Overrides:
end animator
Returns:
An instance itself.
Type
Animator

exportCSS(playConditionopt, durationopt, optionsopt) → {SceneItem}

Source:
Inherited From:
Export the CSS of the items to the style.
Name Type Description
playCondition? PlayCondition Add a selector or className to play.
duration? number
options? AnimatorState[]
Returns:
An instance itself
Type
SceneItem

finish() → {Animator}

Source:
Inherited From:
end animator
Returns:
An instance itself.
Type
Animator

forEach(callback) → {Keyframes}

Source:
Inherited From:
executes a provided function once for each scene item.
Name Type Description
callback (item: Frame, time: number, items: IObject<Frame>) => void Function to execute for each element, taking three arguments
Returns:
An instance itself
Type
Keyframes

get(time, …args) → {Number|String|PropertyObejct}

Source:
Inherited From:
Get properties of the sceneItem at that time
Name Type Attributes Description
time Number time
args String | Object <repeatable>
 property's name or properties
Example
item.get(0, "a"); // item.getFrame(0).get("a");
  item.get(0, "transform", "translate"); // item.getFrame(0).get("transform", "translate");
Returns:
property value
Type
Number | String | PropertyObejct

getActiveDuration(delayopt) → {number}

Source:
Inherited From:
Get the animator's total duration excluding delay
Name Type Description
delay? boolean
Example
animator.getActiveDuration();
Returns:
Total duration excluding delay
Type
number

getDelay() → {number}

Source:
Inherited From:
Get a delay for the start of an animation.
Returns:
delay
Type
number

getDirection() → {DirectionType}

Source:
Inherited From:
Get whether an animation should be played forwards, backwards or in alternate cycles.
Returns:
direction
Type
DirectionType

getDuration() → {number}

Source:
Inherited From:
Get how long an animation should take to complete one cycle.
Returns:
duration
Type
number

getEasing() → {EasingType}

Source:
Inherited From:
Get the speed curve of an animation.
Returns:
easing
Type
EasingType

getEasingName() → {string}

Source:
Inherited From:
Get the speed curve's name
Returns:
the curve's name.
Type
string

getElements() → {AnimateElement[]}

Source:
Inherited From:
Get the elements connected to SceneItem.
Returns:
Type
AnimateElement[]

getFillMode() → {FillModeType}

Source:
Inherited From:
Get fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Returns:
fillMode
Type
FillModeType

getFrame(time) → {Frame}

Source:
Inherited From:
get sceneItem's frame at that time
Name Type Description
time Number | ... frame's time

getFrame(time, ...names) → {Frame}

Name Type Description
time number | string
...names any[]
Example
const frame = item.getFrame(time);
Returns:
sceneItem's frame at that time
Type
Frame

getId() → {number|string}

Source:
Inherited From:
Specifies the unique indicator of the animator
Returns:
the indicator of the item.
Type
number | string

getIterationCount() → {IterationCountType}

Source:
Inherited From:
Get the number of times an animation should be played.
Returns:
iterationCount
Type
IterationCountType

getIterationTime() → {number}

Source:
Inherited From:
Get the animator's current iteration time
Example
animator.getIterationTime();
Returns:
current iteration time
Type
number

getNowFrame(time, easingopt, isAccurateopt) → {Frame}

Source:
Inherited From:
Get frame of the current time
Name Type Description
time Number the current time
easing? function the speed curve of an animation
isAccurate? boolean
Example
let item = new SceneItem({
      0: {
          display: "none",
      },
      1: {
          display: "block",
          opacity: 0,
      },
      2: {
          opacity: 1,
      }
  });
  // opacity: 0.7; display:"block";
  const frame = item.getNowFrame(1.7);
Returns:
frame of the current time
Type
Frame

getPlaySpeed() → {number}

Source:
Inherited From:
Get the animator's play speed
Returns:
playSpeed
Type
number

getPlayState() → {PlayStateType}

Source:
Inherited From:
Get whether the animation is running or paused.
Returns:
playState
Type
PlayStateType

getTime() → {number}

Source:
Inherited From:
Get the animator's current time
Example
animator.getTime();
Returns:
current time
Type
number

getTotalDuration() → {number}

Source:
Inherited From:
Get the animator's total duration including delay
Example
animator.getTotalDuration();
Returns:
Total duration
Type
number

hasFrame(time) → {Boolean}

Source:
Inherited From:
check if the item has a frame at that time
Name Type Description
time Number frame's time
Example
if (item.hasFrame(10)) {
      // has
  } else {
      // not
  }
Returns:
true: the item has a frame // false: not
Type
Boolean

hasName(args) → {boolean}

Source:
Inherited From:
Check if keyframes has propery's name
Name Type Description
args string[] property's time
Example
item.hasName(["transform", "translate"]); // true or not
Returns:
true: if has property, false: not
Type
boolean

isDelay() → {boolean}

Source:
Inherited From:
Check if the current state of animator is delayed.
Returns:
check delay state
Type
boolean

isEnded() → {boolean}

Source:
Inherited From:
Check if the animator has reached the end.
Example
animator.isEnded(); // true or false
Returns:
ended
Type
boolean

isPaused() → {boolean}

Source:
Inherited From:
Check if the animator is paused:
Example
animator.isPaused(); // true or false
Returns:
paused
Type
boolean

mergeFrame(time, frame) → {SceneItem}

Source:
Inherited From:
merge frame of the previous time at the next time.
Name Type Description
time number | string The time of the frame to merge
frame Frame The target frame
Example
// getFrame(1) contains getFrame(0)
  item.merge(0, 1);
Returns:
An instance itself
Type
SceneItem

newFrame(time) → {Frame}

Source:
Inherited From:
Create and add a frame to the sceneItem at that time
Name Type Description
time Number frame's time
Example
item.newFrame(time);
Returns:
Created frame.
Type
Frame

pause() → {Animator}

Source:
Overrides:
pause animator
Returns:
An instance itself.
Type
Animator

play(toTimeopt) → {Animator}

Source:
Inherited From:
play animator
Name Type Description
toTime? number
Returns:
An instance itself.
Type
Animator

playCSS(isExportCSSopt, playClassNameopt, propertiesopt)

Source:
Inherited From:
See:
Play using the css animation and keyframes.
Name Type Default Description
isExportCSS? true Check if you want to export css.
playClassName? string "startAnimation" Add a class name to play.
properties? object {} The shorthand properties for six of the animation properties.
Example
item.playCSS();
  item.playCSS(false, "startAnimation", {
      direction: "reverse",
      fillMode: "forwards",
  });

prepend(item)

Source:
Inherited From:
Push the front frames for the time and prepend the scene item or item object.
Name Type Description
item SceneItem | IObject<any> the scene item or item object
Returns:
An instance itself

remove(time, propertiesopt) → {SceneItem}

Source:
Inherited From:
remove properties to the sceneItem at that time
Name Type Description
time Number | ... time
properties? String | Object property names or values

remove(time, ...args) → {this}

Name Type Description
time string | number
...args any[]
Example
item.remove(0, "a");
Returns:
An instance itself
Type
SceneItem

removeFrame(time) → {SceneItem}

Source:
Inherited From:
remove sceneItem's frame at that time
Name Type Description
time number | string frame's time

removeFrame(time, ...names) → {this}

Name Type Description
time number | string
...names any[]
Example
item.removeFrame(time);
Returns:
An instance itself
Type
SceneItem

set(time, propertiesopt) → {SceneItem}

Source:
Inherited From:
Set properties to the sceneItem at that time
Name Type Description
time Number time
properties? String | Object property names or values
Example
item.set(0, "a", "b") // item.getFrame(0).set("a", "b")
  console.log(item.get(0, "a")); // "b"
Returns:
An instance itself
Type
SceneItem

setCSS(properties, properties) → {SceneItem}

Source:
Inherited From:
add css styles of items's element to the frame at that time.
Name Type Description
properties Array elements to synchronize item's keyframes.
properties string[]
Example
item.setElement(document.querySelector("#id.class"));
  item.setCSS(0, ["opacity"]);
  item.setCSS(0, ["opacity", "width", "height"]);
Returns:
An instance itself
Type
SceneItem

setDelay(delay) → {Animator}

Source:
Inherited From:
Set a delay for the start of an animation.
Name Type Description
delay number delay
Returns:
An instance itself.
Type
Animator

setDirection(direction) → {Animator}

Source:
Inherited From:
Set whether an animation should be played forwards, backwards or in alternate cycles.
Name Type Description
direction DirectionType direction
Returns:
An instance itself.
Type
Animator

setDuration(duration) → {Animator}

Source:
Inherited From:
Set how long an animation should take to complete one cycle.
Name Type Description
duration number duration
Returns:
An instance itself.
Type
Animator

setEasing(curverArray) → {Animator}

Source:
Inherited From:
set animator's easing.
Name Type Description
curverArray string | number[] | EasingFunction The speed curve of an animation.
Example
animator.({
      delay: 2,
      diretion: "alternate",
      duration: 2,
      fillMode: "forwards",
      iterationCount: 3,
      easing: Scene.easing.EASE,
  });
Returns:
An instance itself.
Type
Animator

setElement(target) → {SceneItem}

Source:
Inherited From:
Specifies an element to synchronize item's keyframes.
Name Type Description
target boolean | string | AnimateElement | IArrayFormat<AnimateElement> elements to synchronize item's keyframes.
Make sure that you have peusdo.
Example
item.setElement(document.querySelector("#id.class"));
item.setElement(document.querySelectorAll(".class"));
Returns:
An instance itself
Type
SceneItem

setElements(target) → {SceneItem}

Source:
Inherited From:
Specifies an element to synchronize item's keyframes.
Name Type Description
target boolean | string | AnimateElement | IArrayFormat<AnimateElement> elements to synchronize item's keyframes.
Make sure that you have peusdo.
Example
item.setElement(document.querySelector("#id.class"));
item.setElement(document.querySelectorAll(".class"));
Returns:
An instance itself
Type
SceneItem

setFillMode(fillMode) → {Animator}

Source:
Inherited From:
Set fill mode for the item when the animation is not playing (before it starts, after it ends, or both)
Name Type Description
fillMode FillModeType fillMode
Returns:
An instance itself.
Type
Animator

setFrame(time, frame) → {SceneItem}

Source:
Inherited From:
Add a frame to the sceneItem at that time
Name Type Description
time Number frame's time
frame Frame
Example
item.setFrame(time, frame);
Returns:
An instance itself
Type
SceneItem

setId() → {Animator}

Source:
Inherited From:
Specifies the unique indicator of the animator
Type Description
number | string String or number of id to be set in the animator
Returns:
An instance itself.
Type
Animator

setIterationCount(iterationCount) → {Animator}

Source:
Inherited From:
Set the number of times an animation should be played.
Name Type Description
iterationCount IterationCountType iterationCount
Returns:
An instance itself.
Type
Animator

setOptions(optionsopt) → {Animator}

Source:
Inherited From:
See:
set animator's options.
Name Type Default Description
options? Partial<AnimatorOptions> {} animator's options
Example
animator.({
      delay: 2,
      diretion: "alternate",
      duration: 2,
      fillMode: "forwards",
      iterationCount: 3,
      easing: Scene.eaasing.EASE,
  });
Returns:
An instance itself.
Type
Animator

setPlaySpeed(playSpeed) → {Animator}

Source:
Inherited From:
Set the animator's play speed
Name Type Description
playSpeed number playSpeed
Returns:
An instance itself.
Type
Animator

setPlayState(playState) → {Animator}

Source:
Inherited From:
Set whether the animation is running or paused.
Name Type Description
playState PlayStateType playState
Returns:
An instance itself.
Type
Animator

setSelector(selectors) → {SceneItem}

Source:
Inherited From:
Specifies an element to synchronize items' keyframes.
Name Type Description
selectors string Selectors to find elements in items.
Example
item.setSelector("#id.class");
Returns:
An instance itself
Type
SceneItem

setTime(time, isTickopt, isParentopt) → {Animator}

Source:
Overrides:
set currentTime
Name Type Description
time Number | String currentTime
isTick? boolean
isParent? boolean
Example
animator.setTime("from"); // 0
  animator.setTime("to"); // 100%
  animator.setTime("50%");
  animator.setTime(10);
  animator.getTime() // 10
Returns:
An instance itself.
Type
Animator

size() → {Number}

Source:
Inherited From:
get size of list
Returns:
length of list
Type
Number

toObject(isStartZeroopt) → {IObject<Frame>}

Source:
Inherited From:
Get the frames in the item in object form.
Name Type Default Description
isStartZero? true
Example
item.toObject();
 // {0: {display: "none"}, 1: {display: "block"}}
Returns:
Type
IObject<Frame>

unshift(time)

Source:
Inherited From:
Push out the amount of time.
Name Type Description
time number time to push
Example
item.get(0); // frame 0
   item.unshift(3);
   item.get(3) // frame 0

update() → {SceneItem}

Source:
Inherited From:
update property names used in frames.
Example
item.update();
Returns:
An instance itself
Type
SceneItem

Events

animate

Source:
Inherited From:
This event is fired when timeupdate and animate.
Name Type Description
param.currentTime Number The total time that the animator is running.
param.time Number The iteration time during duration that the animator is running.
param.frame Frame frame of that time.

ended

Source:
Inherited From:
This event is fired when animator is ended.

iteration

Source:
Inherited From:
The event is fired when an iteration of an animation ends.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
iterationCount Number The iteration count that the animator is running.

paused

Source:
Inherited From:
This event is fired when animator is paused.

play

Source:
Inherited From:
This event is fired when play animator.

timeupdate

Source:
Inherited From:
This event is fired when the animator updates the time.
Name Type Description
param Object The object of data to be sent to an event.
Properties
Name Type Description
currentTime Number The total time that the animator is running.
time Number The iteration time during duration that the animator is running.
iterationCount Number The iteration count that the animator is running.