WEBサイトはCSSで何でもできると言っていた、ユゲタです。
もちろん、複雑なプログラミングなど、CSSではできませんが、これまでJavascriptでやっていたアニメーションや、変数プロパティなどを駆使すれば、かなり柔軟な構造体を持つことができるので、非常に強力なスクリプト言語だと思っています。
それはとある複数の画像を組み合わせて、１つのオブジェクトとして、アニメーションをさせるという処理を、作っていた時の事です。
※詳しい内容は、Poscastラジオで配信する予定です。
最初はHTMLでIMGタグを階層化して表示して、CSSで移動や回転やスケールアニメをつけてやれば、ちょっと複雑にはなりますが、まとまったアニメーションが作れて、それを複数keyを分けてコントロールすると、
イベントに応じたアクションとしてのアニメーションが表示されるようになるので、サーバーサイドやクソ重いライブラリなどを用いなくても、必要最低限の軽いwebページが表示できると考えていました。
不規則Deformation
アニメーションが、移動、回転、拡縮、だけではなく、任意のパーツのみ、部分的に膨らんだり縮んだりする効果があるという事を知ったのは最初のサンプルを作った後でした。
分かりやすく説明すると、この気球を上の部分だけ膨らませて大きくしたい場合、部分的に大きくしたいと言う要望でした。
このように、画像をポインティングして、
ポイントに応じて画像自体を拡縮させたいというのが今回やりたい内容だったんですが、webコーダーの人ならこれはできないと言う事に気がつくはずです。
もちろん、Photoshopなど画像編集ツールを使えば、いとも簡単にできてしまうんですが、cssってこういう細かい操作ってできないんですよね。
matrix?
transformにmatrixというのがあり、画像の移動、回転、拡縮を一気にコントロールでき、さらに３次元的な処理を行うことができる機能がるというのを見つけて、
これまで複雑そうなので、使ったことはなかったんですが、もしかしたら、これをゴリゴリに計算して値を求めるとできるようになるのか？
でも、画像の一部だけをやろうとすると、部分的にクリッピングして、ポリゴン構造のような構造体にする必要があります。
そして、それぞれのポリゴンの頂点移動と、そのポイントに隣接するポリゴン形状を計算で変形してあげないといけないという、なんとも地獄のようなプログラミングを書かないといけなくなりそうです。
色々と調べてみた
cssにこだわりたいという事もあったんですが、svgやcanvasを利用して画像を変形させる方法もあるかな？と思ったんですが、ピンポイントな機能は当たり前ですが、ありませんでした。
やはりどの方式を使っても、ゴリゴリプログラミングは必要になりそうです。
さて、今回はこうして行き詰まってしまったんですが、なんとか解決したいと思っているので、無事にクリアすることができたら、「解決編」をブログで書きたいと思いますので、お楽しみに！！！
0 件のコメント:
コメントを投稿