2 lines
15 KiB
JavaScript
2 lines
15 KiB
JavaScript
import{_ as e,a as t,b as n,ag as i}from"./chunks/framework.BcrMLAmg.js";const u=JSON.parse('{"title":"AnimationInstance","description":"","frontmatter":{},"headers":[],"relativePath":"references/plugins/animation.md","filePath":"references/plugins/animation.md","lastUpdated":1757844696000}'),o={name:"references/plugins/animation.md"};function r(s,a,l,d,c,m){return n(),t("div",null,a[0]||(a[0]=[i('<h1 id="animationinstance" tabindex="-1">AnimationInstance <a class="header-anchor" href="#animationinstance" aria-label="Permalink to "AnimationInstance""></a></h1><p><em>This is the AnimationInstance class. It represents a single animation instance</em></p><h2 id="functions" tabindex="-1">Functions <a class="header-anchor" href="#functions" aria-label="Permalink to "Functions""></a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#animationinstance-new-element-animtype-args-duration-easing">AnimationInstance.new</a></td><td>AnimationInstance</td><td>Creates a new animation instance</td></tr><tr><td><a href="#animationinstance-start">AnimationInstance:start</a></td><td>AnimationInstance</td><td>Starts the animation</td></tr><tr><td><a href="#animationinstance-update-elapsed">AnimationInstance:update</a></td><td>boolean</td><td>Updates the animation</td></tr><tr><td><a href="#animationinstance-complete">AnimationInstance:complete</a></td><td>-</td><td>Called when the animation is completed</td></tr></tbody></table><h2 id="animationinstance-new-element-animtype-args-duration-easing" tabindex="-1">AnimationInstance.new(element, animType, args, duration, easing) <a class="header-anchor" href="#animationinstance-new-element-animtype-args-duration-easing" aria-label="Permalink to "AnimationInstance.new(element, animType, args, duration, easing)""></a></h2><p>Creates a new AnimationInstance</p><h3 id="parameters" tabindex="-1">Parameters <a class="header-anchor" href="#parameters" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>element</code> <code>VisualElement</code> The element to animate</li><li><code>animType</code> <code>string</code> The type of animation</li><li><code>args</code> <code>table</code> The animation arguments</li><li><code>duration</code> <code>number</code> Duration in seconds</li><li><code>easing</code> <code>string</code> The easing function name</li></ul><h3 id="returns" tabindex="-1">Returns <a class="header-anchor" href="#returns" aria-label="Permalink to "Returns""></a></h3><ul><li><code>AnimationInstance</code> <code>The</code> new animation instance</li></ul><h2 id="animationinstance-start" tabindex="-1">AnimationInstance:start() <a class="header-anchor" href="#animationinstance-start" aria-label="Permalink to "AnimationInstance:start()""></a></h2><p>Starts the animation</p><h3 id="returns-1" tabindex="-1">Returns <a class="header-anchor" href="#returns-1" aria-label="Permalink to "Returns""></a></h3><ul><li><code>AnimationInstance</code> <code>self</code> The animation instance</li></ul><h2 id="animationinstance-update-elapsed" tabindex="-1">AnimationInstance:update(elapsed) <a class="header-anchor" href="#animationinstance-update-elapsed" aria-label="Permalink to "AnimationInstance:update(elapsed)""></a></h2><p>Updates the animation</p><h3 id="parameters-1" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-1" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>elapsed</code> <code>number</code> The elapsed time in seconds</li></ul><h3 id="returns-2" tabindex="-1">Returns <a class="header-anchor" href="#returns-2" aria-label="Permalink to "Returns""></a></h3><ul><li><code>boolean</code> <code>Whether</code> the animation is finished</li></ul><h2 id="animationinstance-complete" tabindex="-1">AnimationInstance:complete() <a class="header-anchor" href="#animationinstance-complete" aria-label="Permalink to "AnimationInstance:complete()""></a></h2><p>Gets called when the animation is completed</p><h1 id="animation" tabindex="-1">Animation <a class="header-anchor" href="#animation" aria-label="Permalink to "Animation""></a></h1><p><em>This is the animation plugin. It provides a animation system for visual elements</em><em>with support for sequences, easing functions, and multiple animation types.</em></p><h2 id="functions-1" tabindex="-1">Functions <a class="header-anchor" href="#functions-1" aria-label="Permalink to "Functions""></a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#animation-registeranimation-name-handlers">Animation.registerAnimation</a></td><td>-</td><td>Registers a custom animation type</td></tr><tr><td><a href="#animation-registereasing-name-func">Animation.registerEasing</a></td><td>-</td><td>Adds a custom easing function</td></tr><tr><td><a href="#animation-new-element">Animation.new</a></td><td>Animation</td><td>Creates a new animation</td></tr><tr><td><a href="#animation-sequence">Animation:sequence</a></td><td>Animation</td><td>Creates a new sequence</td></tr><tr><td><a href="#animation-onstart-callback">Animation:onStart</a></td><td>-</td><td>Registers a callback for the start event</td></tr><tr><td><a href="#animation-onupdate-callback">Animation:onUpdate</a></td><td>Animation</td><td>Registers a callback for the update event</td></tr><tr><td><a href="#animation-oncomplete-callback">Animation:onComplete</a></td><td>Animation</td><td>Registers a callback for the complete event</td></tr><tr><td><a href="#animation-addanimation-type-args-duration-easing">Animation:addAnimation</a></td><td>-</td><td>Adds a new animation to the sequence</td></tr><tr><td><a href="#animation-start">Animation:start</a></td><td>Animation</td><td>Starts the animation</td></tr><tr><td><a href="#animation-event-event-timerid">Animation:event</a></td><td>-</td><td>The event handler for the animation</td></tr><tr><td><a href="#animation-stop">Animation:stop</a></td><td>-</td><td>Stops the animation</td></tr></tbody></table><h2 id="animation-registeranimation-name-handlers" tabindex="-1">Animation.registerAnimation(name, handlers) <a class="header-anchor" href="#animation-registeranimation-name-handlers" aria-label="Permalink to "Animation.registerAnimation(name, handlers)""></a></h2><p>Registers a new animation type</p><h3 id="parameters-2" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-2" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>name</code> <code>string</code> The name of the animation</li><li><code>handlers</code> <code>table</code> Table containing start, update and complete handlers</li></ul><h3 id="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-label="Permalink to "Usage""></a></h3><div class="language-lua vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">lua</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">Animation.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">registerAnimation</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"fade"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">start</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(anim) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">update</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(anim,progress) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">end</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span></code></pre></div><h2 id="animation-registereasing-name-func" tabindex="-1">Animation.registerEasing(name, func) <a class="header-anchor" href="#animation-registereasing-name-func" aria-label="Permalink to "Animation.registerEasing(name, func)""></a></h2><p>Registers a new easing function</p><h3 id="parameters-3" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-3" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>name</code> <code>string</code> The name of the easing function</li><li><code>func</code> <code>function</code> The easing function (takes progress 0-1, returns modified progress)</li></ul><h2 id="animation-new-element" tabindex="-1">Animation.new(element) <a class="header-anchor" href="#animation-new-element" aria-label="Permalink to "Animation.new(element)""></a></h2><p>Creates a new Animation</p><h3 id="parameters-4" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-4" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>element</code> <code>VisualElement</code> The element to animate</li></ul><h3 id="returns-3" tabindex="-1">Returns <a class="header-anchor" href="#returns-3" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>The</code> new animation</li></ul><h2 id="animation-sequence" tabindex="-1">Animation:sequence() <a class="header-anchor" href="#animation-sequence" aria-label="Permalink to "Animation:sequence()""></a></h2><p>Creates a new sequence</p><h3 id="returns-4" tabindex="-1">Returns <a class="header-anchor" href="#returns-4" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>self</code> The animation instance</li></ul><h2 id="animation-onstart-callback" tabindex="-1">Animation:onStart(callback) <a class="header-anchor" href="#animation-onstart-callback" aria-label="Permalink to "Animation:onStart(callback)""></a></h2><p>Registers a callback for the start event</p><h3 id="parameters-5" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-5" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>callback</code> <code>function</code> The callback function to register</li></ul><h2 id="animation-onupdate-callback" tabindex="-1">Animation:onUpdate(callback) <a class="header-anchor" href="#animation-onupdate-callback" aria-label="Permalink to "Animation:onUpdate(callback)""></a></h2><p>Registers a callback for the update event</p><h3 id="parameters-6" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-6" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>callback</code> <code>function</code> The callback function to register</li></ul><h3 id="returns-5" tabindex="-1">Returns <a class="header-anchor" href="#returns-5" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>self</code> The animation instance</li></ul><h2 id="animation-oncomplete-callback" tabindex="-1">Animation:onComplete(callback) <a class="header-anchor" href="#animation-oncomplete-callback" aria-label="Permalink to "Animation:onComplete(callback)""></a></h2><p>Registers a callback for the complete event</p><h3 id="parameters-7" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-7" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>callback</code> <code>function</code> The callback function to register</li></ul><h3 id="returns-6" tabindex="-1">Returns <a class="header-anchor" href="#returns-6" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>self</code> The animation instance</li></ul><h2 id="animation-addanimation-type-args-duration-easing" tabindex="-1">Animation:addAnimation(type, args, duration, easing) <a class="header-anchor" href="#animation-addanimation-type-args-duration-easing" aria-label="Permalink to "Animation:addAnimation(type, args, duration, easing)""></a></h2><p>Adds a new animation to the sequence</p><h3 id="parameters-8" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-8" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>type</code> <code>string</code> The type of animation</li><li><code>args</code> <code>table</code> The animation arguments</li><li><code>duration</code> <code>number</code> The duration in seconds</li><li><code>easing</code> <code>string</code> The easing function name</li></ul><h2 id="animation-start" tabindex="-1">Animation:start() <a class="header-anchor" href="#animation-start" aria-label="Permalink to "Animation:start()""></a></h2><p>Starts the animation</p><h3 id="returns-7" tabindex="-1">Returns <a class="header-anchor" href="#returns-7" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>self</code> The animation instance</li></ul><h2 id="animation-event-event-timerid" tabindex="-1">Animation:event(event, timerId) <a class="header-anchor" href="#animation-event-event-timerid" aria-label="Permalink to "Animation:event(event, timerId)""></a></h2><p>The event handler for the animation (listens to timer events)</p><h3 id="parameters-9" tabindex="-1">Parameters <a class="header-anchor" href="#parameters-9" aria-label="Permalink to "Parameters""></a></h3><ul><li><code>event</code> <code>string</code> The event type</li><li><code>timerId</code> <code>number</code> The timer ID</li></ul><h2 id="animation-stop" tabindex="-1">Animation:stop() <a class="header-anchor" href="#animation-stop" aria-label="Permalink to "Animation:stop()""></a></h2><p>Stops the animation immediately: cancels timers, completes running anim instances and clears the element property</p><h1 id="visualelement" tabindex="-1">VisualElement <a class="header-anchor" href="#visualelement" aria-label="Permalink to "VisualElement""></a></h1><p><em>Adds additional methods for VisualElement when adding animation plugin</em></p><h2 id="functions-2" tabindex="-1">Functions <a class="header-anchor" href="#functions-2" aria-label="Permalink to "Functions""></a></h2><table tabindex="0"><thead><tr><th>Method</th><th>Returns</th><th>Description</th></tr></thead><tbody><tr><td><a href="#visualelement-stopanimation">VisualElement.stopAnimation</a></td><td>-</td><td>Convenience to stop animations from the element</td></tr><tr><td><a href="#visualelement-animate">VisualElement:animate</a></td><td>Animation</td><td>Creates a new animation</td></tr></tbody></table><h2 id="visualelement-stopanimation" tabindex="-1">VisualElement.stopAnimation() <a class="header-anchor" href="#visualelement-stopanimation" aria-label="Permalink to "VisualElement.stopAnimation()""></a></h2><p>Convenience to stop animations from the element</p><h2 id="visualelement-animate" tabindex="-1">VisualElement:animate() <a class="header-anchor" href="#visualelement-animate" aria-label="Permalink to "VisualElement:animate()""></a></h2><p>Creates a new Animation Object</p><h3 id="returns-8" tabindex="-1">Returns <a class="header-anchor" href="#returns-8" aria-label="Permalink to "Returns""></a></h3><ul><li><code>Animation</code> <code>animation</code> The new animation</li></ul>',86)]))}const p=e(o,[["render",r]]);export{u as __pageData,p as default};
|