tomo.mobi

Representation design of material


transform:matrix3d()

ここにきてやっと気がついたけれども、<path/>の移動に、transform:matrix3d()は一部のスマホブラウザでは対応していない。3D対応で使っている記述がありました。ライブラリをもうちょっとよく読んで調べてみる必要があります。

PCに限らせるのだったら、古いバージョンにはSMILで対応するようなので、とても使いやすい優れたライブラリだと思いました(未検証)。ライブラリのカスタマイズも考えてみたいけれども、メンテナンスしにくくなる。でも、アニメーションにはTweenのライブラリは使いたい。

他にもいろいろと見てみよう。
http://snapsvg.io/
https://github.com/julianshapiro/velocity
(http://julian.com/research/velocity/#transforms)
http://d3js.org/
そもそも、スマホで実装するのはまだ早いのかどうか。
多少の重さは感じるけど、とりあえず、何か作ってみる。

以下ももうちょっと見てみよう。
https://w3c.github.io/web-animations/
https://drafts.fxtf.org/motion-1/

で、以下サンプルは前回transform:matrix3d()を使ってDOMの追加とstyleの設定を検証したデータでライブラリは使っていないです。アニメーションを実装する前準備で調べた事を使ったサンプルです。
http://tomo.mobi/test/greensock/star_position2D.html
とりあえず、transform:matrix3d()をtransform:translate()に置き換えた。
webkitのベンダープレフィックスも付けた。
scale()とrotate()の設定もいれて、やっと、matrix3d()と同じ表現になったけどstyleの設定が長くなってしまった。使うCSSを選別すればとりあえず実装には問題は無い。