學習小結 | Vue+TweenMax作一個溫度計

前言

所謂站在巨人的肩膀上學習，是由於這個例子是來自於一個來自於國外的「每週插件」的欄目的教程，因此我很嚴肅的說清楚這點！這篇文章是本身經過這個例子的學習後，的一些碎碎叨和筆記，請你們多支持原做者忽略我哈哈哈。

原教程地址： Building an Animated Slider — WotW。
原做者：Eder Diaz

效果

內容是一個溫度顯示「儀器」，上方一個當前溫度顯示，下方還有一個溫度刻線。拖動下面帶有溫度計圖標的按鈕，就能夠改變當前的溫度，而背景的顏色也會隨着溫度的改變發生相應的提示改變。

模仿敲完的效果：https://codepen.io/mochilee/p...

佈局思路

基礎佈局
總體上說它能夠分爲上和下兩個部分，因此咱們用一個upper-container和lower-container來做爲基礎。
原教程使用了Grid佈局，給整個容器加上了100vh的高度，讓div在沒有內容的時候也能被沾滿。Grid設置上部分佔高度的3/4，下部分爲1/4。

display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 1fr;
  height: 100vh;

upper-container部分就是普通的文字居中，lower-container部分的刻度線是一個ul列表，除了數據外每一個數字還要再對應一個豎線。溫度的數據要從Vue的實例中獲取，而後進行一個v-for輸出。

波浪的繪製
波浪實質上是一個SVG圖像：

<svg width="150" height="30" viewBox="0 0 150 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M74.3132 0C47.0043 2.44032e-05 50.175 30 7.9179 30H144.27C99.4571 30 101.622 -2.44032e-05 74.3132 0Z" transform="translate(-7.38794 0.5)" fill="#12132C"/>

而這裏波浪能跟着按鈕一塊兒移動，其實就是把它們所在的整個div進行了一個translate平移，就給人感受好像是它在變形。

動做解析

整個效果最核心的就是隨着鼠標對按鈕的移動，有幾個地方會發生改變：

• 按鈕和波浪的位置發生了改變
• 當前溫度發生了改變
• 背景顏色發生了改變

拖拽效果應該不少人都作過啦，咱們要經過在刻度線上偏移的量，對應到顏色和當前溫度，因此咱們應該要有如下幾個數據來記錄：

• dragging：是否正在拖拽
• initialMouseX: 拖拽開始鼠標的X位移
• sliderX: 按鈕和波浪當前的X位移
• initialSliderX: 按鈕和波浪初始的X位移
• gradientStart: 漸變開始的顏色
• gradientEnd: 漸變結束的顏色

TweenMax

是一個JS動畫庫，官網在這裏：
https://greensock.com/tweenmax
https://greensock.com/tweenlite

TweenMax extends TweenLite, adding many useful (but non-essential)
features like repeat(), repeatDelay(), yoyo(), updateTo(), and more.

TweenMax包含了TweenLite的內容，整個效果達成的話這裏只用到了一個：

TweenLite.to(this, 0.7, {
  'gradientStart': targetGradient.start,
  'gradientEnd': targetGradient.end
})

動畫在0.7秒內對顏色進行漸變。