Kaj Kowalski
f4e3d318ee
Some checks failed
CI/CD Pipeline / Test & Lint (16.x) (push) Has been cancelled
CI/CD Pipeline / Test & Lint (18.x) (push) Has been cancelled
CI/CD Pipeline / Test & Lint (20.x) (push) Has been cancelled
CI/CD Pipeline / Security Audit (push) Has been cancelled
CI/CD Pipeline / Release (push) Has been cancelled
- Implemented StateHandler class with methods for entering, exiting, and updating states. - Created TypeStateHandler for handling typing state with appropriate animations and transitions. - Developed WaitStateHandler for managing idle state with quirk animations. - Added JSDoc documentation for all new classes and methods. - Included CSS styles for documentation formatting and syntax highlighting.
640 lines
18 KiB
HTML
640 lines
18 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>JSDoc: Class: AnimationClip</title>
|
|
|
|
<script src="scripts/prettify/prettify.js"></script>
|
|
<script src="scripts/prettify/lang-css.js"></script>
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<link
|
|
type="text/css"
|
|
rel="stylesheet"
|
|
href="styles/prettify-tomorrow.css"
|
|
/>
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div id="main">
|
|
<h1 class="page-title">Class: AnimationClip</h1>
|
|
|
|
<section>
|
|
<header>
|
|
<h2>
|
|
<span class="attribs"><span class="type-signature"></span></span>
|
|
<span class="ancestors"
|
|
><a href="module-animation.html">animation</a>.</span
|
|
>AnimationClip<span class="signature"
|
|
>(name, threeAnimation, metadata)</span
|
|
><span class="type-signature"></span>
|
|
</h2>
|
|
|
|
<div class="class-description">
|
|
<p>
|
|
Represents a single animation clip with metadata and Three.js
|
|
action
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<article>
|
|
<div class="container-overview">
|
|
<h2>Constructor</h2>
|
|
|
|
<h4 class="name" id="AnimationClip">
|
|
<span class="type-signature"></span>new AnimationClip<span
|
|
class="signature"
|
|
>(name, threeAnimation, metadata)</span
|
|
><span class="type-signature"></span>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Create an animation clip</p>
|
|
</div>
|
|
|
|
<h5>Parameters:</h5>
|
|
|
|
<table class="params">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
|
|
<th>Type</th>
|
|
|
|
<th class="last">Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="name"><code>name</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">string</span>
|
|
</td>
|
|
|
|
<td class="description last">
|
|
<p>The name of the animation clip</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="name"><code>threeAnimation</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">THREE.AnimationClip</span>
|
|
</td>
|
|
|
|
<td class="description last">
|
|
<p>The Three.js animation clip</p>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td class="name"><code>metadata</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">Object</span>
|
|
</td>
|
|
|
|
<td class="description last">
|
|
<p>Parsed metadata from animation name</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line13">line 13</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<h3 class="subsection-title">Members</h3>
|
|
|
|
<h4 class="name" id="action">
|
|
<span class="type-signature"></span>action<span
|
|
class="type-signature"
|
|
>
|
|
:THREE.AnimationAction|null</span
|
|
>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>The Three.js animation action</p>
|
|
</div>
|
|
|
|
<h5>Type:</h5>
|
|
<ul>
|
|
<li>
|
|
<span class="param-type">THREE.AnimationAction</span>
|
|
|
|
|
|
|
<span class="param-type">null</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line43">line 43</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="animation">
|
|
<span class="type-signature"></span>animation<span
|
|
class="type-signature"
|
|
>
|
|
:THREE.AnimationClip</span
|
|
>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>The Three.js animation clip</p>
|
|
</div>
|
|
|
|
<h5>Type:</h5>
|
|
<ul>
|
|
<li>
|
|
<span class="param-type">THREE.AnimationClip</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line31">line 31</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="metadata">
|
|
<span class="type-signature"></span>metadata<span
|
|
class="type-signature"
|
|
>
|
|
:Object</span
|
|
>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Parsed metadata about the animation</p>
|
|
</div>
|
|
|
|
<h5>Type:</h5>
|
|
<ul>
|
|
<li>
|
|
<span class="param-type">Object</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line37">line 37</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="mixer">
|
|
<span class="type-signature"></span>mixer<span
|
|
class="type-signature"
|
|
>
|
|
:THREE.AnimationMixer|null</span
|
|
>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>The animation mixer</p>
|
|
</div>
|
|
|
|
<h5>Type:</h5>
|
|
<ul>
|
|
<li>
|
|
<span class="param-type">THREE.AnimationMixer</span>
|
|
|
|
|
|
|
<span class="param-type">null</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line49">line 49</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="name">
|
|
<span class="type-signature"></span>name<span
|
|
class="type-signature"
|
|
>
|
|
:string</span
|
|
>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>The name of the animation clip</p>
|
|
</div>
|
|
|
|
<h5>Type:</h5>
|
|
<ul>
|
|
<li>
|
|
<span class="param-type">string</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line25">line 25</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h3 class="subsection-title">Methods</h3>
|
|
|
|
<h4 class="name" id="createAction">
|
|
<span class="type-signature"></span>createAction<span
|
|
class="signature"
|
|
>(mixer)</span
|
|
><span class="type-signature"> → {THREE.AnimationAction}</span>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Create and configure a Three.js action for this clip</p>
|
|
</div>
|
|
|
|
<h5>Parameters:</h5>
|
|
|
|
<table class="params">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
|
|
<th>Type</th>
|
|
|
|
<th class="last">Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="name"><code>mixer</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">THREE.AnimationMixer</span>
|
|
</td>
|
|
|
|
<td class="description last"><p>The animation mixer</p></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line57">line 57</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
<div class="param-desc">
|
|
<p>The created action</p>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt>Type</dt>
|
|
<dd>
|
|
<span class="param-type">THREE.AnimationAction</span>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="isPlaying">
|
|
<span class="type-signature"></span>isPlaying<span class="signature"
|
|
>()</span
|
|
><span class="type-signature"> → {boolean}</span>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Check if the animation is currently playing</p>
|
|
</div>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line108">line 108</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
<div class="param-desc">
|
|
<p>True if playing, false otherwise</p>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt>Type</dt>
|
|
<dd>
|
|
<span class="param-type">boolean</span>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="play">
|
|
<span class="type-signature"></span>play<span class="signature"
|
|
>(fadeInDuration<span class="signature-attributes">opt</span
|
|
>)</span
|
|
><span class="type-signature"> → {Promise.<void>}</span>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Play the animation with optional fade in</p>
|
|
</div>
|
|
|
|
<h5>Parameters:</h5>
|
|
|
|
<table class="params">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
|
|
<th>Type</th>
|
|
|
|
<th>Attributes</th>
|
|
|
|
<th>Default</th>
|
|
|
|
<th class="last">Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="name"><code>fadeInDuration</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">number</span>
|
|
</td>
|
|
|
|
<td class="attributes"><optional><br /></td>
|
|
|
|
<td class="default">0.3</td>
|
|
|
|
<td class="description last">
|
|
<p>Fade in duration in seconds</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line80">line 80</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
<div class="param-desc">
|
|
<p>Promise that resolves when fade in completes</p>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt>Type</dt>
|
|
<dd>
|
|
<span class="param-type">Promise.<void></span>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h4 class="name" id="stop">
|
|
<span class="type-signature"></span>stop<span class="signature"
|
|
>(fadeOutDuration<span class="signature-attributes">opt</span
|
|
>)</span
|
|
><span class="type-signature"> → {Promise.<void>}</span>
|
|
</h4>
|
|
|
|
<div class="description">
|
|
<p>Stop the animation with optional fade out</p>
|
|
</div>
|
|
|
|
<h5>Parameters:</h5>
|
|
|
|
<table class="params">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
|
|
<th>Type</th>
|
|
|
|
<th>Attributes</th>
|
|
|
|
<th>Default</th>
|
|
|
|
<th class="last">Description</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr>
|
|
<td class="name"><code>fadeOutDuration</code></td>
|
|
|
|
<td class="type">
|
|
<span class="param-type">number</span>
|
|
</td>
|
|
|
|
<td class="attributes"><optional><br /></td>
|
|
|
|
<td class="default">0.3</td>
|
|
|
|
<td class="description last">
|
|
<p>Fade out duration in seconds</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<dl class="details">
|
|
<dt class="tag-source">Source:</dt>
|
|
<dd class="tag-source">
|
|
<ul class="dummy">
|
|
<li>
|
|
<a href="animation_AnimationClip.js.html"
|
|
>animation/AnimationClip.js</a
|
|
>,
|
|
<a href="animation_AnimationClip.js.html#line93">line 93</a>
|
|
</li>
|
|
</ul>
|
|
</dd>
|
|
</dl>
|
|
|
|
<h5>Returns:</h5>
|
|
|
|
<div class="param-desc">
|
|
<p>Promise that resolves when fade out completes</p>
|
|
</div>
|
|
|
|
<dl>
|
|
<dt>Type</dt>
|
|
<dd>
|
|
<span class="param-type">Promise.<void></span>
|
|
</dd>
|
|
</dl>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Home</a></h2>
|
|
<h3>Modules</h3>
|
|
<ul>
|
|
<li><a href="module-StateHandler.html">StateHandler</a></li>
|
|
<li><a href="module-animation.html">animation</a></li>
|
|
<li>
|
|
<a href="module-animation_AnimationConstants.html"
|
|
>animation/AnimationConstants</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="module-animation_AnimationNameMapper.html"
|
|
>animation/AnimationNameMapper</a
|
|
>
|
|
</li>
|
|
<li><a href="module-constants.html">constants</a></li>
|
|
<li><a href="module-core.html">core</a></li>
|
|
<li><a href="module-factories.html">factories</a></li>
|
|
<li><a href="module-loaders.html">loaders</a></li>
|
|
<li><a href="module-owen.html">owen</a></li>
|
|
<li><a href="module-states.html">states</a></li>
|
|
</ul>
|
|
<h3>Classes</h3>
|
|
<ul>
|
|
<li>
|
|
<a href="module-StateHandler.StateHandler.html">StateHandler</a>
|
|
</li>
|
|
<li><a href="module-animation.AnimationClip.html">AnimationClip</a></li>
|
|
<li>
|
|
<a href="module-animation.AnimationClipFactory.html"
|
|
>AnimationClipFactory</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="module-animation_AnimationNameMapper.AnimationNameMapper.html"
|
|
>AnimationNameMapper</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="module-core.OwenAnimationContext.html"
|
|
>OwenAnimationContext</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="module-factories.OwenSystemFactory.html"
|
|
>OwenSystemFactory</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="module-loaders.AnimationLoader.html">AnimationLoader</a>
|
|
</li>
|
|
<li>
|
|
<a href="module-loaders.GLTFAnimationLoader.html"
|
|
>GLTFAnimationLoader</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="module-states.ReactStateHandler.html">ReactStateHandler</a>
|
|
</li>
|
|
<li>
|
|
<a href="module-states.SleepStateHandler.html">SleepStateHandler</a>
|
|
</li>
|
|
<li><a href="module-states.StateFactory.html">StateFactory</a></li>
|
|
<li>
|
|
<a href="module-states.TypeStateHandler.html">TypeStateHandler</a>
|
|
</li>
|
|
<li>
|
|
<a href="module-states.WaitStateHandler.html">WaitStateHandler</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<br class="clear" />
|
|
|
|
<footer>
|
|
Documentation generated by
|
|
<a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Sat May 24
|
|
2025 12:29:38 GMT+0200 (Midden-Europese zomertijd)
|
|
</footer>
|
|
|
|
<script>
|
|
prettyPrint();
|
|
</script>
|
|
<script src="scripts/linenumber.js"></script>
|
|
</body>
|
|
</html>
|