概要
北海道が、北海道ソーシャルディスタンシング「今は、きょりをとって」を道民運動として展開していることを北海道新型コロナウイルス感染症まとめサイトにアクセスしてきた人にも知ってもらうため、北海道新型コロナウイルス感染症まとめサイトのロゴを変更しました。
その際にソーシャルディスタンシングをよりわかりやすくするためにロゴにアニメーションを付けました。
ソーシャルディスタンシングをいろんな人に知ってほしいので他の対策サイトでもやってほしい！！！ということで今回はその方法を書こうと思います！
つくりかた
1. 画像を作る
まず、土台となる画像を作っていきます。
1-1. デザインを決める
Adobe illustratorなどをつかってソーシャルディスタンシングっぽく文字の間、iconとの間を少し開けた画像をデザインを決めて作ります。
1-2. オブジェクトに名前を付ける
web側で操作しやすくするためにそれぞれに名前を付けていきます。
1-2-1. テキストをアウトライン化する
テキストがテキストのままだと文字ごとに分けるのがめんどくさいのでアウトライン化します。
テキストを選択し右クリック、アウトラインを作成をクリックします
1-2-2. グループ化を解除する
テキストをアウトライン化しただけではグループ化されています。
アウトライン化したオブジェクトを右クリック、グループ解除をクリックします
1-2-3. オブジェクトに名前を付ける
それぞれのオブジェクトに名前を付けていきます。
この名前がSVGに変換したときのそれぞれのpathのidになります。
なお、記号系(- , _ ! |）、数字、マルチバイト文字を1文字目にすると変換時に文字コードに変更されるので英語を使うことをお勧めします。
それぞれのオブジェクトを選択し、オブジェクトの名前を変更します。
1-3. SVGに変換する
1-3-1. SVGにする
ファイルから別名で保存、保存先を選択して保存をクリック
文字: アウトラインに変換
CSSプロパティ: スタイル要素
レスポンシブにチェック
に設定しOKをクリック
以上で画像の用意は完了です
2. Webでみれるようにする
2-1. Vueファイルをつくる
Vueファイルを作成します
<template>
</template>
<style scoped>
</style>
2-2. SVGをVueファイルに移植する
2-2-1. SVGをテキストエディタとかで開く
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<style type="text/css">
.st0{fill:#424242;}
.st1{fill:#1C8DF0;}
</style>
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
開くとこのような形になっています。
2-2-2. Vueファイルに移植する
<template> <!-- <svg>タグと<path>タグを入れる -->
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
</template>
<style scoped> <!-- <style>の中身を入れる -->
.st0 {
fill: #424242;
}
.st1 {
fill: #1c8df0;
}
</style>
以上でこのコンポーネントを表示するとこのように表示されます
3. アニメーションを付ける
3-1. 表示を初期状態にする
移動前のこの状態にします
3-1-1. cssにそれぞれのidをstyleブロックにを記述する
idの場合は#なので#te #reのように書いていきます
<template>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
</template>
<style scoped>
.st0 {
fill: #424242;
}
.st1 {
fill: #1c8df0;
}
# te {
}
# re {
}
.....
</style>
3-1-2. transformを使って初期状態にする
各文字を表示を見ながらtranslateX();を使って初期位置に移動させる。
<template>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
</template>
<style scoped>
.st0 {
fill: #424242;
}
.st1 {
fill: #1c8df0;
}
# te {
transform: translateX(-30%);
}
# re {
transform: translateX(-24%);
}
.....
</style>
このようになります
3-2. アニメーションを設定する
3-2-1. keyframeを作成する
＠keyframeを書く。移動後のみの記述でOK
<template>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
</template>
<style scoped>
.st0 {
fill: #424242;
}
.st1 {
fill: #1c8df0;
}
# te {
transform: translateX(-30%);
}
# re {
transform: translateX(-24%);
}
.....
@keyframes move {
100% {
transform: translateX(0%);
}
}
</style>
3-2-2. animationを記述する
仕上げにanimationを各idに記述する
animation: move 1.5s ease-in 0.2s forwards;
これの意味はmoveというkeyframeを開始まで0.2秒置き、1.5秒使ってease-inして、終了後にアニメーション終了時のまま維持するという意味です。
1.5sを変えると移動が終わるまでにかかる時間が変わり、0.2sを変えると開始までの時間を変えることができます。
<template>
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 121.8 30" style="enable-background:new 0 0 121.8 30;" xml:space="preserve">
<path id="te" class="st0" d="M113......22.2z" />
<path id="re" class="st0" d="M98.4......21.5z" />
....
<path id="c" class="st0" d="M37.2......2,3z"/>
<path id="logo" class="st1" d="M25.7......16.6z"/>
</svg>
</template>
<style scoped>
.st0 {
fill: #424242;
}
.st1 {
fill: #1c8df0;
}
# te {
transform: translateX(-30%);
animation: move 1.5s ease-in 0.2s forwards;
}
# re {
transform: translateX(-24%);
animation: move 1.5s ease-in 0.2s forwards;
}
.....
@keyframes move {
100% {
transform: translateX(0%);
}
}
</style>
以上でアニメーションの適用が終わりです。
このように動くようになります。（ループしてますがweb上では止まります）
まとめ
一番たいへんなのはアニメーション前の状態に設定することだと思います。
それさえ終われば後は楽勝なのでぜひやってみてください！！
回したりとか上下移動もできるのでアレンジもぜひ！
間違えている点などあればお教えください！