Hatena::ブログ(Diary)

プラグインレスでSVGを表示する「SIE」開発ブログ RSSフィード Twitter

JavaScriptで書かれたオープンソースのSVGレンダリングエンジン「SIE (シー)」開発記

2016-08-24

SIEでサポートしたSMILアニメーションについて

実装したSMILアニメーションの要素と属性

SIE 29では、SMILアニメーションをいくつか実装しています。その要素と属性を、ここに挙げて、今後の課題を見つけていくことにします

実装したアニメーション要素
  1. animate 要素
  2. set 要素
  3. animateMotion 要素
  4. animateTransform 要素
実装したアニメショーン属性
  1. accumlate 属性
  2. additive 属性
  3. attributeName 属性
  4. attributeType 属性
  5. begin 属性
  6. by 属性
  7. calcMode 属性
  8. dur 属性
  9. end 属性
  10. from 属性
  11. keyPoints 属性
  12. keySplines 属性
  13. keyTimes 属性
  14. max 属性
  15. min 属性
  16. path 属性
  17. repeatCount 属性
  18. repeatDur 属性
  19. restart 属性
  20. roate 属性
  21. to 属性
  22. type 属性
  23. values 属性
  24. xlink:href 属性

合わせて、SIEは4つの要素と、24の属性をサポートしています。

今後の課題

しかし、begin属性とend属性については、リストをサポートしていないなど、不十分な実装が見られます。

今後は、その点を修正していきます

2016-08-11

SIE 29の公開について

モーションパスの向き制御をサポートしたSIE 29

本日、SIE 29を公開しました。今回のバージョンから、MITライセンスに移行しています。大きな変更点は、モーションパスの向きを制御できるanimateMotion要素のrotate属性を実装したことです。ダウンロードは以下からできます

ダウンロード

sie29.zipをダウンロードしてください。ZIP形式なのでダウンロードしたファイルを解凍すると、sie.jsを手に入れることができます

今後の予定

ほぼ、SMILアニメーションの要素と属性を実装できましたので、どの要素と属性が使えるのかを、この開発日誌で公開します

2016-08-02

SIE 29 beta の公開

ベータ版のSIE 29 beta

本日、ベータ版としてSIE 29 betaを公開しました。MITライセンスに移行するなど、変更があります

ダウンロード

sie29.zip (ZIP形式, 342.7KB)をダウンロードして、解凍すれば、sie.jsを手に入れることができます

今後の予定

今回からEdgeもテストの対象とすることにしました。IE11とEdgeでのテストをしたうえで、正規版をリリースします

2016-07-26

animateMotion要素のrotate属性をサポート

rotate属性の実装

今、animateMotion要素のrotate属性を実装しました。これで、モーションパスとモーショントゥイーンができるようになって、ほぼすべてのSMILアニメーションの要素と属性は実装が済みました。バグの修正に注力していきます。今回の変更は次回のリリースで反映されます

今後の予定

テストをした後で、新しいリリースを公開します

2016-07-25

Edgeのブラウザサポートについて

Windows 10でブラウザのEdgeをチェック

Windows 10でまずやりたかったのは、新ブラウザのEdgeでSIEをテストすることでした。

IE11とは違って、高速に動くのはいいのですが、hasFeatureメソッド仕様が微妙に違っていたので、ソースコードを修正しました。この修正は次回のリリースで反映されます

今後の予定

次回のリリースからは、Edgeをサポートします。そのために、テストを繰り返します