昨日のイラスト
昨日のスクリプト
このAdvanceでポッドキャストを開設し、多くの人が聴けるようにSpitifyへ配信をしているわけだが、ここ最近になってさらにSpotifyのことが好きになった気がする。
というのも、UIが素敵すぎるのだ。
ポッドキャストを登録する際も、ブラウザでRSSコードというものを使ってプロフィールをつくっていくんだけど、Webでもここまでイケてるルックスをしてるなんて流石すぎる…とずっと感動してました。笑
CODING MANUAL
風景だったり情景をざっくり表現するのもいいですが、こんな感じで「実際スマホにのっかってるもの」をアニメーションさせる面白さもありますよね。
// ドットを移動
var advance_music = new TweenMax.to(".played_music_dots", 1, {
ease: Power3.linear,
x: 318,
});
var music_let_short = new ScrollMagic.Scene({
triggerElement: ".music_play_svg",
triggerHook: 0.4,
})
.setTween(advance_music)
.addTo(controller);
// 左の線を伸ばす
var advance_music_play = new TweenMax.to(".played_music", 1, {
ease: Power3.linear,
scale: 2,
});
var music_let_play = new ScrollMagic.Scene({
triggerElement: ".music_play_svg",
triggerHook: 0.4,
})
.setTween(advance_music_play)
.addTo(controller);
// 再生中マークを消す
var tlMusic = new TimelineMax();
var advance_music_button = tlMusic
.to(".play_button_left", 0.2, {
ease: Power3.linear,
opacity: 0,
})
.to(".play_button_right", 0.2, {
ease: Power3.linear,
opacity: 0,
})
.from(".stop_button", 0.2, {
ease: Power3.linear,
opacity: 0,
});
// 停止マークを表示する
var music_button = new ScrollMagic.Scene({
triggerElement: ".music_play_svg",
triggerHook: 0.4,
})
.setTween(advance_music_button)
.addTo(controller);今回のドットを移動させるアニメーションに関しては「rect」というタグの名前で表示されていたので、SVGですし、TweenMaxで「left: 100」みたいな指定も機能しなかった。
ここはしょうがないと思ってX軸に目分量で調節して、線の延長とマッチするくらいの数字を設定して耐えています。
線の延長も「scale」で設置しちゃっていますが、センスがないかもしれないですね。。
どうすればいいんでしょうかっ考えてみます。