Home Reference Source Repository 
import ImdRipple from 'immaterial-design-ripple/src/index.js'
public class | source

ImdRipple

Extends:

events~EventEmitter → ImdRipple

Static Member Summary

Static Public Members
public static get

util: *

アニメーションで使用するユーティリティ関数群の参照

Static Method Summary

Static Public Methods
public static

bindOnLoad(selector: *, options: {}): *

ページの読み込み時にインスタンスを自動で生成する
public static

play(x: Number, y: Number, width: Number, height: Number, options: Object): Promise<CanvasRenderingContext2D>

CanvasRenderingContext2Dを作成して波形アニメーションを再生する 全てのピクセルの描写を終えるまでcanvasを更新し続ける キャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する 全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする

Constructor Summary

Public Constructor
public

constructor(element: Element, options: Object)

指定の要素のクリック時にアニメーションするイベントを追加する

Member Summary

Public Members
public

element: *

Method Summary

Public Methods
public

getOptions(attrName: String): Object

this.elementに直接定義したオプションを返す
public

play(x: Number, y: Number, options: Object): Promise

コンストラクタの要素内で波形アニメーションを再生する

Static Public Members

public static get util: * source

アニメーションで使用するユーティリティ関数群の参照

Properties:

NameTypeAttributeDescription
ImdRipple.util *

Static Public Methods

public static bindOnLoad(selector: *, options: {}): * source

ページの読み込み時にインスタンスを自動で生成する

Params:

NameTypeAttributeDescription
selector *
options {}
  • optional
  • default: {}

Return:

*

public static play(x: Number, y: Number, width: Number, height: Number, options: Object): Promise<CanvasRenderingContext2D> source

CanvasRenderingContext2Dを作成して波形アニメーションを再生する 全てのピクセルの描写を終えるまでcanvasを更新し続ける キャンバスが大きいほど負荷が高いので、更新の必要がなければ停止する 全てのピクセルが描写した時か、promise.stopを実行した時に、fulfillする

Params:

NameTypeAttributeDescription
x Number

波形アニメーションの始点x
y Number

波形アニメーションの始点y
width Number

波形アニメーションの幅
height Number

波形アニメーションの高さ
options Object
  • optional
options.pixelSize Number
  • optional
  • default: height/15

ピクセル１粒の大きさ

Return:

Promise<CanvasRenderingContext2D>

animation 独自の２プロパティを持つ

Public Constructors

public constructor(element: Element, options: Object) source

指定の要素のクリック時にアニメーションするイベントを追加する

Params:

NameTypeAttributeDescription
element Element

クリックイベントを監視する要素。アニメ時子要素としてCanvasを追加する
options Object
  • optional

this.playの引数

Public Members

public element: * source

Properties:

NameTypeAttributeDescription
element HTMLElement

Public Methods

public getOptions(attrName: String): Object source

this.elementに直接定義したオプションを返す

Params:

NameTypeAttributeDescription
attrName String

取得し、json5としてパースする属性名

Return:

Object

options オプション

public play(x: Number, y: Number, options: Object): Promise source

コンストラクタの要素内で波形アニメーションを再生する

Params:

NameTypeAttributeDescription
x Number
  • optional
  • default: auto

波形アニメーションの始点x
y Number
  • optional
  • default: auto

波形アニメーションの始点y
options Object
  • optional

ImdRipple.rippleで使用する引数
options.exitBefore String | Bool
  • optional

canvasを破棄するタイミングの指定

Return:

Promise

ImdRipple.play参照