immaterial-design-ripple

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl" href="../"> <title data-ice="title">Function | 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"><h1 data-ice="title">Function</h1> <div data-ice="summaries"><table class="summary" data-ice="summary"> <thead><tr><td data-ice="title" colspan="3">Static Public Summary</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="function/index.html#static-function-createContext2d">createContext2d</a></span></span><span data-ice="signature">(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/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span></span> </p> </div> <div> <div data-ice="description"><p>指定した大きさのcontext2dを返す</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="function/index.html#static-function-createRenderSchedule">createRenderSchedule</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/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></span> </p> </div> <div> <div data-ice="description"><p>指定した大きさのimageDataを作成し 波形アニメーションとして表示するフレーム番号を計算する x,yを始点とする</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="function/index.html#static-function-getImageData">getImageData</a></span></span><span data-ice="signature">(canvas: <span>HTMLCanvasElement</span>): <span>ImageData</span></span> </p> </div> <div> <div data-ice="description"><p>contextと同じ大きさの空のimageDataを返す</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="function/index.html#static-function-getPixelColor">getPixelColor</a></span></span><span data-ice="signature">(colorName: <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/Array">Array</a></span></span> </p> </div> <div> <div data-ice="description"><p>指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）</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="function/index.html#static-function-getTimingFunction">getTimingFunction</a></span></span><span data-ice="signature">(name: <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/Function">Function</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></span> </p> </div> <div> <div data-ice="description"><p>easingJsで定義された関数名であれば、その関数を返し 引数が関数であれば、そのまま返す それ以外はnull</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="function/index.html#static-function-promiseEvent">promiseEvent</a></span></span><span data-ice="signature">(target: <span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></span>, eventName: <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/Promise">Promise</a></span><<span>EventTarget</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 class="override" data-ice="override"></span> </td> <td> <div> <p> <span data-ice="name"><span><a href="function/index.html#static-function-requestAnimationFrame">requestAnimationFrame</a></span></span><span data-ice="signature">(callback: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span>): <span>*</span></span> </p> </div> <div> <div data-ice="description"><p>利用可能な非同期関数でcallbackを実行する</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="function/index.html#static-function-transparentize">transparentize</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><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/JavaScript/Reference/Global_Objects/null">null</a></span>></span> </p> </div> <div> <div data-ice="description"><p>canvasを透明化、opacity:0でcanvasを破棄</p> </div> </div> </td> <td> </td> </tr> </tbody> </table> </div> <div data-ice="details"><h2 data-ice="title">Static Public </h2> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-createContext2d"> <span class="access" data-ice="access">public</span> <span data-ice="name">createContext2d</span><span data-ice="signature">(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/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber45">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {createContext2d} from '<span><a href="file/src/utility.js.html#lineNumber45">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>指定した大きさのcontext2dを返す</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">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>contextの幅</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>contextの高さ</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.pixelated</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> <li>default: true</li></ul></td> <td data-ice="description"><p>アンチエイリアスを切る</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/API/CanvasRenderingContext2D">CanvasRenderingContext2D</a></span></td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-createRenderSchedule"> <span class="access" data-ice="access">public</span> <span data-ice="name">createRenderSchedule</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/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber162">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {createRenderSchedule} from '<span><a href="file/src/utility.js.html#lineNumber162">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>指定した大きさのimageDataを作成し 波形アニメーションとして表示するフレーム番号を計算する x,yを始点とする</p> <p>返される配列の値は大きさからpixelSizeを割ったもの。</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></ul></td> <td data-ice="description"><p>ピクセル１粒の大きさ</p> </td> </tr> <tr data-ice="property" data-depth="1"> <td data-ice="name" data-depth="1">options.bitCrash</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: null</li></ul></td> <td data-ice="description"><p>境界にノイズを入れる、値はノイズの強さ</p> </td> </tr> <tr data-ice="property" data-depth="1"> <td data-ice="name" data-depth="1">options.timingFunction</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><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span></td> <td data-ice="appendix"><ul><li>optional</li> <li>default: 'easeInQuint'</li></ul></td> <td data-ice="description"><p>フレーム番号のイージング関数名</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/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></td> <td class="return-desc" data-ice="returnDescription"><p>RenderSchedule.easedBy フレーム番号の調整に使用した関数</p> </td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-getImageData"> <span class="access" data-ice="access">public</span> <span data-ice="name">getImageData</span><span data-ice="signature">(canvas: <span>HTMLCanvasElement</span>): <span>ImageData</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber73">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {getImageData} from '<span><a href="file/src/utility.js.html#lineNumber73">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>contextと同じ大きさの空のimageDataを返す</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">canvas</td> <td data-ice="type"><span>HTMLCanvasElement</span></td> <td data-ice="appendix"></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>ImageData</span></td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-getPixelColor"> <span class="access" data-ice="access">public</span> <span data-ice="name">getPixelColor</span><span data-ice="signature">(colorName: <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/Array">Array</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber230">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {getPixelColor} from '<span><a href="file/src/utility.js.html#lineNumber230">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）</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">colorName</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>CanvasRenderingContext2D.fillStyleの値</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/Array">Array</a></span></td> <td class="return-desc" data-ice="returnDescription"><p>color [r,g,b,a]</p> </td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-getTimingFunction"> <span class="access" data-ice="access">public</span> <span data-ice="name">getTimingFunction</span><span data-ice="signature">(name: <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/Function">Function</a></span>): <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber128">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {getTimingFunction} from '<span><a href="file/src/utility.js.html#lineNumber128">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>easingJsで定義された関数名であれば、その関数を返し 引数が関数であれば、そのまま返す それ以外はnull</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">name</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><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span></td> <td data-ice="appendix"></td> <td data-ice="description"><p>EasingJsの関数名か、独自で関数を定義</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/Function">Function</a></span> | <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></span></td> <td class="return-desc" data-ice="returnDescription"><p>timingFunction (t,b,c,d)を受け取るイージング関数。未定義の関数名ならnull</p> </td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-promiseEvent"> <span class="access" data-ice="access">public</span> <span data-ice="name">promiseEvent</span><span data-ice="signature">(target: <span><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element">Element</a></span>, eventName: <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/Promise">Promise</a></span><<span>EventTarget</span>></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber24">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {promiseEvent} from '<span><a href="file/src/utility.js.html#lineNumber24">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <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">target</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>イベントを取得する要素</p> </td> </tr> <tr data-ice="property" data-depth="0"> <td data-ice="name" data-depth="0">eventName</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>取得するイベント名</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>EventTarget</span>></td> <td class="return-desc" data-ice="returnDescription"><p>deferredEvent 取得したイベント</p> </td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-requestAnimationFrame"> <span class="access" data-ice="access">public</span> <span data-ice="name">requestAnimationFrame</span><span data-ice="signature">(callback: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span>): <span>*</span></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber12">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {requestAnimationFrame} from '<span><a href="file/src/utility.js.html#lineNumber12">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>利用可能な非同期関数でcallbackを実行する</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">callback</td> <td data-ice="type"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></span></td> <td data-ice="appendix"><ul><li>optional</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> <td class="return-desc" data-ice="returnDescription"><p>undefined</p> </td> </tr> </table> <div data-ice="returnProperties"> </div> </div> </div> <div class="detail" data-ice="detail"> <h3 data-ice="anchor" id="static-function-transparentize"> <span class="access" data-ice="access">public</span> <span data-ice="name">transparentize</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><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/JavaScript/Reference/Global_Objects/null">null</a></span>></span> <span class="right-info"> <span data-ice="source"><span><a href="file/src/utility.js.html#lineNumber92">source</a></span></span> </span> </h3> <div data-ice="importPath" class="import-path"><pre class="prettyprint"><code data-ice="importPathCode">import {transparentize} from '<span><a href="file/src/utility.js.html#lineNumber92">immaterial-design-ripple/src/utility.js</a></span>'</code></pre></div> <div data-ice="description"><p>canvasを透明化、opacity:0でcanvasを破棄</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>透明化させ、破棄する要素</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.opacityStep</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: 0.02</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/JavaScript/Reference/Global_Objects/null">null</a></span>></td> <td class="return-desc" data-ice="returnDescription"><p>animation 要素破棄時にfullfill</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>