SVGのpathを使ったモーションパスアニメーションの実装方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、おじいちゃんです 今回はSVGのpathを使ったモーションパスアニメーションの実装方法について書きたいと思います。 【こちらもおすすめ】 ☞ SVGとjQueryで絵を描いているようなアニメーションを実装する方法 SVGのpath要素 path要素を使うことで、好きな図形を描くことができます。 Illustratorを使っている方はよく使ってますよね。Illustratorで描いたパスからSVGを書き出して使うこともできるのですが、今回は直接SVGタグのpath要素に描いて作ってみましょう。 d=”M 50,50 L 200,50 Z” SVGでpathを描く場合は、上のように各コマンドにパラメータをいれることでpathを描画できます。少しクセがありますが、自分で好きなpathを描いてみると慣れてきますので、遊んでみてください。 pathを描画するためのコマンドは下記があります
Adobe Illustrator スクリプト はじめのいっぽ - ここぽんのーと
UIのグラフィックデザインにはInkscapeを愛用してきましたが、徐々にIllustrator CCへ移行しようと計画中です。今回は、Illustratorのスクリプトの「Getting started」的な内容について調べたのでまとめておきます。 この記事を書いている環境OS X 10.8.4Adobe Illustrator CC (17.0.0)Adobe ExtendScript Toolkit CC (4.0.0.1)Illustratorのスクリプト事情Illustratorでは3種類のスクリプト言語が提供されていて、それぞれ動作するOSが異なります。 JavaScript (Windows, OS X)AppleScript (OS X)VBScript (Windows)自分はJavaScriptを選ぶことにします。 使い慣れてますし、どちらのOSでも動きますからね 😉
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
