quad/docs/kr/include/tweenOptions/index.html

1223 lines
No EOL
39 KiB
HTML

<!doctype html>
<html lang="ko" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Description for Quad. (Korean)">
<meta name="author" content="Qwreey and more">
<link rel="canonical" href="https://quad.qwreey.kr/kr/include/tweenOptions/">
<link rel="icon" href="../../assets/Quad_MiniLogo.png">
<meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.13">
<title>tweenOptions - Quad 한국어 문서</title>
<link rel="stylesheet" href="../../assets/stylesheets/main.ffa9267a.min.css">
<link rel="stylesheet" href="../../assets/stylesheets/palette.a0c5b2b5.min.css">
<link rel="stylesheet" href="../../assets/extra.css">
<script>__md_scope=new URL("../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="darker" data-md-color-primary="" data-md-color-accent="">
<script>var palette=__md_get("__palette");if(palette&&"object"==typeof palette.color)for(var key of Object.keys(palette.color))document.body.setAttribute("data-md-color-"+key,palette.color[key])</script>
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../.." title="Quad 한국어 문서" class="md-header__button md-logo" aria-label="Quad 한국어 문서" data-md-component="logo">
<img src="../../assets/Quad_MiniLogoWhite.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Quad 한국어 문서
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
tweenOptions
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="darker" data-md-color-primary="" data-md-color-accent="" aria-label="밝은 테마로 변경" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="밝은 테마로 변경" for="__palette_2" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 2c-1.05 0-2.05.16-3 .46 4.06 1.27 7 5.04 7 9.54 0 4.5-2.94 8.27-7 9.54.95.3 1.95.46 3 .46a10 10 0 0 0 10-10A10 10 0 0 0 9 2Z"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="" data-md-color-accent="" aria-label="어두운 테마로 변경" type="radio" name="__palette" id="__palette_2">
<label class="md-header__button md-icon" title="어두운 테마로 변경" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a4 4 0 0 0-4 4 4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4m0 10a6 6 0 0 1-6-6 6 6 0 0 1 6-6 6 6 0 0 1 6 6 6 6 0 0 1-6 6m8-9.31V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69Z"/></svg>
</label>
</form>
<div class="md-header__option">
<div class="md-select">
<button class="md-header__button md-icon" aria-label="언어설정">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m12.87 15.07-2.54-2.51.03-.03A17.52 17.52 0 0 0 14.07 6H17V4h-7V2H8v2H1v2h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04M18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12m-2.62 7 1.62-4.33L19.12 17h-3.24Z"/></svg>
</button>
<div class="md-select__inner">
<ul class="md-select__list">
<li class="md-select__item">
<a href="/kr/" hreflang="ko" class="md-select__link">
한국어
</a>
</li>
<li class="md-select__item">
<a href="/en/" hreflang="en" class="md-select__link">
English
</a>
</li>
</ul>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="검색" placeholder="검색" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="검색">
<button type="reset" class="md-search__icon md-icon" title="지우기" aria-label="지우기" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
검색 초기화
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/qwreey75/Quad" title="저장소로 이동" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
Quad
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../.." class="md-tabs__link">
</a>
</li>
<li class="md-tabs__item">
<a href="../../tutorial/" class="md-tabs__link">
튜토리얼
</a>
</li>
<li class="md-tabs__item">
<a href="../../reference/" class="md-tabs__link">
레퍼런스
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../.." title="Quad 한국어 문서" class="md-nav__button md-logo" aria-label="Quad 한국어 문서" data-md-component="logo">
<img src="../../assets/Quad_MiniLogoWhite.png" alt="logo">
</a>
Quad 한국어 문서
</label>
<div class="md-nav__source">
<a href="https://github.com/qwreey75/Quad" title="저장소로 이동" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
</div>
<div class="md-source__repository">
Quad
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_1" >
<div class="md-nav__link md-nav__link--index ">
<a href="../.."></a>
<label for="__nav_1">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_1_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_1">
<span class="md-nav__icon md-icon"></span>
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../gallery/" class="md-nav__link">
갤러리
</a>
</li>
<li class="md-nav__item">
<a href="../../changelogs/" class="md-nav__link">
변경사항
</a>
</li>
<li class="md-nav__item">
<a href="../../license/" class="md-nav__link">
라이선스
</a>
</li>
<li class="md-nav__item">
<a href="../../todo/" class="md-nav__link">
로드맵
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
<div class="md-nav__link md-nav__link--index ">
<a href="../../tutorial/">튜토리얼</a>
<label for="__nav_2">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
튜토리얼
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../tutorial/1_import/" class="md-nav__link">
Import
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/2_mount/" class="md-nav__link">
Mount
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/3_getObject/" class="md-nav__link">
GetObject
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/4_style/" class="md-nav__link">
Style
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/5_event/" class="md-nav__link">
Event
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/6_tween/" class="md-nav__link">
Tween
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/7_quadProperty/" class="md-nav__link">
QuadProperty
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/8_register/" class="md-nav__link">
Register
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/9_lang/" class="md-nav__link">
Lang
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/10_signal/" class="md-nav__link">
Signal
</a>
</li>
<li class="md-nav__item">
<a href="../../tutorial/11_extend/" class="md-nav__link">
Extend
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
<div class="md-nav__link md-nav__link--index ">
<a href="../../reference/">레퍼런스</a>
<label for="__nav_3">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3">
<span class="md-nav__icon md-icon"></span>
레퍼런스
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_2" >
<div class="md-nav__link md-nav__link--index ">
<a href="../../reference/signal/">Signal</a>
<label for="__nav_3_2">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_2_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_2">
<span class="md-nav__icon md-icon"></span>
Signal
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/signal/bindable/" class="md-nav__link">
Bindable
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/signal/disconnecter/" class="md-nav__link">
Disconnecter
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_3" >
<div class="md-nav__link md-nav__link--index ">
<a href="../../reference/store/">Store</a>
<label for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_3_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_3">
<span class="md-nav__icon md-icon"></span>
Store
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/store/objectList/" class="md-nav__link">
ObjectList
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3_4" >
<div class="md-nav__link md-nav__link--index ">
<a href="../../reference/tween/">Tween</a>
<label for="__nav_3_4">
<span class="md-nav__icon md-icon"></span>
</label>
</div>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_3_4_label" aria-expanded="false">
<label class="md-nav__title" for="__nav_3_4">
<span class="md-nav__icon md-icon"></span>
Tween
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../reference/tween/tweenOptions/" class="md-nav__link">
TweenOptions
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/tween/easings/" class="md-nav__link">
Easings
</a>
</li>
<li class="md-nav__item">
<a href="../../reference/tween/directions/" class="md-nav__link">
Directions
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="../../event.md" class="md-nav__link">
Event
</a>
</li>
<li class="md-nav__item">
<a href="../../extend.md" class="md-nav__link">
Extend
</a>
</li>
<li class="md-nav__item">
<a href="../../lang.md" class="md-nav__link">
Lang
</a>
</li>
<li class="md-nav__item">
<a href="../../mounts.md" class="md-nav__link">
Mounts
</a>
</li>
<li class="md-nav__item">
<a href="../../quadProperty.md" class="md-nav__link">
QuadProperty
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1>tweenOptions</h1>
<p><mark>Option</mark> <code class="highlight"><span class="nx">Time</span><span class="o">:</span><span class="kt">number?</span></code> </p>
<blockquote>
<p>트윈의 총 길이를 정합니다. <em>아무 값도 지정하지 않으면 <code class="highlight"><span class="mf">1</span></code>이 사용됩니다.</em> </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">Easing</span><span class="o">:</span><span class="kt">string</span><span class="o">|</span><span class="p">(</span><span class="nx">index</span><span class="o">:</span><span class="kt">number</span><span class="p">)</span><span class="o">-&gt;</span><span class="kt">number</span><span class="o">?</span></code> </p>
<blockquote>
<p>트윈의 가감속 정도를 결정합니다. 문자열 그대로 사용하거나, <code class="highlight"><span class="nx">Tween</span><span class="p">.</span><span class="nx">Easings</span><span class="p">.</span><span class="nx">Linear</span></code>와 같이 열거형 방식으로 사용할 수 있습니다.<br />
혹은 필요에 따라 함수를 지정할 수도 있습니다. 함수를 Easing 으로 사용하는 경우 첫번째 인자로 1차 진행도 (Linear, 0 에서 1 사이의 값) 값이 주어지며, 계산 결과로 실제 적용될 위치를 반환해야합니다. 반환값은 음수이거나 1 보다 클 수 있습니다.<br />
<em>아무 값도 지정하지 않으면 <code>Exp2</code>가 사용됩니다.</em><br />
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal"> 1</span>
<span class="normal"> 2</span>
<span class="normal"> 3</span>
<span class="normal"> 4</span>
<span class="normal"> 5</span>
<span class="normal"> 6</span>
<span class="normal"> 7</span>
<span class="normal"> 8</span>
<span class="normal"> 9</span>
<span class="normal">10</span>
<span class="normal">11</span>
<span class="normal">12</span>
<span class="normal">13</span>
<span class="normal">14</span>
<span class="normal">15</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">Easing</span><span class="w"> </span><span class="o">=</span>
<span class="w"> </span><span class="s2">&quot;Linear&quot;</span><span class="w"> </span><span class="c1">// 아무런 가감속이 없는 1차형</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Quint&quot;</span><span class="w"> </span><span class="c1">// 5 제곱</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Quart&quot;</span><span class="w"> </span><span class="c1">// 네제곱</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Cubic&quot;</span><span class="w"> </span><span class="c1">// 세제곱</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Quad&quot;</span><span class="w"> </span><span class="c1">// 제곱</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Sin&quot;</span><span class="w"> </span><span class="c1">// 사인 파형</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Circle&quot;</span><span class="w"> </span><span class="c1">// 사분원</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Expo&quot;</span><span class="w"> </span><span class="c1">// 지수형</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Elastic&quot;</span><span class="w"> </span><span class="c1">// 탄성</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Bounce&quot;</span><span class="w"> </span><span class="c1">// 튀어오름</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Back&quot;</span><span class="w"> </span><span class="c1">// 뒤로 가감속</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Exp2&quot;</span><span class="w"> </span><span class="c1">// 덜 가파른 지수 i=exp(x)/max, x=-4 to 2</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;Exp4&quot;</span><span class="w"> </span><span class="c1">// 더 가파른 지수 i=exp(x)/max, x=-4 ~ 4</span>
<span class="w"> </span><span class="o">|</span><span class="nx">EasingFunction</span><span class="o">?</span><span class="p">;</span>
</code></pre></div></td></tr></table></div>
함수에 관한 자세한 설명과 미리보기는 <a href="../reference/tween/easings">여기에서</a> 확인하세요 </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">Direction</span><span class="o">:</span><span class="kt">string?</span></code> </p>
<blockquote>
<p>트윈이 진행되는 방향입니다. 문자열 그대로 사용하거나, <code class="highlight"><span class="nx">Tween</span><span class="p">.</span><span class="nx">Directions</span><span class="p">.</span><span class="nx">Out</span></code>과 같이 열거형 방식으로 사용할 수 있습니다.<br />
<em>아무 값도 지정하지 않으면 <code>Out</code>이 사용됩니다.</em>
<div class="highlight"><table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><span></span><span class="normal">1</span>
<span class="normal">2</span>
<span class="normal">3</span>
<span class="normal">4</span>
<span class="normal">5</span>
<span class="normal">6</span>
<span class="normal">7</span></pre></div></td><td class="code"><div><pre><span></span><code><span class="kr">type</span><span class="w"> </span><span class="nx">Direction</span><span class="w"> </span><span class="o">=</span>
<span class="w"> </span><span class="c1">// 초반에 가속이 이루워지며, 후반에 느려집니다.</span>
<span class="w"> </span><span class="s2">&quot;Out&quot;</span>
<span class="w"> </span><span class="c1">// 초반에는 느리며, 점점 가속이 늘어납니다.</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;In&quot;</span>
<span class="w"> </span><span class="c1">//중간에서 가장 빠른 속도를 가지며, 후반 초반 모두 감속이 이루워집니다.</span>
<span class="w"> </span><span class="o">|</span><span class="s2">&quot;InOut&quot;</span>
</code></pre></div></td></tr></table></div>
방향에 관한 자세한 설명과 미리보기는 <a href="../reference/tween/directions">여기에서</a> 확인하세요 </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">CallBack</span><span class="o">:</span><span class="p">{[</span><span class="kt">number</span><span class="o">|</span><span class="s2">&quot;*&quot;</span><span class="o">|</span><span class="kt">string</span><span class="p">]</span><span class="o">:</span><span class="p">(</span><span class="nx">Item</span><span class="o">:</span><span class="kt">any</span><span class="p">,</span><span class="w"> </span><span class="nx">Alpha</span><span class="o">:</span><span class="kt">number</span><span class="p">,</span><span class="w"> </span><span class="nx">AbsolutePercent</span><span class="o">:</span><span class="kt">number</span><span class="p">)</span><span class="o">-&gt;</span><span class="p">()}</span><span class="o">?</span></code> </p>
<blockquote>
<p>선택적인 필드이며, 트윈이 실행중인 도중에 함수를 실행시킬 수 있습니다. 트윈의 진행 정도에 따라서 한번 함수가 실행되거나 트윈 진행중 계속해서 실행되도록 만들 수 있습니다.<br />
인덱스가 숫자인 경우 해당 지점을 넘을 때 함수가 실행되도록 만들 수 있으며, <code class="highlight"><span class="s2">&quot;*&quot;</span></code> 를 인덱스로 사용하면 모든 부분에서 함수가 실행됩니다.<br />
함수에는 편의상 트윈을 하고있는 오브젝트, 위치값, 시간만을 고려한 1차 위치값이 제공됩니다. </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">OnStepped</span><span class="o">:</span><span class="p">(</span><span class="nx">Item</span><span class="o">:</span><span class="kt">any</span><span class="p">,</span><span class="w"> </span><span class="nx">Alpha</span><span class="o">:</span><span class="kt">number</span><span class="p">,</span><span class="w"> </span><span class="nx">AbsolutePercent</span><span class="o">:</span><span class="kt">number</span><span class="p">)</span><span class="o">-&gt;</span><span class="p">()</span><span class="o">?</span></code> </p>
<blockquote>
<p>CallBack 에 <code class="highlight"><span class="s2">&quot;*&quot;</span></code> 를 넣은것과 동일한 효과를 가지는 별칭입니다 </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">Ended</span><span class="o">:</span><span class="p">(</span><span class="nx">Item</span><span class="o">:</span><span class="kt">any</span><span class="p">,</span><span class="w"> </span><span class="nx">Alpha</span><span class="o">:</span><span class="kt">number</span><span class="p">,</span><span class="w"> </span><span class="nx">AbsolutePercent</span><span class="o">:</span><span class="kt">number</span><span class="p">)</span><span class="o">-&gt;</span><span class="p">()</span><span class="o">?</span></code> </p>
<blockquote>
<p>CallBack 에 <code class="highlight"><span class="mi">1</span></code>을 넣은것과 동일한 효과를 가지는 별칭입니다 </p>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">Getter</span><span class="o">:</span><span class="p">(</span><span class="nx">Item</span><span class="o">:</span><span class="kt">any</span><span class="p">,</span><span class="w"> </span><span class="nx">Property</span><span class="o">:</span><span class="kt">string</span><span class="p">)</span><span class="o">-&gt;</span><span class="nx">any</span><span class="o">?</span></code> </p>
<blockquote>
<p>선택적인 필드이며, 트윈이 값을 얻으려 할 때 사용할 함수입니다.<br />
함수에 트윈하고 있는 오브젝트, 프로퍼티 이름이 제공됩니다. </p>
<details class="warning" open="open">
<summary>Warning</summary>
<p><code class="highlight"><span class="nx">register</span><span class="o">:</span><span class="kt">Tween</span><span class="p">()</span></code> 와 호환되지 않습니다. </p>
</details>
</blockquote>
<hr />
<p><mark>Option</mark> <code class="highlight"><span class="nx">Getter</span><span class="o">:</span><span class="p">(</span><span class="nx">Item</span><span class="o">:</span><span class="kt">any</span><span class="p">,</span><span class="w"> </span><span class="nx">Property</span><span class="o">:</span><span class="kt">string</span><span class="p">,</span><span class="w"> </span><span class="nx">Value</span><span class="o">:</span><span class="kt">Lerpable</span><span class="p">)</span><span class="o">-&gt;</span><span class="nx">any</span><span class="o">?</span></code></p>
<blockquote>
<p>선택적인 필드이며, 트윈이 값을 설정하려 할 때 사용할 함수입니다.
함수에 트윈하고 있는 오브젝트, 프로퍼티 이름, 설정할 값이 제공됩니다. </p>
<details class="warning" open="open">
<summary>Warning</summary>
<p><code class="highlight"><span class="nx">register</span><span class="o">:</span><span class="kt">Tween</span><span class="p">()</span></code> 와 호환되지 않습니다. </p>
</details>
</blockquote>
</article>
</div>
</div>
<a href="#" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
맨위로
</a>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
<div class="md-copyright__highlight">
Copyright &copy; 2020 - 2023 Qwreey
</div>
Made with
<a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
Material for MkDocs
</a>
</div>
<div class="md-social">
<a href="https://github.com/qwreey75" target="_blank" rel="noopener" title="github.com" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://stella.place/@qwreey" target="_blank" rel="noopener me" title="stella.place" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc.--><path d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48 0 0 0-63.72 28.5-63.72 125.7 0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54 0 0 1-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../..", "features": ["navigation.indexes", "navigation.footer", "navigation.tabs", "navigation.top", "toc.integrate", "content.code.copy"], "search": "../../assets/javascripts/workers/search.208ed371.min.js", "translations": {"clipboard.copied": "\ud074\ub9bd\ubcf4\ub4dc\uc5d0 \ubcf5\uc0ac\ub428", "clipboard.copy": "\ud074\ub9bd\ubcf4\ub4dc\ub85c \ubcf5\uc0ac", "search.result.more.one": "\uc774 \ubb38\uc11c\uc5d0\uc11c 1\uac1c\uc758 \uac80\uc0c9 \uacb0\uacfc \ub354 \ubcf4\uae30", "search.result.more.other": "\uc774 \ubb38\uc11c\uc5d0\uc11c #\uac1c\uc758 \uac80\uc0c9 \uacb0\uacfc \ub354 \ubcf4\uae30", "search.result.none": "\uac80\uc0c9\uc5b4\uc640 \uc77c\uce58\ud558\ub294 \ubb38\uc11c\uac00 \uc5c6\uc2b5\ub2c8\ub2e4", "search.result.one": "1\uac1c\uc758 \uc77c\uce58\ud558\ub294 \ubb38\uc11c", "search.result.other": "#\uac1c\uc758 \uc77c\uce58\ud558\ub294 \ubb38\uc11c", "search.result.placeholder": "\uac80\uc0c9\uc5b4\ub97c \uc785\ub825\ud558\uc138\uc694", "search.result.term.missing": "\ud3ec\ud568\ub418\uc9c0 \uc54a\uc740 \uac80\uc0c9\uc5b4", "select.version": "\ubc84\uc804 \uc120\ud0dd"}}</script>
<script src="../../assets/javascripts/bundle.2a6f1dda.min.js"></script>
</body>
</html>