immaterial-design-ripple

[ { "__docId__": 0, "kind": "file", "static": true, "variation": null, "name": "src/index.js", "memberof": null, "longname": "src/index.js", "access": null, "description": null, "lineNumber": 1, "content": "import EventEmitter from 'events';\nimport Promise from 'bluebird';\nimport * as util from './utility';\n\nimport JSON5 from 'json5';\nimport objectAssign from 'object-assign';\n\nexport default class ImdRipple extends EventEmitter {\n /**\n * アニメーションで使用するユーティリティ関数群の参照\n *\n * @static\n * @public\n * @property ImdRipple.util\n */\n static get util() {\n return util;\n }\n\n /**\n * ページの読み込み時にインスタンスを自動で生成する\n *\n * @static\n * @public\n * @method ImdRipple.bindOnLoad\n */\n static bindOnLoad(selector, options = {}) {\n return new Promise((resolve) => {\n window.addEventListener('load', () => {\n const elements = [].slice.call(document.querySelectorAll(selector));\n\n resolve(elements.map((element) => new ImdRipple(element, options)));\n });\n });\n }\n\n /**\n * 指定の要素のクリック時にアニメーションするイベントを追加する\n *\n * @class ImdRipple\n * @constructor\n * @param {Element} element - クリックイベントを監視する要素。アニメ時子要素としてCanvasを追加する\n * @param {Object} [options] - this.playの引数\n */\n constructor(element, options = {}) {\n super();\n\n /**\n * @public\n * @property {HTMLElement} element\n */\n this.element = element;\n\n // 親要素と全く同じ大きさのcanvas要素であることを期待する\n // そのため、position:staticプロパティを使用しない\n const position = window.getComputedStyle(element).getPropertyValue('position');\n if (position === 'static') {\n this.element.style.position = 'relative';\n }\n\n // mouseup／touchendでキャンバスの透明化を開始する\n this.element.addEventListener('mousedown', (event) => {\n if (event.which !== 1) {// only left click\n return;\n }\n\n const { left, top } = this.element.getBoundingClientRect();\n const x = Math.floor(event.clientX - left);\n const y = Math.floor(event.clientY - top);\n\n this.emit('begin');\n this.play(x, y, objectAssign({ exitBefore: 'mouseup' }, options))\n .then(() => {\n this.emit('end');\n });\n });\n\n this.element.addEventListener('touchstart', (event) => {\n const { left, top } = this.element.getBoundingClientRect();\n const x = Math.floor(event.changedTouches[0].clientX - left);\n const y = Math.floor(event.changedTouches[0].clientY - top);\n\n this.emit('begin');\n this.play(x, y, objectAssign({ exitBefore: 'touchend' }, options))\n .then(() => {\n this.emit('end');\n });\n });\n }\n\n /**\n * this.elementに直接定義したオプションを返す\n *\n * @public\n * @method getOptions\n * @param {String} attrName 取得し、json5としてパースする属性名\n * @return {Object} options オプション\n */\n getOptions(attrName = 'imd-options') {\n return JSON5.parse(this.element.getAttribute(attrName) || '{}');\n }\n\n /**\n * コンストラクタの要素内で波形アニメーションを再生する\n *\n * @public\n * @method ImdRipple#play\n * @param {Number} [x=auto] 波形アニメーションの始点x\n * @param {Number} [y=auto] 波形アニメーションの始点y\n * @param {Object} [options] ImdRipple.rippleで使用する引数\n * @param {String|Bool} [options.exitBefore] canvasを破棄するタイミングの指定\n * @return {Promise} ImdRipple.play参照\n */\n play(x, y, options = {}) {\n const opts = objectAssign({\n exitBefore: true, // auto\n }, this.getOptions(), options);\n\n const { width, height } = this.element.getBoundingClientRect();\n const playX = x === undefined ? Math.floor(width / 2) : x;\n const playY = y === undefined ? Math.floor(height / 2) : y;\n\n const animation = ImdRipple.play(playX, playY, width, height, opts);\n\n this.element.appendChild(animation.context.canvas);\n\n let exit;\n if (typeof opts.exitBefore === 'string') {\n exit = util.promiseEvent(window, opts.exitBefore);\n } else if (opts.exitBefore === true) {\n exit = animation;// アニメーション終了時に事後処理\n }\n\n return exit\n .then(() => util.transparentize(animation.context.canvas, opts))\n .then(() => animation.stop());\n }\n\n /**\n * CanvasRenderingContext2Dを作成して波形アニメーションを再生する\n * 全てのピクセルの描写を終えるまでcanvasを更新し続ける\n * キャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する\n * 全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする\n *\n * @static\n * @public\n * @method ImdRipple.play\n * @param {Number} x 波形アニメーションの始点x\n * @param {Number} y 波形アニメーションの始点y\n * @param {Number} width 波形アニメーションの幅\n * @param {Number} height 波形アニメーションの高さ\n * @param {Object} [options]\n * @param {Number} [options.pixelSize=height/15] ピクセル１粒の大きさ\n * @return {Promise<CanvasRenderingContext2D>} animation 独自の２プロパティを持つ\n */\n static play(x, y, width, height, options = {}) {\n const opts = objectAssign({\n pixelSize: Math.floor(height / 10),\n bitCrash: 7,\n pixelated: true,\n }, options);\n\n const context = util.createContext2d(width, height, opts);\n const schedule = util.createRenderSchedule(x, y, width, height, opts);\n const imageData = util.getImageData(context.canvas);\n const [r, g, b, a] = util.getPixelColor(opts.color);\n\n const promise = new Promise((resolve) => {\n let frame = 0;\n const render = () => {\n if (promise.disabled) {\n return resolve(context);\n }\n\n let rendered = true;\n let index = 0;\n for (let i = 0; i < context.canvas.height; i++) {\n for (let j = 0; j < context.canvas.width; j++) {\n const pixelX = Math.floor(j / schedule.pixelSize);\n const pixelY = Math.floor(i / schedule.pixelSize);\n const show = schedule.data[pixelY][pixelX] <= frame;\n if (show === false) {\n rendered = false;\n }\n\n imageData.data[index + 0] = r;\n imageData.data[index + 1] = g;\n imageData.data[index + 2] = b;\n imageData.data[index + 3] = show ? a : 0;\n index += 4;\n }\n }\n context.putImageData(imageData, 0, 0);\n if (rendered) {\n return resolve(context);\n }\n\n frame += 1;\n return util.requestAnimationFrame(render);\n };\n\n util.requestAnimationFrame(render);\n });\n\n // FIXME:\n // Promiseとcontextを同時返したい。\n // （mouseupイベントで透明化を始めたいので）\n promise.context = context;\n promise.stop = function stopAnimation() {\n promise.disabled = true;\n return this;\n };\n\n return promise;\n }\n}\n" }, { "__docId__": 1, "kind": "class", "static": true, "variation": null, "name": "ImdRipple", "memberof": "src/index.js", "longname": "src/index.js~ImdRipple", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/index.js", "importStyle": "ImdRipple", "description": null, "lineNumber": 8, "undocument": true, "interface": false, "extends": [ "events~EventEmitter" ] }, { "__docId__": 2, "kind": "get", "static": true, "variation": null, "name": "util", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple.util", "access": "public", "description": "アニメーションで使用するユーティリティ関数群の参照", "lineNumber": 16, "unknown": [ { "tagName": "@static", "tagValue": "" } ], "properties": [ { "nullable": null, "types": [ "*" ], "spread": false, "optional": false, "name": "ImdRipple.util", "description": "" } ], "type": { "types": [ "*" ] }, "generator": false }, { "__docId__": 3, "kind": "method", "static": true, "variation": null, "name": "bindOnLoad", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple.bindOnLoad", "access": "public", "description": "ページの読み込み時にインスタンスを自動で生成する", "lineNumber": 27, "unknown": [ { "tagName": "@static", "tagValue": "" }, { "tagName": "@method", "tagValue": "ImdRipple.bindOnLoad" } ], "params": [ { "name": "selector", "types": [ "*" ] }, { "name": "options", "optional": true, "types": [ "{}" ], "defaultRaw": {}, "defaultValue": "{}" } ], "return": { "types": [ "*" ] }, "generator": false }, { "__docId__": 4, "kind": "constructor", "static": false, "variation": null, "name": "constructor", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple#constructor", "access": null, "description": "指定の要素のクリック時にアニメーションするイベントを追加する", "lineNumber": 45, "unknown": [ { "tagName": "@class", "tagValue": "ImdRipple" }, { "tagName": "@constructor", "tagValue": "" } ], "params": [ { "nullable": null, "types": [ "Element" ], "spread": false, "optional": false, "name": "element", "description": "クリックイベントを監視する要素。アニメ時子要素としてCanvasを追加する" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "this.playの引数" } ], "generator": false }, { "__docId__": 5, "kind": "member", "static": false, "variation": null, "name": "element", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple#element", "access": "public", "description": "", "lineNumber": 52, "properties": [ { "nullable": null, "types": [ "HTMLElement" ], "spread": false, "optional": false, "name": "element", "description": "" } ], "type": { "types": [ "*" ] } }, { "__docId__": 6, "kind": "method", "static": false, "variation": null, "name": "getOptions", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple#getOptions", "access": "public", "description": "this.elementに直接定義したオプションを返す", "lineNumber": 99, "unknown": [ { "tagName": "@method", "tagValue": "getOptions" } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "attrName", "description": "取得し、json5としてパースする属性名" } ], "return": { "nullable": null, "types": [ "Object" ], "spread": false, "description": "options オプション" }, "generator": false }, { "__docId__": 7, "kind": "method", "static": false, "variation": null, "name": "play", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple#play", "access": "public", "description": "コンストラクタの要素内で波形アニメーションを再生する", "lineNumber": 114, "unknown": [ { "tagName": "@method", "tagValue": "ImdRipple#play" } ], "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "defaultValue": "auto", "defaultRaw": "auto", "name": "x", "description": "波形アニメーションの始点x" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "defaultValue": "auto", "defaultRaw": "auto", "name": "y", "description": "波形アニメーションの始点y" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "ImdRipple.rippleで使用する引数" }, { "nullable": null, "types": [ "String", "Bool" ], "spread": false, "optional": true, "name": "options.exitBefore", "description": "canvasを破棄するタイミングの指定" } ], "return": { "nullable": null, "types": [ "Promise" ], "spread": false, "description": "ImdRipple.play参照" }, "generator": false }, { "__docId__": 8, "kind": "method", "static": true, "variation": null, "name": "play", "memberof": "src/index.js~ImdRipple", "longname": "src/index.js~ImdRipple.play", "access": "public", "description": "CanvasRenderingContext2Dを作成して波形アニメーションを再生する\n全てのピクセルの描写を終えるまでcanvasを更新し続ける\nキャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する\n全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする", "lineNumber": 156, "unknown": [ { "tagName": "@static", "tagValue": "" }, { "tagName": "@method", "tagValue": "ImdRipple.play" } ], "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "x", "description": "波形アニメーションの始点x" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "y", "description": "波形アニメーションの始点y" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "width", "description": "波形アニメーションの幅" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "height", "description": "波形アニメーションの高さ" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "defaultValue": "height/15", "defaultRaw": "height/15", "name": "options.pixelSize", "description": "ピクセル１粒の大きさ" } ], "return": { "nullable": null, "types": [ "Promise<CanvasRenderingContext2D>" ], "spread": false, "description": "animation 独自の２プロパティを持つ" }, "generator": false }, { "__docId__": 9, "kind": "file", "static": true, "variation": null, "name": "src/utility.js", "memberof": null, "longname": "src/utility.js", "access": null, "description": null, "lineNumber": 1, "content": "import Promise from 'bluebird';\nimport easingJs from 'easing-js';\nimport objectAssign from 'object-assign';\n\n/**\n* 利用可能な非同期関数でcallbackを実行する\n*\n* @function requestAnimationFrame\n* @param {Function} [callback]\n* @return undefined\n*/\nexport function requestAnimationFrame(callback) {\n return window.requestAnimationFrame(callback);\n}\n\n/**\n* 指定した要素のイベントを待つプロミスを返す\n*\n* @function promiseEvent\n* @param {Element} target イベントを取得する要素\n* @param {String} eventName 取得するイベント名\n* @return {Promise<EventTarget>} deferredEvent 取得したイベント\n*/\nexport function promiseEvent(target, eventName) {\n return new Promise((resolve) => {\n const onceListener = (event) => {\n target.removeEventListener(eventName, onceListener);\n\n resolve(event);\n };\n target.addEventListener(eventName, onceListener);\n });\n}\n\n/**\n* 指定した大きさのcontext2dを返す\n*\n* @function createContext2d\n* @param {Number} width contextの幅\n* @param {Number} height contextの高さ\n* @param {Object} [options]\n* @param {Object} [options.pixelated=true] アンチエイリアスを切る\n* @return {CanvasRenderingContext2D}\n*/\nexport function createContext2d(width, height, options = {}) {\n const canvas = document.createElement('canvas');\n canvas.width = width;\n canvas.height = height;\n\n canvas.style.position = 'absolute';\n canvas.style.top = 0;\n canvas.style.right = 0;\n canvas.style.bottom = 0;\n canvas.style.left = 0;\n\n const context = canvas.getContext('2d');\n if (options.pixelated) {\n context.mozImageSmoothingEnabled = false;\n context.msImageSmoothingEnabled = false;\n context.imageSmoothingEnabled = false;\n }\n\n return context;\n}\n\n/**\n* contextと同じ大きさの空のimageDataを返す\n*\n* @function getImageData\n* @param {HTMLCanvasElement} canvas 大きさの基準となるcanvas\n* @return {ImageData}\n*/\nexport function getImageData(canvas) {\n const { width, height } = canvas;\n\n const newContext = document.createElement('canvas').getContext('2d');\n newContext.canvas.width = width;\n newContext.canvas.height = height;\n return newContext.getImageData(0, 0, width, height);\n}\n\n\n/**\n* canvasを透明化、opacity:0でcanvasを破棄\n*\n* @function transparentize\n* @param {Element} element 透明化させ、破棄する要素\n* @param {Object} [options]\n* @param {Number} [options.opacityStep=0.02] 1フレームの透明化進行度\n* @return {Promise<null>} animation 要素破棄時にfullfill\n*/\nexport function transparentize(element, options = {}) {\n const elementStyle = element.style;\n const opts = objectAssign({\n opacityStep: 0.02,\n }, options);\n\n return new Promise((resolve) => {\n let opacity = 1;\n const render = () => {\n opacity -= opts.opacityStep;\n if (opacity <= 0) {\n elementStyle.opacity = 0;\n return resolve();\n }\n\n elementStyle.opacity = opacity;\n\n return requestAnimationFrame(render);\n };\n requestAnimationFrame(render);\n }).then(() => {\n if (element.parentNode) {\n element.parentNode.removeChild(element);\n }\n });\n}\n\n/**\n* easingJsで定義された関数名であれば、その関数を返し\n* 引数が関数であれば、そのまま返す\n* それ以外はnull\n*\n* @function getTimingFunction\n* @param {String|Function} name EasingJsの関数名か、独自で関数を定義\n* @return {Function|null} timingFunction (t,b,c,d)を受け取るイージング関数。未定義の関数名ならnull\n*/\nexport function getTimingFunction(name = 'easeInBack') {\n if (typeof name === 'function') {\n return name;\n }\n if (easingJs[name]) {\n return easingJs[name];\n }\n\n return null;\n}\n\n/**\n* 指定した大きさのimageDataを作成し\n* 波形アニメーションとして表示するフレーム番号を計算する\n* x,yを始点とする\n*\n* 返される配列の値は大きさからpixelSizeを割ったもの。\n*\n* @function createRenderSchedule\n* @param {Number} x 波形アニメーションの始点x\n* @param {Number} y 波形アニメーションの始点y\n* @param {Number} width 波形アニメーションの幅\n* @param {Number} height 波形アニメーションの高さ\n* @param {Object} [options]\n* @param {Number} [options.pixelSize] ピクセル１粒の大きさ\n* @param {Number} [options.bitCrash=null] 境界にノイズを入れる、値はノイズの強さ\n* @param {String|Function} [options.timingFunction='easeInQuint'] フレーム番号のイージング関数名\n* @return {Object} RenderSchedule\n* @return {Array} RenderSchedule.data yとxからなる二次元配列。表示するフレーム番号を値に持つ\n* @return {Number} RenderSchedule.width ピクセルの横の個数\n* @return {Number} RenderSchedule.height ピクセルの縦の個数\n* @return {Number} RenderSchedule.pixelSize ピクセル１粒の大きさ\n* @return {Function|null} RenderSchedule.easedBy フレーム番号の調整に使用した関数\n*/\nexport function createRenderSchedule(x, y, width, height, options = {}) {\n const opts = Object.create(options);\n if (opts.pixelSize === undefined) {\n opts.pixelSize = 1;\n }\n\n const dataWidth = Math.ceil(width / opts.pixelSize);\n const dataHeight = Math.ceil(height / opts.pixelSize);\n const data = [];\n\n // ピクセルごとの表示を開始するフレーム番号を定義する\n let c = 0;// maxFrame\n for (let i = 0; i < dataHeight; i++) {\n if (data[i] === undefined) {\n data[i] = [];\n }\n for (let j = 0; j < dataWidth; j++) {\n const originalX = opts.pixelSize * j;\n const originalY = opts.pixelSize * i;\n\n // x, yからの距離をピクセル基準で求める\n const distanceX = Math.abs(originalX - x);\n const distanceY = Math.abs(originalY - y);\n const distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));\n const showFrame = Math.floor(distance / opts.pixelSize);\n if (c < showFrame) {\n c = showFrame;\n }\n\n data[i].push(showFrame);\n }\n }\n\n // アニメーションの緩急を変更する\n // http://d.hatena.ne.jp/nakamura001/20111117/1321539246\n const timingFunction = getTimingFunction(opts.timingFunction);\n if (timingFunction) {\n const d = 1;\n for (let i = 0; i < data.length; i++) {\n for (let j = 0; j < data[i].length; j++) {\n const b = data[i][j];// showFrame\n const t = c > 0 ? (b / c) : 0;// distanceRate\n data[i][j] = Math.floor(timingFunction(t, b, c, d));\n\n // ５フレーム以降は境界部分のジャギーを目立たせる（ささくれさせる）\n if (opts.bitCrash > 1 && b > 5) {\n data[i][j] += Math.floor(opts.bitCrash * Math.random());\n }\n }\n }\n }\n\n return {\n data,\n width: dataWidth,\n height: dataHeight,\n pixelSize: opts.pixelSize,\n easedBy: timingFunction,\n };\n}\n\n/**\n* 指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）\n*\n* @function getPixelColor\n* @param {String} colorName CanvasRenderingContext2D.fillStyleの値\n* @return {Array} color [r,g,b,a]\n*/\nexport function getPixelColor(colorName = 'rgba(0,0,0,.3)') {\n const context = document.createElement('canvas').getContext('2d');\n context.canvas.width = 1;\n context.canvas.width = 1;\n context.fillStyle = colorName;\n context.fillRect(0, 0, 1, 1);\n\n // splat構文を使用するとエラーになるので、配列に変換する\n // const [r,g,b,a] = document.createElement('canvas').getContext('2d').getImagedata(...).data\n // => TypeError: Invalid attempt to destructure non-iterable instance\n return [].slice.call(context.getImageData(0, 0, 1, 1).data);\n}\n" }, { "__docId__": 10, "kind": "function", "static": true, "variation": null, "name": "requestAnimationFrame", "memberof": "src/utility.js", "longname": "src/utility.js~requestAnimationFrame", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{requestAnimationFrame}", "description": "利用可能な非同期関数でcallbackを実行する", "lineNumber": 12, "unknown": [ { "tagName": "@function", "tagValue": "requestAnimationFrame" } ], "params": [ { "nullable": null, "types": [ "Function" ], "spread": false, "optional": true, "name": "callback", "description": "" } ], "return": { "nullable": null, "types": [ "*" ], "spread": false, "description": "undefined" }, "generator": false }, { "__docId__": 11, "kind": "function", "static": true, "variation": null, "name": "promiseEvent", "memberof": "src/utility.js", "longname": "src/utility.js~promiseEvent", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{promiseEvent}", "description": "指定した要素のイベントを待つプロミスを返す", "lineNumber": 24, "unknown": [ { "tagName": "@function", "tagValue": "promiseEvent" } ], "params": [ { "nullable": null, "types": [ "Element" ], "spread": false, "optional": false, "name": "target", "description": "イベントを取得する要素" }, { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "eventName", "description": "取得するイベント名" } ], "return": { "nullable": null, "types": [ "Promise<EventTarget>" ], "spread": false, "description": "deferredEvent 取得したイベント" }, "generator": false }, { "__docId__": 12, "kind": "function", "static": true, "variation": null, "name": "createContext2d", "memberof": "src/utility.js", "longname": "src/utility.js~createContext2d", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{createContext2d}", "description": "指定した大きさのcontext2dを返す", "lineNumber": 45, "unknown": [ { "tagName": "@function", "tagValue": "createContext2d" } ], "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "width", "description": "contextの幅" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "height", "description": "contextの高さ" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "defaultValue": "true", "defaultRaw": true, "name": "options.pixelated", "description": "アンチエイリアスを切る" } ], "return": { "nullable": null, "types": [ "CanvasRenderingContext2D" ], "spread": false, "description": "" }, "generator": false }, { "__docId__": 13, "kind": "function", "static": true, "variation": null, "name": "getImageData", "memberof": "src/utility.js", "longname": "src/utility.js~getImageData", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{getImageData}", "description": "contextと同じ大きさの空のimageDataを返す", "lineNumber": 73, "unknown": [ { "tagName": "@function", "tagValue": "getImageData" } ], "params": [ { "nullable": null, "types": [ "HTMLCanvasElement" ], "spread": false, "optional": false, "name": "canvas", "description": "大きさの基準となるcanvas" } ], "return": { "nullable": null, "types": [ "ImageData" ], "spread": false, "description": "" }, "generator": false }, { "__docId__": 14, "kind": "function", "static": true, "variation": null, "name": "transparentize", "memberof": "src/utility.js", "longname": "src/utility.js~transparentize", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{transparentize}", "description": "canvasを透明化、opacity:0でcanvasを破棄", "lineNumber": 92, "unknown": [ { "tagName": "@function", "tagValue": "transparentize" } ], "params": [ { "nullable": null, "types": [ "Element" ], "spread": false, "optional": false, "name": "element", "description": "透明化させ、破棄する要素" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "defaultValue": "0.02", "defaultRaw": 0.02, "name": "options.opacityStep", "description": "1フレームの透明化進行度" } ], "return": { "nullable": null, "types": [ "Promise<null>" ], "spread": false, "description": "animation 要素破棄時にfullfill" }, "generator": false }, { "__docId__": 15, "kind": "function", "static": true, "variation": null, "name": "getTimingFunction", "memberof": "src/utility.js", "longname": "src/utility.js~getTimingFunction", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{getTimingFunction}", "description": "easingJsで定義された関数名であれば、その関数を返し\n引数が関数であれば、そのまま返す\nそれ以外はnull", "lineNumber": 128, "unknown": [ { "tagName": "@function", "tagValue": "getTimingFunction" } ], "params": [ { "nullable": null, "types": [ "String", "Function" ], "spread": false, "optional": false, "name": "name", "description": "EasingJsの関数名か、独自で関数を定義" } ], "return": { "nullable": null, "types": [ "Function", "null" ], "spread": false, "description": "timingFunction (t,b,c,d)を受け取るイージング関数。未定義の関数名ならnull" }, "generator": false }, { "__docId__": 16, "kind": "function", "static": true, "variation": null, "name": "createRenderSchedule", "memberof": "src/utility.js", "longname": "src/utility.js~createRenderSchedule", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{createRenderSchedule}", "description": "指定した大きさのimageDataを作成し\n波形アニメーションとして表示するフレーム番号を計算する\nx,yを始点とする\n\n返される配列の値は大きさからpixelSizeを割ったもの。", "lineNumber": 162, "unknown": [ { "tagName": "@function", "tagValue": "createRenderSchedule" } ], "params": [ { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "x", "description": "波形アニメーションの始点x" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "y", "description": "波形アニメーションの始点y" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "width", "description": "波形アニメーションの幅" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": false, "name": "height", "description": "波形アニメーションの高さ" }, { "nullable": null, "types": [ "Object" ], "spread": false, "optional": true, "name": "options", "description": "" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "name": "options.pixelSize", "description": "ピクセル１粒の大きさ" }, { "nullable": null, "types": [ "Number" ], "spread": false, "optional": true, "defaultValue": "null", "defaultRaw": null, "name": "options.bitCrash", "description": "境界にノイズを入れる、値はノイズの強さ" }, { "nullable": null, "types": [ "String", "Function" ], "spread": false, "optional": true, "defaultValue": "'easeInQuint'", "defaultRaw": "'easeInQuint'", "name": "options.timingFunction", "description": "フレーム番号のイージング関数名" } ], "return": { "nullable": null, "types": [ "Function", "null" ], "spread": false, "description": "RenderSchedule.easedBy フレーム番号の調整に使用した関数" }, "generator": false }, { "__docId__": 17, "kind": "function", "static": true, "variation": null, "name": "getPixelColor", "memberof": "src/utility.js", "longname": "src/utility.js~getPixelColor", "access": null, "export": true, "importPath": "immaterial-design-ripple/src/utility.js", "importStyle": "{getPixelColor}", "description": "指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）", "lineNumber": 230, "unknown": [ { "tagName": "@function", "tagValue": "getPixelColor" } ], "params": [ { "nullable": null, "types": [ "String" ], "spread": false, "optional": false, "name": "colorName", "description": "CanvasRenderingContext2D.fillStyleの値" } ], "return": { "nullable": null, "types": [ "Array" ], "spread": false, "description": "color [r,g,b,a]" }, "generator": false }, { "__docId__": 19, "kind": "external", "static": true, "variation": null, "name": "Infinity", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Infinity", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 20, "kind": "external", "static": true, "variation": null, "name": "NaN", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~NaN", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 21, "kind": "external", "static": true, "variation": null, "name": "undefined", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~undefined", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 22, "kind": "external", "static": true, "variation": null, "name": "null", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~null", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 23, "kind": "external", "static": true, "variation": null, "name": "Object", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Object", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 24, "kind": "external", "static": true, "variation": null, "name": "object", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~object", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 25, "kind": "external", "static": true, "variation": null, "name": "Function", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Function", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 26, "kind": "external", "static": true, "variation": null, "name": "function", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~function", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 27, "kind": "external", "static": true, "variation": null, "name": "Boolean", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Boolean", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 28, "kind": "external", "static": true, "variation": null, "name": "boolean", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~boolean", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 29, "kind": "external", "static": true, "variation": null, "name": "Symbol", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Symbol", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 30, "kind": "external", "static": true, "variation": null, "name": "Error", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Error", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 31, "kind": "external", "static": true, "variation": null, "name": "EvalError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/EvalError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~EvalError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 32, "kind": "external", "static": true, "variation": null, "name": "InternalError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/InternalError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~InternalError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 33, "kind": "external", "static": true, "variation": null, "name": "RangeError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~RangeError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 34, "kind": "external", "static": true, "variation": null, "name": "ReferenceError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~ReferenceError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 35, "kind": "external", "static": true, "variation": null, "name": "SyntaxError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~SyntaxError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 36, "kind": "external", "static": true, "variation": null, "name": "TypeError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypeError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~TypeError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 37, "kind": "external", "static": true, "variation": null, "name": "URIError", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/URIError", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~URIError", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 38, "kind": "external", "static": true, "variation": null, "name": "Number", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Number", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 39, "kind": "external", "static": true, "variation": null, "name": "number", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~number", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 40, "kind": "external", "static": true, "variation": null, "name": "Date", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Date", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 41, "kind": "external", "static": true, "variation": null, "name": "String", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~String", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 42, "kind": "external", "static": true, "variation": null, "name": "string", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~string", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 43, "kind": "external", "static": true, "variation": null, "name": "RegExp", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~RegExp", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 44, "kind": "external", "static": true, "variation": null, "name": "Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 45, "kind": "external", "static": true, "variation": null, "name": "Int8Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int8Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Int8Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 46, "kind": "external", "static": true, "variation": null, "name": "Uint8Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Uint8Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 47, "kind": "external", "static": true, "variation": null, "name": "Uint8ClampedArray", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Uint8ClampedArray", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 48, "kind": "external", "static": true, "variation": null, "name": "Int16Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int16Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Int16Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 49, "kind": "external", "static": true, "variation": null, "name": "Uint16Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Uint16Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 50, "kind": "external", "static": true, "variation": null, "name": "Int32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Int32Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 51, "kind": "external", "static": true, "variation": null, "name": "Uint32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Uint32Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 52, "kind": "external", "static": true, "variation": null, "name": "Float32Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Float32Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 53, "kind": "external", "static": true, "variation": null, "name": "Float64Array", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Float64Array", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 54, "kind": "external", "static": true, "variation": null, "name": "Map", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Map", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 55, "kind": "external", "static": true, "variation": null, "name": "Set", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~Set", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 56, "kind": "external", "static": true, "variation": null, "name": "WeakMap", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~WeakMap", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 57, "kind": "external", "static": true, "variation": null, "name": "WeakSet", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~WeakSet", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 58, "kind": "external", "static": true, "variation": null, "name": "ArrayBuffer", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~ArrayBuffer", "access": null, "description": "", "builtinExternal": true }, { "__docId__": 59, "kind": "external", "static": true, "variation": null, "name": "DataView", "externalLink": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DataView", "memberof": "BuiltinExternal/ECMAScriptExternal.js", "longname": "BuiltinExternal/ECMAScriptExternal.js~DataView", "ac