こんにちは、ゆうやです。
ジャンプで連載中の漫画『鬼滅の刃』が11年間トップだった『ONE PIECE』を抜いて、2019年コミックス年間累計売上げランキングで1位になると発表された今日このごろ、いかがお過ごしでしょうか。
本記事ではTwitterのいいね（ハートボタン）アニメーションを再現する方法を紹介します。
このアニメーションを見たいがためにいいねをタップしちゃう方も中にはいらっしゃるのではないでしょうか。
何回でも押したくなるアニメーション素敵です。
どうやって作っているのだろうと疑問に思いググってみるとほぼドンピシャな内容がヒットしました。
意外と簡単に実装できるのでぜひお試しあれです。
また上記の方法に加え、自分で試して実現した方法も合わせて紹介します。（こっちの方が使い勝手いいと思います笑）
それでは少し長丁場になりますが見ていきましょう！！
目次
方法① 横長の背景画像を左から右にアニメーションさせる
htmlを作ろう
htmlは以下を使用します。
<div class="Likes">
<div class="LikesIcon"></div>
</div>
cssはこちら
背景画像にハートアニメーション用の画像を指定します。
.Likes{
position: relative;
}
.Likes-Icon{
position: absolute;
left: -48px;
background: url("./img/heart_animation.png");
background-position: left;
background-size: 2900%;
background-repeat: no-repeat;
width: 105px;
height: 105px;
}
使用する画像はこちら。左から右にかけて1つずつ異なるハートの形を用意しているんです。
画像はこちらの記事より拝借いたしました。ありがとうございます。
参考 Twitter Heart Button CSS3 Animation9Lessonswidthとheightを変えると表示されるハートアイコンも大きくなります。
css @keyframesでアニメーションを作ろう
先程の画像を動かすアニメーションを作ります。
- 背景画像を左から右へ移動させる（background-position:left→right）
- 800ミリ秒かけて（animation-duaration）
- 28の工程で（animation-timing-function）
@keyframes heartBlast {
0% {
background-position: left;
}
100% {
background-position: right;
}
}
.HeartAnimation {
display: inline-block;
background-position: right;
-webkit-animation-name: heartBlast;
animation-name: heartBlast;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: steps(28);
animation-timing-function: steps(28);
}
javascriptでHeartAnimationクラスをつけ外しする
アニメーションが指定してあるHeartAnimationクラスをアイコンクリックした時につけ外しする処理を書きましょう。
$('.Likes-Icon').on('click', function() {
let $btn = $(this);
// Likeアイコンがonクラス持っていたら
if ($btn.hasClass('on')) {
$btn.removeClass('on');
$btn.removeClass("HeartAnimation");
$btn.css("background-position","left");
} else {
$btn.addClass('on');
$btn.addClass("HeartAnimation");
}
});
Twitter風ハートアニメーションはこれで完成です！
方法② fontawesomeアイコンをcssアニメーションさせる
htmlを作ろう
htmlは以下を使用します。
<div class="LikesIcon">
<i class="far fa-heart LikesIcon-fa-heart"></i>
</div>
<i>〜</i>はハートアイコンのhtmlです。fontawesomeより取ってきます。
cssでスタイリングする用にアイコンに任意のクラスをつけましょう。（今回はLikesIcon-fa-heart）
css @keyframesでアニメーションを作ろう
ハートアイコンをクリックした時に一旦もとのサイズより小さくして徐々にサイズアップしていき、最後はもとのサイズに戻すというアニメーションを@keyframesで指定します。
/* ---------------------------- */
/* --- ハートアニメーション --- */
/* ---------------------------- */
@keyframes heartAnimation {
0% {
/* アイコンサイズをもとのより小さくする */
transform: scale(0.5);
}
10% {
transform: scale(0.7);
}
30% {
transform: scale(0.9);
}
50% {
transform: scale(1.2);
}
80% {
transform: scale(1.5);
}
100% {
/* もとのサイズに戻す */
transform: scale(1.0);
}
}
ハートアイコンのクラスに作成した@keyframesを指定しよう
先ほど作成したアニメーションを以下のようにアイコンのクラスに指定します。
.heartクラスはハートアイコンをクリックした時に、js側で.LikesIcon-fa-heartに付与することでアニメーションを実行させます。
.LikesIcon-fa-heart{
font-size: 30px;
}
.LikesIcon-fa-heart.heart{
/* heartAnimationアニメーションを200ミリ秒かけて実行する */
animation: heartAnimation .2s;
/* アイコン色を黒から赤へ変更する */
color: #e2264d;
}
日本語で言うとしたら、こんな感じ！
管理人
javascriptでheartクラスをつけ外しする
ハートアイコンをクリックした時にアニメーションを実行するためのheartクラスをつけ外しする処理を書きましょう。
// Likeボタンクリック
$('.LikesIcon').on('click', function() {
let $btn = $(this);
// Likeボタンがonクラス持っていたら
if ($btn.hasClass('on')) {
$btn.removeClass('on');
// 白抜きアイコンに戻す
$btn.children("i").attr('class', 'far fa-heart LikesIcon-fa-heart');
} else {
$btn.addClass('on');
// ポイントは2つ！！
// ①アイコンを変更する
// far fa-heart（白抜きアイコン）
// ⇒ fas fa-heart（背景色つきアイコン）
// ②アニメーション+アイコン色変更用のheartクラスを付与する
$btn.children("i").attr('class', 'fas fa-heart LikesIcon-fa-heart heart');
}
}
実際のWebサービスで使用する場合は、ajaxでいいね数を取得して表示したりともう少し複雑になるので上記のままでは使えませんがアニメーションの挙動を試すだけなら大丈夫です！
まとめ
いかがでしたでしょうか。
今回実装してみて感じたのは、@keyframesを使うと表現の幅がグググッと広がる！ということです(^o^)
意外とお手軽にできるのでぜひ試してみていただければなと思います。
最後までご高覧いただきありがとうございました！
あわせて読みたい
