Function

Static Public Summary
public	createContext2d(width: Number, height: Number, options: Object): CanvasRenderingContext2D 指定した大きさのcontext2dを返す
public	createRenderSchedule(x: Number, y: Number, width: Number, height: Number, options: Object): Function \| null 指定した大きさのimageDataを作成し波形アニメーションとして表示するフレーム番号を計算する x,yを始点とする
public	getImageData(canvas: HTMLCanvasElement): ImageData contextと同じ大きさの空のimageDataを返す
public	getPixelColor(colorName: String): Array 指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）
public	getTimingFunction(name: String \| Function): Function \| null easingJsで定義された関数名であれば、その関数を返し引数が関数であれば、そのまま返すそれ以外はnull
public	promiseEvent(target: Element, eventName: String): Promise<EventTarget> 指定した要素のイベントを待つプロミスを返す
public	requestAnimationFrame(callback: Function): * 利用可能な非同期関数でcallbackを実行する
public	transparentize(element: Element, options: Object): Promise<null> canvasを透明化、opacity:0でcanvasを破棄

Static Public

public createContext2d(width: Number, height: Number, options: Object): CanvasRenderingContext2D source

import {createContext2d} from 'immaterial-design-ripple/src/utility.js'

指定した大きさのcontext2dを返す

Params:

Name	Type	Attribute	Description
width	Number		contextの幅
height	Number		contextの高さ
options	Object	optional
options.pixelated	Object	optional default: true	アンチエイリアスを切る

Return:

CanvasRenderingContext2D

public createRenderSchedule(x: Number, y: Number, width: Number, height: Number, options: Object): Function | null source

import {createRenderSchedule} from 'immaterial-design-ripple/src/utility.js'

指定した大きさのimageDataを作成し波形アニメーションとして表示するフレーム番号を計算する x,yを始点とする

返される配列の値は大きさからpixelSizeを割ったもの。

Params:

Name	Type	Attribute	Description
x	Number		波形アニメーションの始点x
y	Number		波形アニメーションの始点y
width	Number		波形アニメーションの幅
height	Number		波形アニメーションの高さ
options	Object	optional
options.pixelSize	Number	optional	ピクセル１粒の大きさ
options.bitCrash	Number	optional default: null	境界にノイズを入れる、値はノイズの強さ
options.timingFunction	String \| Function	optional default: 'easeInQuint'	フレーム番号のイージング関数名

Return:

Function | null

RenderSchedule.easedBy フレーム番号の調整に使用した関数

public getImageData(canvas: HTMLCanvasElement): ImageData source

import {getImageData} from 'immaterial-design-ripple/src/utility.js'

contextと同じ大きさの空のimageDataを返す

Params:

Name	Type	Attribute	Description
canvas	HTMLCanvasElement		大きさの基準となるcanvas

Return:

ImageData

public getPixelColor(colorName: String): Array source

import {getPixelColor} from 'immaterial-design-ripple/src/utility.js'

指定したcolorNameのrgbaを返す（CanvasRenderingContext2D経由）

Params:

Name	Type	Attribute	Description
colorName	String		CanvasRenderingContext2D.fillStyleの値

Return:

Array

color [r,g,b,a]

public getTimingFunction(name: String | Function): Function | null source

import {getTimingFunction} from 'immaterial-design-ripple/src/utility.js'

easingJsで定義された関数名であれば、その関数を返し引数が関数であれば、そのまま返すそれ以外はnull

Params:

Name	Type	Attribute	Description
name	String \| Function		EasingJsの関数名か、独自で関数を定義

Return:

Function | null

timingFunction (t,b,c,d)を受け取るイージング関数。未定義の関数名ならnull

public promiseEvent(target: Element, eventName: String): Promise<EventTarget> source

import {promiseEvent} from 'immaterial-design-ripple/src/utility.js'

指定した要素のイベントを待つプロミスを返す

Params:

Name	Type	Attribute	Description
target	Element		イベントを取得する要素
eventName	String		取得するイベント名

Return:

Promise<EventTarget>

deferredEvent 取得したイベント

public requestAnimationFrame(callback: Function): * source

import {requestAnimationFrame} from 'immaterial-design-ripple/src/utility.js'

利用可能な非同期関数でcallbackを実行する

Params:

Name	Type	Attribute	Description
callback	Function	optional

Return:

undefined

public transparentize(element: Element, options: Object): Promise<null> source

import {transparentize} from 'immaterial-design-ripple/src/utility.js'

canvasを透明化、opacity:0でcanvasを破棄

Params:

Name	Type	Attribute	Description
element	Element		透明化させ、破棄する要素
options	Object	optional
options.opacityStep	Number	optional default: 0.02	1フレームの透明化進行度

Return:

Promise<null>

animation 要素破棄時にfullfill