iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

做一個面試官無法拒絕的sideproject,當一個全能的前端系列 第 8

DAY8 - 用ngx-lottie動畫製作一個吸引人的首頁

一個網站要吸引人,除了要有適當的排版,還要有吸引人的文字與豐富的動畫,讓人的目光不由自主地佇足想要瀏覽。

首頁可以說是一個網站的門面,好的首頁會讓人想要繼續看下去,不好的首頁只會讓人馬上上一頁。因此怎麼設計一個吸引人的首頁可說是一門學問。

通常設計的工作會落在UI與UX身上,他們會研究與設計,如何符合使用者需求,與製做精美的首頁。 工程師只要負責實現就好 ,幾乎都不必去煩惱設計過程,而現在我們必須自己發想、自己設計、自己實作。

第一版首頁 - 慘烈的開始偽無印良品風

先給大家看一下負面教材,這是第一版首頁。

由於沒有設計背景,也不懂得如何如何依資訊量的不同,善用不同的字級與粗細,來分類不同重要程度的資訊。

Imgur

可以看到這個首頁有很大的缺點

  • 左上角的的標題只是暴力地加粗語放大,佔滿整個頁首
  • 標語非常口號,看完之後對於網站想要做什麼沒有任何幫助,也沒有留下任何印象
  • 一開始想要模仿無印良品風格,簡單的背景搭配,搭配一段文字。展現靜謐的力量,沒想到畫虎不成反類犬,不但看起來空洞還沒什麼質感

第二版首頁 - 加上動畫與重新排版做出滿意的首頁

經過第一版慘烈的首頁之後,開始痛定思痛想想到底缺乏什麼。想一想之後,原來是 缺乏對美的認識

Imgur

加入動畫- 使用lottie

什麼是 lottie

lottie 是由airbnb 所提出的動畫解決方案,讓設計師可以輕鬆設計、工程是可以輕鬆實現,可以彌平設計師與工程師之間溝通的成本。

lottie 解決了工程師什麼問題

在過往,網站要加入動畫,有幾種方法

  • 使用圖片,快速播放,這個也是動畫的原理,但是要管理很多圖片,增加大量的流量,還要控制播放流程撰寫額外程式碼管理
  • 使用GIF,很流行的使用方法。但是GIF為了輕量,通常會壓縮,讓圖片有些許失真。而且圖片尺寸固定,放大之後就會有明顯之珍

https://ithelp.ithome.com.tw/upload/images/20210923/20120107OUA05FgYkV.png

使用lottie解決以上問題,lottie使用JSON 檔案去定義圖案與動畫,所以可以非常輕量,而且產生出來會是向量檔案,因此不論什麼尺寸都不會失真。再來動畫效果可以使用程式碼去定義,修改的話就只要微調參數就好,不必再麻煩設計師重新出圖,降低很多溝通來回的成本。

lottie 解決了設計師什麼問題

根據設計師的說法,設計師使用 premiere 設計完畢之後,直接輸出就好,不必再擔心相容性或是會跑掉的問題,對設計師來說也方便很多

取得 lottie 檔案

就算有一個很不錯的解決方案,相信工程師還是不會設計動畫檔案。沒關係,lottie 也有提供免費的檔案提供使用

https://ithelp.ithome.com.tw/upload/images/20210923/20120107ci0fKfYz9B.png

點擊喜歡的圖案之後,裡面就有下載的按鈕,可以把檔案下載下來

https://ithelp.ithome.com.tw/upload/images/20210923/20120107Plo91vZgmv.png

安裝 ngx-lottie

ngx-lottie 是 lottie 的 angular版本,安裝非常簡單

npm i lottie-web ngx-lottie

安裝完畢之後,將 lottie模組引入 angular

app.module.ts

import { NgModule } from '@angular/core';
import { LottieModule } from 'ngx-lottie';
import player from 'lottie-web';

// Note we need a separate function as it's required
// by the AOT compiler.
export function playerFactory() {
  return player;
}

@NgModule({
  imports: [LottieModule.forRoot({ player: playerFactory })],
})
export class AppModule {} 

app.component.ts 設定剛剛加入的日落圖案

iconOpts: AnimationOptions = {
    path: '/assets/77378-sunset.json',
    autoplay: true,
    loop: true,
    initialSegment: [10, 88]
  };

app.component.html

<nb-layout>
  <nb-layout-header fixed> hello-angular </nb-layout-header>

  <nb-layout-column>
   
    <div class="container">
      <div class="row">
        <div class="col">
 <!-- 加入 lottie 檔案 -->
          <ng-lottie
            [options]="iconOpts"
            width="100%"
            height="100%"
          ></ng-lottie>
        </div>
        <div class="col">區塊 2/3</div>
        <div class="col">區塊 3/3</div>
      </div>
    </div>
  </nb-layout-column>

  <nb-layout-footer fixed> </nb-layout-footer>
</nb-layout>

加入之後,打開頁面,就可以看到動畫這麼簡單就加入囉

https://ithelp.ithome.com.tw/upload/images/20210923/20120107KeQ74NZOfP.png

以上就是最簡單的版本加入動畫的方法,lottie 的威力不只有這樣,還可以控制要如何播放、要不要重複播放、只播放哪個段落、播放的速度等等的細節,有興趣的可以去看看網站寫的參數,微調出自己喜歡的效果


上一篇
DAY7 - 安裝 bootstrap
下一篇
DAY9 - 製作多彩文字與排版
系列文
做一個面試官無法拒絕的sideproject,當一個全能的前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言