資訊專欄INFORMATION COLUMN
摘要：原作者效果內容是一個溫度顯示儀器，上方一個當前溫度顯示，下方還有一個溫度刻線。原教程使用了布局，給整個容器加上了的高度，讓在沒有內容的時候也能被沾滿。設置上部分占高度的，下部分為。溫度的數據要從的實例中獲取，然后進行一個輸出。
前言
所謂站在巨人的肩膀上學習，是因為這個例子是來自于一個來自于國外的“每周插件”的欄目的教程，所以我很嚴肅的說清楚這點！這篇文章是自己通過這個例子的學習后，的一些碎碎叨和筆記，請大家多支持原作者忽略我哈哈哈。
原教程地址：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圖像：
而這里波浪能跟著按鈕一起移動，其實就是把它們所在的整個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秒內對顏色進行漸變。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113547.html
摘要：模塊化與插件式的結構保持了核心引擎的輕量，包非常小基本上低于。在代碼中表示它會把元素初始化為。回調函數提供了豐富的回調函數來操作動畫效果。首先來創建一個的函數觸發回調函數，只需要添加下面這句代碼就可以了就可以了，非常簡單。 最近把GreenSock的一些知識以及一些開發技巧使用gitbook整理了一本在線的電子書，GreenSock電子書可以去看看，下面是一個基本入門的簡化版本，更詳細...
摘要：雖然沒有視覺效果，但這就是基本的值動畫。有專門的位置可以查詢緩動函數。另外，不要期望在不支持的瀏覽器上做動畫。是專業動畫庫，在大部分情況下，它也具備更好的動畫性能。 說到在網頁里創建動畫，你可能很快會想到jQuery的animate()方法，或者css3的animation和transition。現在，本文將介紹另一個web動畫的可選方案，GSAP。 GSAP的全名是GreenSock...
摘要：難度系數普通關鍵詞前言看到網站做的很炫，想要借鑒，發現主要是用的實現的，兼容不好，因此想著用實現下。實現思路根據參考網站的代碼，動物圖案是用實現的，第一時間想到了的另外對于轉場動畫，過渡動畫，找個自己熟悉的動畫庫實現就行了。 難度系數：普通關鍵詞：GSAP SVG 前言 看到species網站做的很炫，想要借鑒，發現主要是用css3的clip-path實現的，兼容不好，因此想著用js...
摘要：實現效果動畫分解燈光閃爍文字出現水流心電圖知識點可盡情騷擾歐巴了解基本的知識點寫在前面寫過第一篇文章后動畫案例一再回頭看發現代碼太多，根本沒耐心去看完。操作這里就不再贅述了，在動畫案例一中有說到轉文件。四段水流都是這種方式來移動。 實現效果 showImg(https://segmentfault.com/img/bVT51P?w=613&h=568); 動畫分解 1.燈光閃爍2.文字...
閱讀 3004·2021-10-12 10:12
閱讀 3052·2021-09-22 16:04
閱讀 3287·2019-08-30 15:54
閱讀 2602·2019-08-29 16:59
閱讀 2902·2019-08-29 16:08
閱讀 868·2019-08-29 11:20
閱讀 3492·2019-08-28 18:08
閱讀 647·2019-08-26 13:43
