[anim]:アニメーション再生

カテゴリ:アニメーション操作

指定した画像、その他要素をアニメーションさせます。
nameパラメータが指定できる要素はすべて対象とできます。

パラメータ

  • name:表示する画像のクラス名を指定。
    初期値:""
  • layer:対象とするレイヤーを指定。"name"パラメータが指定されている場合は無視されます。"base"指定で背景レイヤ、"0"以上の数値指定で前景レイヤの指定となります。
    初期値:""
  • left:指定した横位置に移動させます。(単位:ピクセル)
    初期値:""
  • top:指定した縦位置に移動させます。(単位:ピクセル)
    初期値:""
  • width:変化させる幅を数値で指定します。(単位:ピクセル)
    初期値:""
  • height:変化させる高さを数値で指定します。(単位:ピクセル)
    初期値:""
  • top:画像の上端位置を指定(単位:ピクセル)
    初期値:""
  • opacity:変化させる透明度を0~255の数値で指定します。0で透明、255で不透明です。
    初期値:""
  • y:画像の上端位置を指定(単位:ピクセル)。縦位置指定系パラメータでは最も優先されます。
    初期値:""
  • width:画像の幅を指定(単位:ピクセル)
    初期値:""
  • height:画像の高さを指定(単位:ピクセル)
    初期値:""
  • color:対象要素が文字だった場合、変化させる文字色を指定します。CSS準拠の形式が指定可能です。
    初期値:""
  • time:アニメーションにかける時間を数値で指定。(単位:ミリ秒)
    初期値:"2000"
  • effect:アニメーション時の数値の遷移方法を文字列で指定します。
    初期値:""

使い方

[image name="anime" storage="image.png"]
;画像を2秒かけて左500ピクセル、上500ピクセルの位置に移動
[anim name="anime" time=2000 x=500 y=500]
nameパラメータが指定できる要素ならなんでもアニメーションさせられます。
ただし、変化させられるのは横位置、縦位置、文字色、幅、高さ、透明度のみなので、これ以外の属性を変化させたい場合は自分でCSSなりJSなりを書く必要があります。
effectパラメータで指定できるのは以下の値です。
実際にどんな動きをするかは、ここを見るといいです。
  • jswing
  • def
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
  • easeInElastic
  • easeOutElastic
  • easeInOutElastic
  • easeInBack
  • easeOutBack
  • easeInOutBack
  • easeInBounce
  • easeOutBounce
  • easeInOutBounce

タグ一覧最初から表示

このブログを検索

連絡先

名前

メール *

メッセージ *

QooQ