12章アニメーション

これまで見てきた画像は、すべて静止画像でした。いったん作成したら、それらが変わることはありません。この章では、グラフィック画像を動かすための3つの方法のうちの2つを説明します。1つ目の方法であるSMILベースのアニメーションは、その動きが、グラフィックが表現しているものにとって欠かせない部分である場合に使用すべきです。また、その動きが事前に定義できるものについて使用します。2つ目の方法であるCSSアニメーションは、スタイルに関する効果や単純なフィードバック(フォーカスが移ったときやマウスオーバーしたときに要素を強調表示するなど)のために使用すべきです。スクリプトは、より複雑な対話処理のために使用すべきであり、これについては「13章 対話性」で説明します。

「11章 フィルター」では、フィルターを、それ自体を目的とするのではなく、グラフィックのメッセージを強化する手段として使用すべきと提言しました。この提言は、アニメーションにおいてはさらに重要です。アニメーションの魅力に酔いしれると、すべてのグラフィックスを、歌って踊るブロードウェイのショーのように変えたくなってしまうでしょう。実験することが目的であれば、それでかまいません。しかし、メッセージを伝えることが目的であれば、アニメーションの乱用ほどひどいものはありません。これだけは、はっきり言わせてください。会社のロゴが回転したり、点滅したり、色が変わったり、ストロボで照らされたりするのを何度でも見たいと思うのは、会社の社長以外には誰もいないのです!

この章ではアニメーションそのものがメッセージなので、ほとんどの例は特に内容はありませんが、当然のことながら、不必要なアニメーションや凝りすぎたアニメーションはできるだけ避けるようにしてあります。 ...

Get SVGエッセンシャルズ 第2版 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.