Buat ulang Animasi Google Gemini untuk Gmail – Beragampengetahuan

Saya selalu melihat tombol Google Gemini ini di sudut Gmail. Saat Anda mengarahkannya, ia melakukan animasi keren ini di mana bintang empat poin berputar dan bentuk luar juga bervariasi antara beberapa bentuk yang berbeda, yang juga berputar.

Saya menantang diri saya sendiri untuk membuat ulang tombol menggunakan CSS baru shape() Fungsinya menghidupkannya untuk membawa hal -hal yang sangat dekat. Biarkan aku membawamu melewatinya.

Gambarlah bentuk

Untuk memecahnya, kami membutuhkan lima bentuk secara total:

1. Bintang berujung empat
2. Barang bunga (ya, itu istilah teknis)
3. Hal-hal seperti silinder (juga istilah teknis yang benar)
4. Hexagon bundar
5. Lingkaran

I’ve drawn these shapes in a graph editing program (I like Affinity Designer, but any app that lets you draw vector shapes work), output them in SVG, and then use a tool like Temani Afif’s generator to convert the SVG path to a CSS-generated SVG path shape() sintaksis.

Sekarang, sebelum saya keluar dari bentuk dari perancang afinitas, saya memastikan bunga, segi enam, lingkaran, dan silinder semuanya memiliki jumlah titik jangkar yang sama. Jika mereka tidak memiliki nomor yang sama, bentuknya akan melompat dari satu bentuk ke bentuk berikutnya tanpa deformasi. Jadi mari kita gunakan sejumlah titik jangkar yang konsisten di setiap bentuk (bahkan lingkaran) yang dapat kita amati bahwa bentuk -bentuk ini saling cacat.

Saya menetapkan dua belas titik jangkar pada setiap bentuk karena itu adalah jumlah tertinggi yang digunakan (segi enam memiliki dua titik di dekat setiap sudut melengkung).

Hal terkait (yang mungkin sulit dipecahkan, tergantung pada program grafis Anda) adalah bahwa beberapa bentuk saya dipelintir ketika menghidupkan antar bentuk. Misalnya, banyak bentuk menjadi lebih kecil dan berputar sebelum mereka mulai berputar ke bentuk berikutnya, sementara yang lain lebih mulus. Saya akhirnya menemukan bahwa interpolasi cocok dengan titik awal dari setiap bentuk dan terus cocok dengan poin saat bentuk diikuti.

Hasilnya adalah bahwa titik pencocokan bergerak di antara bentuk -bentuk, jadi jika titik awal satu bentuk berada di sisi lain dari titik awal bentuk kedua, banyak gerakan diperlukan untuk transisi dari titik awal satu bentuk ke titik awal berikutnya.

Untungnya, lingkaran adalah satu -satunya bentuk yang memberi saya masalah, jadi saya bisa memutarnya (dicoba dan salah) sampai titik awal lebih cocok dengan titik awal lainnya.

Masalah lain yang saya temui adalah bahwa bentuk silinder memiliki dua garis lurus yang terpisah shape() Dan line Perintah alih -alih menggunakan curve Memesan. Ini mencegah animasi menjadi bentuk berikutnya. Segera menangkap gambar berikutnya dalam kasing tanpa menjiwai transisi, melompat ke bentuk berikutnya (ketika keduanya memasuki silinder dan keluar darinya).

Saya kembali ke perancang afinitas dan menambahkan kurva ke kedua jalur dan berubah bentuk dengan sempurna. Awalnya saya pikir itu shape() quirk, tetapi hal yang sama terjadi ketika saya mencoba menggunakan animasi path() Fungsi, menunjukkan bahwa itu lebih merupakan batas interpolasi, daripada shape() keterbatasan.

Setelah saya menambahkan milik saya shape() Nilai, saya mendefinisikan variabel CSS untuk setiap bentuk. Ini membuat masing -masing shape() Lebih mudah dibaca, belum lagi lebih mudah dipelihara. Untuk dua belas baris dari setiap bentuk, kode ini adalah panjang stinkin (istilah teknis), jadi kami meletakkannya di belakang menu akordeon.

:root {
  --hexagon: shape(
    evenodd from 6.47% 67.001%,
    curve by 0% -34.002% with -1.1735% -7.7% / -1.1735% -26.302%, 
    curve by 7.0415% -12.1965% with 0.7075% -4.641% / 3.3765% -9.2635%, 
    curve by 29.447% -17.001% with 6.0815% -4.8665% / 22.192% -14.1675%, 
    curve by 14.083% 0% with 4.3725% -1.708% / 9.7105% -1.708%, 
    curve by 29.447% 17.001% with 7.255% 2.8335% / 23.3655% 12.1345%, 
    curve by 7.0415% 12.1965% with 3.665% 2.933% / 6.334% 7.5555%, 
    curve by 0% 34.002% with 1.1735% 7.7% / 1.1735% 26.302%, 
    curve by -7.0415% 12.1965% with -0.7075% 4.641% / -3.3765% 9.2635%, 
    curve by -29.447% 17.001% with -6.0815% 4.8665% / -22.192% 14.1675%, 
    curve by -14.083% 0% with -4.3725% 1.708% / -9.7105% 1.708%, 
    curve by -29.447% -17.001% with -7.255% -2.8335% / -23.3655% -12.1345%, 
    curve by -7.0415% -12.1965% with -3.665% -2.933% / -6.334% -7.5555%, 
    close
  );

  --flower: shape(
    evenodd from 17.9665% 82.0335%,
    curve by -12.349% -32.0335% with -13.239% -5.129% / -18.021% -15.402%, 
    curve by -0.0275% -22.203% with -3.1825% -9.331% / -3.074% -16.6605%, 
    curve by 12.3765% -9.8305% with 2.3835% -4.3365% / 6.565% -7.579%, 
    curve by 32.0335% -12.349% with 5.129% -13.239% / 15.402% -18.021%, 
    curve by 20.4535% -0.8665% with 8.3805% -2.858% / 15.1465% -3.062%, 
    curve by 11.58% 13.2155% with 5.225% 2.161% / 9.0355% 6.6475%, 
    curve by 12.349% 32.0335% with 13.239% 5.129% / 18.021% 15.402%, 
    curve by 0.5715% 21.1275% with 2.9805% 8.7395% / 3.0745% 15.723%, 
    curve by -12.9205% 10.906% with -2.26% 4.88% / -6.638% 8.472%, 
    curve by -32.0335% 12.349% with -5.129% 13.239% / -15.402% 18.021%, 
    curve by -21.1215% 0.5745% with -8.736% 2.9795% / -15.718% 3.0745%, 
    curve by -10.912% -12.9235% with -4.883% -2.2595% / -8.477% -6.6385%, 
    close
  );

  --cylinder: shape(
    evenodd from 10.5845% 59.7305%, 
    curve by 0% -19.461% with -0.113% -1.7525% / -0.11% -18.14%, 
    curve by 10.098% -26.213% with 0.837% -10.0375% / 3.821% -19.2625%, 
    curve by 29.3175% -13.0215% with 7.2175% -7.992% / 17.682% -13.0215%, 
    curve by 19.5845% 5.185% with 7.1265% 0% / 13.8135% 1.887%, 
    curve by 9.8595% 7.9775% with 3.7065% 2.1185% / 7.035% 4.8195%, 
    curve by 9.9715% 26.072% with 6.2015% 6.933% / 9.4345% 16.082%, 
    curve by 0% 19.461% with 0.074% 1.384% / 0.0745% 17.7715%, 
    curve by -13.0065% 29.1155% with -0.511% 11.5345% / -5.021% 21.933%, 
    curve by -26.409% 10.119% with -6.991% 6.288% / -16.254% 10.119%, 
    curve by -20.945% -5.9995% with -7.6935% 0% / -14.8755% -2.199%, 
    curve by -8.713% -7.404% with -3.255% -2.0385% / -6.1905% -4.537%, 
    curve by -9.7575% -25.831% with -6.074% -6.9035% / -9.1205% -15.963%, 
    close
  );

  --star: shape(
    evenodd from 50% 24.787%, 
    curve by 7.143% 18.016% with 0% 0% / 2.9725% 13.814%, 
    curve by 17.882% 7.197% with 4.171% 4.2025% / 17.882% 7.197%, 
    curve by -17.882% 8.6765% with 0% 0% / -13.711% 4.474%, 
    curve by -7.143% 16.5365% with -4.1705% 4.202% / -7.143% 16.5365%, 
    curve by -8.6115% -16.5365% with 0% 0% / -4.441% -12.3345%, 
    curve by -16.4135% -8.6765% with -4.171% -4.2025% / -16.4135% -8.6765%, 
    curve by 16.4135% -7.197% with 0% 0% / 12.2425% -2.9945%, 
    curve by 8.6115% -18.016% with 4.1705% -4.202% / 8.6115% -18.016%, 
    close
  );

  --circle: shape(
    evenodd from 13.482% 79.505%, 
    curve by -7.1945% -12.47% with -1.4985% -1.8575% / -6.328% -10.225%, 
    curve by 0.0985% -33.8965% with -4.1645% -10.7945% / -4.1685% -23.0235%, 
    curve by 6.9955% -12.101% with 1.72% -4.3825% / 4.0845% -8.458%, 
    curve by 30.125% -17.119% with 7.339% -9.1825% / 18.4775% -15.5135%, 
    curve by 13.4165% 0.095% with 4.432% -0.6105% / 8.9505% -0.5855%, 
    curve by 29.364% 16.9% with 11.6215% 1.77% / 22.102% 7.9015%, 
    curve by 7.176% 12.4145% with 3.002% 3.7195% / 5.453% 7.968%, 
    curve by -0.0475% 33.8925% with 4.168% 10.756% / 4.2305% 22.942%, 
    curve by -7.1135% 12.2825% with -1.74% 4.4535% / -4.1455% 8.592%, 
    curve by -29.404% 16.9075% with -7.202% 8.954% / -18.019% 15.137%, 
    curve by -14.19% -0.018% with -4.6635% 0.7255% / -9.4575% 0.7205%, 
    curve by -29.226% -16.8875% with -11.573% -1.8065% / -21.9955% -7.9235%, 
    close
  );
}

Jika semua ini terlihat seperti gobbledygook untuk Anda, itu juga banyak bekerja untuk saya (saya menulisnya shape() entri buku tahunan). Seperti yang saya katakan di atas, saya mengubahnya dari apa yang saya tarik shape()Gunakan alat. Jika Anda dapat mengidentifikasi bentuk dalam nama properti khusus, Anda perlu mengetahui semua yang Anda butuhkan untuk terus mengikuti.

Mengurai animasi

Setelah menatap animasi Gmail lebih lama dari yang ingin saya akui, saya dapat mengenali enam tahap yang berbeda:

Pertama, hover:

1. Bintang empat poin berputar ke kanan dan mengubah warnanya.
2. Bentuk biru yang indah menyebar keluar dari bawah bintang.
3. Saat berputar, bentuk biru yang indah menjadi bentuk lain.
4. Warna ungu menyapu bentuk biru mewah.

Kemudian, setelah melayang:

5. Kontrak bentuk biru yang indah (pada dasarnya kebalikan dari tahap 2).
6. Bintang empat poin berputar ke kiri dan mengembalikan warna awalnya (pada dasarnya kebalikan dari tahap 1).

Itulah arloji lari yang sedang kami kerjakan! Kami akan menulis CSS untuk semuanya, tetapi pertama -tama saya ingin mengatur struktur HTML yang kami tarik.

Html

Saya selalu ingin menjadi salah satu ujung depan untuk membuat seni menjatuhkan rahang dari CSS div (Itulah yang dikomentari seseorang tentang Codepen). Tapi, a, saya memutuskan saya membutuhkan dua divUntuk mencapai tantangan ini, saya menghargai Anda melihat rasa malu saya. Bagi mereka yang mengangkat hidung mereka dan berhenti membaca setelah masuk: Saya dapat dengan aman memanggil Anda flooplegerp dan Anda tidak akan pernah tahu.

(Saya sebenarnya tidak tahu apa itu Flooplegerp untuk orang -orang yang masih bersama saya. Tapi saya yakin itu buruk.)

Karena animasi perlu menyebarkan bentuk biru dari bawah bintang, mereka harus dua bentuk terpisah. Dan kita tidak bisa mempersempit atau menjepit elemen -elemen utama untuk melakukan ini karena itu menutupi bintang -bintang.

Jadi, ya, itu sebabnya saya meraih sedetik div: Tangani bentuk mewah dan bagaimana ia bergerak dan berinteraksi dengan bentuk bintang.

<div id="geminianimation">
  <div></div>
</div>

Gaya CSS Dasar

Setiap bentuk pada dasarnya didefinisikan dengan dimensi yang sama dan jarak margin.

#geminianimation {
  width: 200px;
  aspect-ratio: 1/1;
  margin: 50px auto;
  position: relative;
}

Kita dapat menggunakan elemen semu untuk kotak klip untuk bentuk tertentu. Misalnya, mari kita gunakan variabel CSS untuk menjepit bintang (--star) Kami mendefinisikannya dan mengatur warna latar belakang di atasnya:

#geminianimation {
  width: 200px;
  aspect-ratio: 1;
  margin: 50px auto;
  position: relative;

  &::before {
    content: "";
    clip-path: var(--star);
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #494949;
  }
}

Kami dapat menghubungkan ke dalam wadah untuk anak -anak div Dan menggunakannya untuk membuat bentuk awal animasi, yaitu bunga (menggunakan kami --flower Dapat berubah):

#geminianimation div {
  width: 100%;
  height: 100%;
  clip-path: var(--flower);
  background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
}

Yang kita dapatkan adalah bentuk bintang yang ditumpuk di atas bentuk bunga. CSS awal kami hampir selesai, tetapi untuk menciptakan kembali tisu warna animasi, kami membutuhkan permukaan yang lebih besar sehingga kami dapat “mengubah” warna dengan menggerakkan posisi gradien latar belakang. Mari kita pindahkan gradien sehingga dinyatakan pada elemen semu, bukan anak divDan lulus 400% Beri kami ruang bernapas ekstra.

#geminianimation div {
  width: 100%;
  height: 100%;
  clip-path: var(--flower);

  &::after {
    content: "";
    background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
    width: 400%;
    height: 400%;
    position: absolute;
  }
}

Sekarang kita dapat dengan jelas melihat bagaimana bentuk diposisikan relatif satu sama lain:

Fase Animasi 1 dan 6

Sekarang, saya mengakui bahwa dengan kesombongan saya sendiri, saya rendah hati transition Properti adalah karena pikiran saya biasanya Transisi sangat bagus untuk memulai animasi dan cepat, tetapi Nyata Animasi dilakukan dengan menggunakan bingkai kunci CSS. (Mungkin saya juga flooplegerp.)

Tapi sekarang saya melihat kesalahan dengan cara saya. Saya bisa menulis satu set kerangka kunci untuk memutar bintang 180 derajat, mengubahnya menjadi putih (ish), dan tetap seperti itu selama elemen dilayang. Yang tidak bisa saya lakukan adalah mengembalikan animasi bintang ke elemen yang tidak dipegang oleh elemen.

Tapi, saya bisa menggunakan transition milik. Untuk tujuan ini, kami menambahkan transition: 1s ease-in-out; ada ::beforetambahkan warna latar belakang baru dan rotasi barang :hover ada #geminianimation wadah. Ini menggambarkan tahap pertama dan keenam dari animasi yang kami uraikan sebelumnya.

#geminianimation {
  &::before {
    /* Existing styles */
    transition: 1s ease-in-out;
  }
  &:hover {
    &::before {
      transform: rotate(180deg);
      background-color: #FAFBFE;
    }
  }
}

Fase Animasi 2 dan Fase 5

Pada tahap kedua dan kelima dari animasi, kita dapat melakukan hal serupa karena mereka adalah cermin satu sama lain. Ingatlah bahwa selama tahap -tahap ini kita menyebarkan dan menyusut bentuk biru yang indah.

Kita bisa mulai dengan mempersempit hati kita div‘ scale Awalnya nol, lalu kembalikan ke ukuran aslinya (scale: 1) ada :hover (Gunakan transisi lagi):

#geminianimation {
  div {
    scale: 0;
    transition: 1s ease-in-out;
  }
  &:hover {
    div {
      scale: 1;
  }
}

Tahap Animasi 3

Sekarang, kami baik -baik saja Bisa Gunakan satu transition Sepertinya kami melakukan dua set terakhir, tetapi kami mungkin Seharusnya tidak Melakukan ini … yaitu, kecuali jika Anda ingin menangis air mata yang menyakitkan dan mengutuk hari Anda pertama kali mendengar tentang CSS … bukan berarti saya tahu dari pengalaman pribadi atau apa pun … haha ​​… haha.

Kunci Kunci CSS lebih cocok di sini, karena ada banyak negara di antara mereka yang membutuhkan beberapa transisi yang berbeda untuk didefinisikan dan diatur. Kerangka kerja utama lebih baik dalam menyelesaikan multi-rifle.

Apa yang pada dasarnya kami lakukan adalah menghidupkan antara berbagai bentuk variabel CSS yang telah didefinisikan sebagai bentuk yang dijepit. Browser akan menangani interpolasi antar bentuk, jadi yang kita butuhkan hanyalah memberi tahu CSS bentuk mana yang ingin kita potong di setiap tahap (atau “bagian”) dari kombinasi ini:

@keyframes shapeshift {
  0% { clip-path: var(--circle); }
  25% { clip-path: var(--flower); }
  50% { clip-path: var(--cylinder); }
  75% { clip-path: var(--hexagon); }
  100% { clip-path: var(--circle); }
}

Ya, kami dapat menggabungkan kerangka kerja kunci pertama dan terakhir (0% Dan 100%) Pergi ke langkah, tetapi kita perlu memisahkannya dalam sedetik, karena kita juga ingin menghidupkan rotasi pada saat yang sama. Kami mengatur rotasi awal ke 0turn Rotasi akhir 1turn Selama animasi berlanjut, ia dapat terus berputar dengan lancar:

@keyframes shapeshift {
  0% {
    clip-path: var(--circle);
    rotate: 0turn;
  }
  25% {
    clip-path: var(--flower);
  }
  50% {
    clip-path: var(--cylinder);
  }
  75% {
    clip-path: var(--hexagon);
  }
  100% {
    clip-path: var(--circle);
    rotate: 1turn;
  }
}

Catatan: Ya, turn Ini memang unit CSS, meskipun sering diabaikan.

Kami ingin animasi tetap halus ketika diinterpolasi di antara bentuk. Jadi, saya mengatur fungsi waktu animasi ease-in-out. Sayangnya, ini juga menurunkan rotasi di awal dan akhir rotasi. Namun, karena kami berdua mulai dan berakhir dengan bentuk lingkaran, rotasi melambat 0% dan melambat lagi karena masuk ke 100% tidak jelas – lingkaran terlihat seperti lingkaran terlepas dari rotasinya. Jika kita berakhir dalam bentuk yang berbeda, kita dapat melihat longgar, saya akan menggunakan dua set keyframe terpisah (satu untuk pemindahan bentuk dan satu untuk rotasi) dan kemudian panggil keduanya #geminianimation anak div .

#geminianimation:hover {
  div {
    animation: shapeshift 5s ease-in-out infinite forwards;
  }
}

Tahap Animasi 4

Artinya, kita masih membutuhkan set bingkai kunci lain, terutama untuk mengubah warna bentuk. Ingat bagaimana kami menetapkan gradien linier pada wadah wadah induk ::after pseudo, dan kemudian kami juga menambahkan pseudo width Dan height? Ini kodenya lagi:

#geminianimation div {
  width: 100%;
  height: 100%;
  clip-path: var(--flower);

  &::after {
    content: "";
    background: linear-gradient(135deg, #217bfe, #078efb, #ac87eb, #217bfe);
    width: 400%;
    height: 400%;
    position: absolute;
  }
}

Gradiennya sangat besar karena kami hanya menunjukkan sebagian sekaligus. Ini berarti kita bisa translate Gradien menggerakkan posisi gradien di atas beberapa frame kunci. 400% Ini dapat dibagi menjadi beberapa tempat dengan baik, sehingga kita dapat memindahkan gradien dengan tiga perempat dari ukurannya. Sejak orang tuanya #geminianimation divsudah berputar, kita tidak membutuhkan gerakan yang sangat indah untuk membuatnya terasa seperti warnanya berasal dari arah yang berbeda. Kami adil translate Ini linier dan rotasi menambah beberapa variabilitas pada arah penghapusan warna.

@keyframes gradientMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -75% -75%;
  }
}

Elaborasi terakhir

Mari kita ubah menjadi lingkaran, bukan bunga sebagai bentuk default. Ini menghaluskan hal -hal ketika interaksi hover menyebabkan animasi berhenti dan kembali ke posisi awalnya.

Di sana Anda memiliki:

Meringkaskan

Kami melakukannya! Apakah ini bagaimana Google melakukan hal yang sama? Mungkin tidak. Sejujurnya, saya tidak pernah memeriksa kode animasi karena saya ingin memprosesnya dari batu tulis bersih dan mencari tahu bagaimana saya akan melakukannya murni di CSS.

Inilah hal yang menyenangkan tentang tantangan seperti ini: ada berbagai cara untuk mencapai hal yang sama (atau sesuatu yang serupa) dan pendekatan Anda mungkin berbeda dari milik saya. Sangat menarik untuk melihat berbagai metode.

Ini membuat saya bertanya: Bagaimana Anda mendekati animasi tombol Gemini? Apakah Anda menganggap bahwa saya tidak memikirkannya?