Yahoo!UIの基礎まとめ
モーション
定義された経路に従ってDOM要素を動かすための「YAHOO.util.Motion(モーション)」についての簡単な解説を行います。YUIモーションで要素を移動する
オレンジの四角をクリックしてください、backBothで移動します
(少し戻って開始、少し超えて戻り終了)
YUIモーションto,by
- DOM要素の位置を移動させるYAHOO.util.Motionクラスを使い、Animクラスの時と同様に、絶対指定toと相対指定byを試してみます。
移動します
YUIモーションopacity,Easing...
- YAHOO.util.MotionはYAHOO.util.Animの機能を継承しており、それらの機能を組み合わせることで、いろいろな動作やエフェクトを、手軽に実現することが可能です。
0.3までフェイドアウトします
YUIモーションで曲線移動 control
- YAHOO.util.Motionクラスに実装されている、曲線移動のための機能を試してみます。ベジェ曲線計算のための制御点を指定できる「control」を使います。
クリックしてください
YUIで曲線移動(複数制御点)
- YAHOO.util.Motionクラスに実装されている、曲線移動を利用し、複数の制御点を指定して少し複雑な曲線を描いてみます。
クリックしてください