immaterial-design-ripple
Version:
HTML5 Canvas based pixelated ripple effect
858 lines (563 loc) • 31.6 kB
HTML
<html>
<head>
<meta charset="utf-8">
<base data-ice="baseUrl" href="../../">
<title data-ice="title">ImdRipple | API Document</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css">
<script src="script/prettify/prettify.js"></script>
<script src="script/manual.js"></script>
</head>
<body class="layout-container" data-ice="rootContainer">
<header>
<a href="./">Home</a>
<a href="identifiers.html">Reference</a>
<a href="source.html">Source</a>
<a data-ice="repoURL" href="https://github.com/immaterial-design/immaterial-design-ripple" class="repo-url-github">Repository</a>
<div class="search-box">
<span>
<img src="./image/search.png">
<span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span>
</span>
<ul class="search-result"></ul>
</div>
</header>
<nav class="navigation" data-ice="nav"><div>
<ul>
<li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html">ImdRipple</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createContext2d">createContext2d</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createRenderSchedule">createRenderSchedule</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getImageData">getImageData</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getPixelColor">getPixelColor</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getTimingFunction">getTimingFunction</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-promiseEvent">promiseEvent</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-requestAnimationFrame">requestAnimationFrame</a></span></span></li>
<li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-transparentize">transparentize</a></span></span></li>
</ul>
</div>
</nav>
<div class="content" data-ice="content"><div class="header-notice">
<div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import ImdRipple from '<span><a href="file/src/index.js.html#lineNumber8">immaterial-design-ripple/src/index.js</a></span>'</code></pre></div>
<span data-ice="access">public</span>
<span data-ice="kind">class</span>
<span data-ice="source">| <span><a href="file/src/index.js.html#lineNumber8">source</a></span></span>
</div>
<div class="self-detail detail">
<h1 data-ice="name">ImdRipple</h1>
<div class="flat-list" data-ice="extendsChain"><h4>Extends:</h4><div><span>events~EventEmitter</span> → ImdRipple</div></div>
</div>
<div data-ice="staticMemberSummary"><h2>Static Member Summary</h2><table class="summary" data-ice="summary">
<thead><tr><td data-ice="title" colspan="3">Static Public Members</td></tr></thead>
<tbody>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span class="kind" data-ice="kind">get</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#static-get-util">util</a></span></span><span data-ice="signature">: <span>*</span></span>
</p>
</div>
<div>
<div data-ice="description"><p>アニメーションで使用するユーティリティ関数群の参照</p>
</div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div data-ice="staticMethodSummary"><h2>Static Method Summary</h2><table class="summary" data-ice="summary">
<thead><tr><td data-ice="title" colspan="3">Static Public Methods</td></tr></thead>
<tbody>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#static-method-bindOnLoad">bindOnLoad</a></span></span><span data-ice="signature">(selector: <span>*</span>, options: {}): <span>*</span></span>
</p>
</div>
<div>
<div data-ice="description"><p>ページの読み込み時にインスタンスを自動で生成する</p>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#static-method-play">play</a></span></span><span data-ice="signature">(x: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, y: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, width: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, height: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span><<span><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span>></span>
</p>
</div>
<div>
<div data-ice="description"><p>CanvasRenderingContext2Dを作成して波形アニメーションを再生する
全てのピクセルの描写を終えるまでcanvasを更新し続ける
キャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する
全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする</p>
</div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div data-ice="constructorSummary"><h2>Constructor Summary</h2><table class="summary" data-ice="summary">
<thead><tr><td data-ice="title" colspan="3">Public Constructor</td></tr></thead>
<tbody>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#instance-constructor-constructor">constructor</a></span></span><span data-ice="signature">(element: <span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>)</span>
</p>
</div>
<div>
<div data-ice="description"><p>指定の要素のクリック時にアニメーションするイベントを追加する</p>
</div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div data-ice="memberSummary"><h2>Member Summary</h2><table class="summary" data-ice="summary">
<thead><tr><td data-ice="title" colspan="3">Public Members</td></tr></thead>
<tbody>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#instance-member-element">element</a></span></span><span data-ice="signature">: <span>*</span></span>
</p>
</div>
<div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div data-ice="methodSummary"><h2>Method Summary</h2><table class="summary" data-ice="summary">
<thead><tr><td data-ice="title" colspan="3">Public Methods</td></tr></thead>
<tbody>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#instance-method-getOptions">getOptions</a></span></span><span data-ice="signature">(attrName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></span>
</p>
</div>
<div>
<div data-ice="description"><p>this.elementに直接定義したオプションを返す</p>
</div>
</div>
</td>
<td>
</td>
</tr>
<tr data-ice="target">
<td>
<span class="access" data-ice="access">public</span>
<span class="override" data-ice="override"></span>
</td>
<td>
<div>
<p>
<span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html#instance-method-play">play</a></span></span><span data-ice="signature">(x: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, y: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span></span>
</p>
</div>
<div>
<div data-ice="description"><p>コンストラクタの要素内で波形アニメーションを再生する</p>
</div>
</div>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
<div data-ice="staticMemberDetails"><h2 data-ice="title">Static Public Members</h2>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="static-get-util">
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span class="kind" data-ice="kind">get</span>
<span data-ice="name">util</span><span data-ice="signature">: <span>*</span></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber16">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>アニメーションで使用するユーティリティ関数群の参照</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Properties:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="1">
<td data-ice="name" data-depth="1">ImdRipple.util</td>
<td data-ice="type"><span>*</span></td>
<td data-ice="appendix"></td>
<td data-ice="description"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div data-ice="staticMethodDetails"><h2 data-ice="title">Static Public Methods</h2>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="static-method-bindOnLoad">
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span data-ice="name">bindOnLoad</span><span data-ice="signature">(selector: <span>*</span>, options: {}): <span>*</span></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber27">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>ページの読み込み時にインスタンスを自動で生成する</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Params:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">selector</td>
<td data-ice="type"><span>*</span></td>
<td data-ice="appendix"></td>
<td data-ice="description"></td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">options</td>
<td data-ice="type">{}</td>
<td data-ice="appendix"><ul><li>optional</li>
<li>default: {}</li></ul></td>
<td data-ice="description"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="return-params" data-ice="returnParams">
<h4>Return:</h4>
<table>
<tr>
<td class="return-type" data-ice="returnType"><span>*</span></td>
</tr>
</table>
<div data-ice="returnProperties">
</div>
</div>
</div>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="static-method-play">
<span class="access" data-ice="access">public</span>
<span data-ice="static">static</span>
<span data-ice="name">play</span><span data-ice="signature">(x: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, y: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, width: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, height: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span><<span><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span>></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber156">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>CanvasRenderingContext2Dを作成して波形アニメーションを再生する
全てのピクセルの描写を終えるまでcanvasを更新し続ける
キャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する
全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Params:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">x</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>波形アニメーションの始点x</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">y</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>波形アニメーションの始点y</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">width</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>波形アニメーションの幅</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">height</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>波形アニメーションの高さ</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">options</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></td>
<td data-ice="appendix"><ul><li>optional</li></ul></td>
<td data-ice="description"></td>
</tr>
<tr data-ice="property" data-depth="1">
<td data-ice="name" data-depth="1">options.pixelSize</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"><ul><li>optional</li>
<li>default: height/15</li></ul></td>
<td data-ice="description"><p>ピクセル1粒の大きさ</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="return-params" data-ice="returnParams">
<h4>Return:</h4>
<table>
<tr>
<td class="return-type" data-ice="returnType"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span><<span><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span>></td>
<td class="return-desc" data-ice="returnDescription"><p>animation 独自の2プロパティを持つ</p>
</td>
</tr>
</table>
<div data-ice="returnProperties">
</div>
</div>
</div>
</div>
<div data-ice="constructorDetails"><h2 data-ice="title">Public Constructors</h2>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="instance-constructor-constructor">
<span class="access" data-ice="access">public</span>
<span data-ice="name">constructor</span><span data-ice="signature">(element: <span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>)</span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber45">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>指定の要素のクリック時にアニメーションするイベントを追加する</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Params:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">element</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>クリックイベントを監視する要素。アニメ時子要素としてCanvasを追加する</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">options</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></td>
<td data-ice="appendix"><ul><li>optional</li></ul></td>
<td data-ice="description"><p>this.playの引数</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div data-ice="memberDetails"><h2 data-ice="title">Public Members</h2>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="instance-member-element">
<span class="access" data-ice="access">public</span>
<span data-ice="name">element</span><span data-ice="signature">: <span>*</span></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber52">source</a></span></span>
</span>
</h3>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Properties:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">element</td>
<td data-ice="type"><span>HTMLElement</span></td>
<td data-ice="appendix"></td>
<td data-ice="description"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div data-ice="methodDetails"><h2 data-ice="title">Public Methods</h2>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="instance-method-getOptions">
<span class="access" data-ice="access">public</span>
<span data-ice="name">getOptions</span><span data-ice="signature">(attrName: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber99">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>this.elementに直接定義したオプションを返す</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Params:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">attrName</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></span></td>
<td data-ice="appendix"></td>
<td data-ice="description"><p>取得し、json5としてパースする属性名</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="return-params" data-ice="returnParams">
<h4>Return:</h4>
<table>
<tr>
<td class="return-type" data-ice="returnType"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></td>
<td class="return-desc" data-ice="returnDescription"><p>options オプション</p>
</td>
</tr>
</table>
<div data-ice="returnProperties">
</div>
</div>
</div>
<div class="detail" data-ice="detail">
<h3 data-ice="anchor" id="instance-method-play">
<span class="access" data-ice="access">public</span>
<span data-ice="name">play</span><span data-ice="signature">(x: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, y: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span>, options: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span></span>
<span class="right-info">
<span data-ice="source"><span><a href="file/src/index.js.html#lineNumber114">source</a></span></span>
</span>
</h3>
<div data-ice="description"><p>コンストラクタの要素内で波形アニメーションを再生する</p>
</div>
<div data-ice="properties"><div data-ice="properties">
<h4 data-ice="title">Params:</h4>
<table class="params">
<thead>
<tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
</thead>
<tbody>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">x</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"><ul><li>optional</li>
<li>default: auto</li></ul></td>
<td data-ice="description"><p>波形アニメーションの始点x</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">y</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></span></td>
<td data-ice="appendix"><ul><li>optional</li>
<li>default: auto</li></ul></td>
<td data-ice="description"><p>波形アニメーションの始点y</p>
</td>
</tr>
<tr data-ice="property" data-depth="0">
<td data-ice="name" data-depth="0">options</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></span></td>
<td data-ice="appendix"><ul><li>optional</li></ul></td>
<td data-ice="description"><p>ImdRipple.rippleで使用する引数</p>
</td>
</tr>
<tr data-ice="property" data-depth="1">
<td data-ice="name" data-depth="1">options.exitBefore</td>
<td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></span> | <span>Bool</span></td>
<td data-ice="appendix"><ul><li>optional</li></ul></td>
<td data-ice="description"><p>canvasを破棄するタイミングの指定</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="return-params" data-ice="returnParams">
<h4>Return:</h4>
<table>
<tr>
<td class="return-type" data-ice="returnType"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></span></td>
<td class="return-desc" data-ice="returnDescription"><p>ImdRipple.play参照</p>
</td>
</tr>
</table>
<div data-ice="returnProperties">
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.7)</span></a>
</footer>
<script src="script/search_index.js"></script>
<script src="script/search.js"></script>
<script src="script/pretty-print.js"></script>
<script src="script/inherited-summary.js"></script>
<script src="script/test-summary.js"></script>
<script src="script/inner-link.js"></script>
<script src="script/patch-for-local.js"></script>
</body>
</html>