CAMPHOR- —京都のIT系学生コミュニティ—

セクション区切り

About

CAMPHOR-カンファーは京都のIT系学生コミュニティです。
エンジニアリング・デザイン・プロダクト開発などへの関心を共通点とする、 様々なバックグラウンドを持つ学生が集まっています。

CAMPHOR- HOUSE イメージ画像

CAMPHOR- HOUSE

CAMPHOR-のコミュニティースペースです。誰でも自由に訪れることが可能であり、日頃から作業・相談・議論が行われています。集まることのできる決まった場所があることによって、日頃のメンバー間の交流が促進されています。

創作活動 イメージ画像

メンバー同士の交流

CAMPHOR-にはITに関係する幅広い事柄に興味を持つメンバーが出入りしています。様々なスキルセットやスキルレベルを持つ学生により、教え合いや議論が普段から行われています。

イベント開催 イメージ画像

イベント・勉強会

トークイベントや勉強会を定期的に開催しています。学生が普段の取り組みについて発信し交流するものや、企業のデザイナーやエンジニアに来ていただくものがあります。

セクション区切り

House

学生が気軽に開発やデザインを行うことができる無償のコミュニティスペースです。
各種イベントもこちらで開催されており、様々な人が集まる場所となっています。

CAMPHOR- HOUSE 地図

CAMPHOR- HOUSEカンファーハウス

住所
〒606-8302
京都府京都市左京区吉田牛ノ宮町16番地
最寄駅・バス停
京阪 出町柳駅より徒歩9分
京都市バス 京大正門前より徒歩3分
Maps Schedule
セクション区切り
セクション区切り

Members' blog

CAMPHOR-カンファー運営メンバー個々人が綴るブログ記事を収集して表示しています。
メンバーの得た技術的・学術的・日常的な知見を共有します。

ブログのサムネイル画像
1
Dec.

サイトの読み込みが終わらないのでアニメーションを調べてみたhttps://honai.me/blog/post/material-ui-progress-animation

この記事は CAMPHOR- Advent Calendar 2019 2日目 の記事です。 こんにちは、ほないです。Advent Calender の記事を書くのは、CAMPHOR- 以外のものも含めて初めてなので、わくわくしています。 1日目のあたらんさんの記事、おもしろかったです。私も質問箱をつくりたくなりました。 今回はフロントエンドのアニメーションの話です。CSSやSVGのアニメーション、マイクロインタラクション、UIデザインに興味がある人におすすめの内容です。最後まで読んでいただけるとうれしいです。 ローディングでくるくる回るアレ 「あれ?ローディングが終わらない…」 スマホアプリやWebアプリで使われるインジケーター、みなさんも見たことがあると思います。データを取得しているときに表示して、ユーザーに「今がんばってるのでちょっと待ってね」ということを伝えるためのものですね。 ある日、あるサイトでこのインジケーターが表示されたまま進まなくなったとき、ふと「このくるくるってどんなを動きしているんだろう」と思ったのです。 じっと見つめてもよくわかりませんよね…。そこで、React向けのマテリアルデザインのUIフレームワークである Material-UI 注1 のソースコードを読んで、アニメーションを調べてみることにしました。 注1 本家 Material Design のソースを見ても良かったのですが、 Web版に丸いインジケーターがありませんでした。 円を描いたり消したりしながら回転している このインジケーターは、div の中にSVGで描かれた円 ( circle 要素) でできています。 <!-- HTML --> <div class="circular-progress"> <svg> <circle cx="44" cy="44" r="20.2"stroke-width="3.6" /> </svg> </div> この div と circle に別々のアニメーションが設定されています。 + = わかりやすさのために div をグレーにしています。真ん中が div にのみアニメーションをかけたものです。このアニメーションは、シンプルに1.4秒で等速で1回転するものです。 /* CSS */ div { animation: circular-rotate 1.4s linear infinite } @keyframes circular-rotate { 100% { transform: rotate(360deg); } } 左側が circle にのみアニメーションをかけたものです。まだ少しわかりにくいので、さらに分解して、遅くしてみましょう。 → = circle 要素のアニメーションは2段階あり、1つ目で時計回りに円を描いて、2つ目でその円を時計回りに消していくようになっています。 /* CSS */ circle { animation: circular-dash 1.4s ease-in-out infinite; } @keyframes circular-dash { 0% { stroke-dasharray: 1px 200px; stroke-dashoffset: 0px; } 50% { stroke-dasharray: 100px 200px; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100px 200px; stroke-dashoffset: -125px; } } stroke-dasharray と stroke-dashoffset は、本来は輪郭を破線にしてその間隔や位置を調節するプロパティですが、ここでは円を途中まで描くために使われています。 参考: stroke-dasharray - MDN , stroke-dashoffset - MDN 速度の変化は ease-in-out なので、最初は遅くてだんだん速くなって最後は遅くなる、という動きになります(図は Firefox の開発者ツールから引用)。 以上が丸いプログレスインジケーターのアニメーションにです。シンプルで気持ち良い動きですが、これを頭の中で思いついてコードにおこすのは難しそうです。 プログレスバーのアニメーション Material Design では、進捗を表す要素として、丸いインジケーターのほかに四角いバー型のインジケーターも提供されています。いわゆるプログレスバーです。 Material Design のドキュメント では、現在の進捗の割合に合わせてバーを進めていく determinate という状態の他に、進捗が数字ではわからないときのための indeterminate という状態も定義されています。上に置いたバーは indeterminate なものです。 ※ 話が前後しますが、先述の丸いインジケーターも、 indeterminate のアニメーションです。 このバーのアニメーションも読み解いていきましょう。 長さを変えながら右へ動くバー プログレスバーのDOMの構成は次のようになっています。 <!-- HTML --> <div class="linear-progress"> <div class="bar bar1"></div> <div class="bar bar2"></div> </div> 親の div が薄い色の四角形、子の div がそれぞれ position: absolute; で動いています。 動きをよく見ると、濃い色の四角形が2つ動いているのがわかると思います。別々にして遅くするとこんな感じになります。 /* CSS */ .linear-progress > .bar1 { animation: linear-progress-bar1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .linear-progress > .bar2 { animation: linear-progress-bar2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes linear-progress-bar1 { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes linear-progress-bar2 { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } 1つ目のバーは6割までの時間で左から右へ動きます。左端より右端のほうが速く動きます。また cubic-bezier で最初と最後は速く、中盤はゆっくりになります。 2つ目のバーは animation-delay で半分の時間だけ遅らせて開始します。左端が右端に追いつくような動きになっており、 cubic-bezier で前半は急速、後半はゆっくりになっていますね。 cubic-bezier(...) の指定によるバーの速度変化はこんな感じです(右が1つ目、左が2つ目のバー)。 以上がプログレスバーのアニメーションの解説になります。 まとめ 見慣れたアイコンのアニメーションも、詳しく見てみると細部までこだわってデザインされていることがわかります。イージングを1つ変えただけでもかなり印象が変わります(みなさんも開発者ツールでぜひ試してみてください!)。 端末の描画能力が向上し、UIそのものの静的な見た目のデザインだけでなく、それに動きをつけるデザインも重要になってきています。そういったデザインの手間を省きつつ整ったUIを使えるフレームワークは便利だなと改めて感じました。 また機会があれば、ダイアログやメニューの開閉のアニメーションについても調べてみたいです。 CAMPHOR- Advent Calender 3日目の担当は marty1martie さんです。 .component-box { --primary: #1976d2; --secondary: #dc004e; --primary-trans: rgb(167, 202, 237); --secondary-trans: rgb(241, 158, 187); display: flex; justify-content: space-around; padding: 10px; align-items: center; } .component-box.column { flex-flow: column nowrap; } .circular-progress { width: 40px; height: 40px; display: 'inline-block'; } .circular-progress.indeterminate { animation: circular-rotate 1.4s linear infinite } .circular-progress svg { display: block; } .circular-progress.primary circle { stroke: var(--primary); } .circular-progress.secondary circle { stroke: var(--secondary); } .circular-progress.indeterminate circle { animation: circular-dash 1.4s ease-in-out infinite; stroke-dasharray: 80px 200px; stroke-dashoffset: 0px; } @keyframes circular-rotate { 100% { transform: rotate(360deg); } } @keyframes circular-dash { 0% { stroke-dasharray: 1px 200px; stroke-dashoffset: 0px; } 50% { stroke-dasharray: 100px 200px; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100px 200px; stroke-dashoffset: -125px; } } @keyframes circular-dash-1 { 0% { stroke-dasharray: 1px 200px; stroke-dashoffset: 0px; } 100% { stroke-dasharray: 100px 200px; stroke-dashoffset: -15px; } } @keyframes circular-dash-2 { 0% { stroke-dasharray: 100px 200px; stroke-dashoffset: -15px; } 100% { stroke-dasharray: 100px 200px; stroke-dashoffset: -125px; } } .linear-progress { height: 4px; width: 100%; margin-top: 10px; overflow: hidden; position: relative; } .linear-progress.primary { background-color: var(--primary-trans); } .linear-progress.secondary { background-color: var(--secondary-trans); } .linear-progress > .bar { top: 0; left: 0; width: 100%; bottom: 0; position: absolute; transition: transform 0.2s linear; transform-origin: left; } .linear-progress.primary > .bar { background-color: var(--primary); } .linear-progress.secondary > .bar { background-color: var(--secondary); } .linear-progress > .bar.bar1 { width: auto; animation: MuiLinearProgress-keyframes-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; } .linear-progress > .bar.bar2 { width: auto; animation: MuiLinearProgress-keyframes-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; animation-delay: 1.15s; } @keyframes MuiLinearProgress-keyframes-indeterminate1 { 0% { left: -35%; right: 100%; } 60% { left: 100%; right: -90%; } 100% { left: 100%; right: -90%; } } @keyframes MuiLinearProgress-keyframes-indeterminate2 { 0% { left: -200%; right: 100%; } 60% { left: 107%; right: -8%; } 100% { left: 107%; right: -8%; } } @keyframes linear-1-1 { }
セクション区切り

Events

セクション区切り

Sponsors

CAMPHOR- は、協賛企業・運営企業・個人のご協力によって活動を行っています。
また、私達の活動をご支援いただける企業を随時募集しております。

協賛企業
チームラボ株式会社

チームラボ株式会社 ロゴ

協賛企業
株式会社マイクロアド

株式会社マイクロアド ロゴ

協賛企業
ピクシブ株式会社

ピクシブ株式会社 ロゴ

協賛企業
株式会社メルカリ

株式会社メルカリ ロゴ

協賛企業
株式会社ディー・エヌ・エー

株式会社ディー・エヌ・エー ロゴ

協賛企業
株式会社 idea spot(イデアスポット)

株式会社 idea spot(イデアスポット) ロゴ

運営企業
株式会社Vi-King

株式会社Vi-King ロゴ

セクション区切り

Contact

CAMPHOR- の見学・取材・協賛などのお問い合わせはこちらからお願いします。
企業の方も学生の方もお気軽にお問い合わせください。
もちろん CAMPHOR- HOUSE に直接お越しいただいても構いません。

セクション区切り

Twitter / Facebook