Vue3Scene

Vue3Scene

Source:

Methods

(static) useFrame(props) → {VueFrameResult}

Source:
Name Type Description
props Reactive.FrameReactiveData Can be used as frame, cssText, cssObject, etc.
Example
import { useFrame } from "vue-scenejs";

const { cssText } = useFrame("text-align: center; transform: translate(10px, 10px);");

console.log(cssText.value);
Returns:
- You can use Frame methods and cssText, cssObject, ...etc
Type
VueFrameResult

(static) useNowFrame(item) → {VueNowFrameResult}

Source:
Name Type Description
item SceneItem item to get the current frame
Example
import { useSceneItem, useNowFrame } from "vue-scenejs";

const sceneItem = useSceneItem(...);
const { cssText } = useNowFrame(sceneItem);

console.log(cssText.value);
Returns:
- You can use Frame methods and cssText, cssObject, ...etc State
Type
VueNowFrameResult

(static) useScene(propsopt, optionsopt) → {VueSceneResult}

Source:
Name Type Description
props? Reactive.SceneReactiveProps Items and properties that make up the scene
options? Partial<SceneOptions> Scene and Animator options
Example
import { useScene, useNowFrame } from "vue-scenejs";

const scene = useScene({ ... });
const { cssText } = useNowFrame(scene.getItem("a1"));

console.log(cssText.value);
Returns:
- You can use Scene methods and Animator State
Type
VueSceneResult

(static) useSceneItem(propsopt, optionsopt)

Source:
Name Type Description
props? Reactive.SceneItemReactiveProps Items and properties that make up the scene item
options? Partial<SceneItemOptions> SceneItem and Animator options
Example
import { useSceneItem, useNowFrame } from "vue-scenejs";

const item = useSceneItem({ ... });
const { cssText } = useNowFrame(item);

console.log(cssText.value);
Returns:
- You can use SceneItem methods and Animator State.

Type Definitions

VueFrameResult

Source:
See:
Properties:
cssText
cssText: string
Returns the frame's cssText.
cssObject
cssObject: Record<string, any>
Returns the frame's css object (kebab-case).
camelCasedCSSObject
camelCasedCSSObject: Record<string, any>
Returns an object in camel case type of frame. It can be used in React.
You can use reactive state and frame methods. To access the state in Vue you need to add $ prefix.
Type:
  • TSInterface

VueNowFrameResult

Source:
To access the state in Vue you need to add $ prefix.
Type:
  • TSInterface

VueSceneItemResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
To access the state in Vue you need to add $ prefix.
Type:
  • TSInterface

VueSceneResult

Source:
Properties:
duration optional
duration?: number
The duration property defines how long an animation should take to complete one cycle.
fillMode optional
fillMode?: "none" | "forwards" | "backwards" | "both"
The fillMode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).
iterationCount optional
iterationCount?: "infinite" | number
The iterationCount property specifies the number of times an animation should be played.
easing optional
easing?: array | function
The easing(timing-function) specifies the speed curve of an animation.
delay optional
delay?: number
The delay property specifies a delay for the start of an animation.
direction optional
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse"
The direction property defines whether an animation should be played forwards, backwards or in alternate cycles.
totalDuration
totalDuration: number
Total time the animation played
To access the state in Vue you need to add $ prefix.
Type:
  • TSInterface