border-widthで実装する動きのあるアイコンのアニメーション

どんなものが出来るのか

このgifを参考にしてください。　これは一番単純な動きです。

最終的にこうなります。

作り方

仕組みは単純で、border-widthの値を変更することで実装します。

環境

CSSリセットとしてress、アニメーションはanime.jsで記述していきます。

お使いの環境に合わせて適宜変更していってください。

コーディング

HTML

<div class="wrap">
    <div class="border"></div>
    <img src="icon.png">
</div>

CSS

.wrap {
    position: relative;

    width: 128px;
    height: 128px;
}

.wrap > .border {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    width: 128px;
    height: 128px;

    border-width: 64px;
    border-color: #03a9f4;
    border-style: solid;
    border-radius: 50%;
    box-sizing: border-box;
}

.wrap > img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;

    width: 128px;
    height: 128px;

    border-radius: 50%;
}

今回は大きさを128pxで設定しています。scss、stylusなどの場合は変数化しておくとラクだと思います。
重要なのはborder-weightを大きさの半分に設定することです。
border: 64px solid #03a9f4と書いても問題ありません。

JS

var wrap = basic.getElementsByClassName("wrap")[0];
var border = wrap.getElementsByClassName("border")[0];
var img = wrap.getElementsByTagName("img")[0];

var timeline = anime.timeline();

timeline
    .add({
        targets: border,
        duration: 500,
        easing: "easeInExpo",
        scale: [0, 1],
        begin: () => (img.style.visibility = "hidden")
    })
    .add({
        targets: border,
        duration: 500,
        easing: "easeOutExpo",
        borderWidth: 0,
        begin: () => (img.style.visibility = "visible")
    });

何をやっているか

アニメーション開始時点 (1回目のbegin関数)

img要素のvisibilityをhiddenにして非表示に設定する。

ボーダー要素を拡大する (scaleX: [0, 1])

scaleを0から1へアニメーションする。

ボーダーの拡大が完了 (2回目のbegin関数)

img要素のvisibilityをvisibleにして非表示を解除する。

ボーダーを0pxに縮小する (borderWidth: 0)

タイトル通りです。

基本の動きは以上です。

コツ

前回の記事でも触れましたが、拡大するときにはイージングをeaseIn*系、縮小する際にはeaseOut*を設定すると見栄えが良くなると思います。

また、easeOutExpoのような急なイージングの際には縮小の際にボーダーが1px近くの小さな値で留まりやすいです。（下の画像のように）

ボーダー要素のopacityもアニメーションさせておくと違和感が残らなくて良いかもしれません。
または、ボーダー要素のscaleを1.05のように少しだけ大きくするのも一つの手でしょう。

応用

その1

HTMLは一緒です。

CSS

.wrap {
    border-radius: 50%;
    overflow: hidden;
}

コツで書いたようにボーダー要素のscaleを変更する手段を取った場合、この2行を追加してください。

JS

コードはほぼ一緒なので、timelineの部分だけ抜き出します。

timeline
    .add({
        targets: border,
        duration: 500,
        easing: "easeInExpo",
        scale: [0, 1],
        begin: () => (img.style.visibility = "hidden")
    })
    .add({
        targets: border,
        duration: 500,
        easing: "easeOutExpo",
        borderWidth: 0,
        scale: 1.05,
        begin: () => {
            img.style.visibility = "visible";
            anime({
                targets: img,
                duration: 1000,
                easing: "easeOutElastic",
                scale: [0, 1],
                rotateZ: [`${0.25}turn`, 0]
            });
        }
    });

画像側のアニメーションを2回目のbegin関数に追加しました。
turnというのは見慣れない単位かもしれませんが、1turnは360degです。別に90degでも構いません。

また、ボーダー要素のscaleを1.05になるように設定しています。

その2

前回の応用1でやったことの応用で、ボーダー要素を2個にします。

先程のコードを改造します。

HTML

<div class="wrap">
    <div class="border"></div>
    <div class="border"></div>
    <img src="icon.png">
</div>

CSS

.wrap > .border:nth-type-of(1) {
    background-color: #03a9f4;
    z-index: 2;
}

.wrap > .border:nth-type-of(2) {
    background-color: #0277bd;
    z-index: 1;
}

JS

var wrap = adv_1.getElementsByClassName("wrap")[0];
var border1 = wrap.getElementsByClassName("border")[0];
var border2 = wrap.getElementsByClassName("border")[1];
var img = wrap.getElementsByTagName("img")[0];

var timeline = anime.timeline();

timeline
    .add({
        targets: [border1, border2],
        duration: (target, index) => 500 - index * 100,
        easing: "easeInExpo",
        scale: [0, 1],
        begin: () => (img.style.visibility = "hidden")
    })
    .add({
        targets: [border1, border2],
        duration: 500,
        delay: (target, index) => index * 100,
        easing: "easeOutExpo",
        borderWidth: 0,
        scale: 1.05,
        begin: () => {
            img.style.visibility = "visible";
            anime({
                targets: img,
                duration: 1000,
                easing: "easeOutElastic",
                scale: [0, 1],
                rotateZ: [`${0.125}turn`, 0]
            });
        }
    });

その3

その2を更に応用して、パーティクルを出します。

HTML

<div class="wrap">
    <div class="border"></div>
    <div class="border"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <div class="particle"></div>
    <img src="icon.png">
</div>

pugなどが使える環境ではループを使って書いたほうがよっぽど衛生的だと思います。

CSS

.wrap > .particle {
    position: absolute;
    top: 0;
    left: 0;

    z-index: 0;

    width: 128px;
    height: 128px;

    opacity: 0;
    border-radius: 50%;
    background: #03a9f4;
}

コードには含めていませんが、.wrapのoverflow: hiddenを削除してください。
そしてopacity: 0を忘れないでください。書き忘れるとこうなります。

JS

var particles = wrap.getElementsByClassName("particle");

var timeline = anime.timeline();
timeline
    .add({
        targets: [border1, border2],
        duration: (target, index) => 500 - index * 100,
        easing: "easeInExpo",
        scale: [0, 1],
        begin: () => (img.style.visibility = "hidden")
    })
    .add({
        targets: [border1, border2],
        duration: 500,
        delay: (target, index) => index * 100,
        easing: "easeOutExpo",
        borderWidth: 0,
        begin: () => {
            img.style.visibility = "visible";
            anime({
                targets: img,
                duration: 1000,
                easing: "easeOutElastic",
                rotateZ: [`${0.125}turn`, 0]
            });
            anime({
                targets: particles,
                duration: 350,
                delay: (target, index) => index * 10,
                easing: "easeOutQuad",
                translateX: () => `${(Math.random() - 0.5) * 200}%`,
                translateY: () => `${(Math.random() - 0.5) * 200}%`,
                scale: [() => Math.min(Math.random() * 2, 1), 0],
                opacity: 1
            });
        }
    });

パーティクルのアニメーションを追加しました。
あまりtranslateXやtranslateYの値を大きくすると良くないかもしれません。
このサンプルでは-100%から100%の範囲で動きます。

また、今回はボーダーの縮小にscale: 1.05を使うとハミ出るので削除します。

最後

間違ってたらコメント欄でご指摘ください。

ブラウザ上で動かす
ソースコード