亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

學(xué)習(xí)小結(jié) | Vue+TweenMax做一個溫度計

smartlion / 3009人閱讀

摘要：原作者效果內(nèi)容是一個溫度顯示儀器，上方一個當前溫度顯示，下方還有一個溫度刻線。原教程使用了布局，給整個容器加上了的高度，讓在沒有內(nèi)容的時候也能被沾滿。設(shè)置上部分占高度的，下部分為。溫度的數(shù)據(jù)要從的實例中獲取，然后進行一個輸出。

前言

所謂站在巨人的肩膀上學(xué)習(xí)，是因為這個例子是來自于一個來自于國外的“每周插件”的欄目的教程，所以我很嚴肅的說清楚這點！這篇文章是自己通過這個例子的學(xué)習(xí)后，的一些碎碎叨和筆記，請大家多支持原作者忽略我哈哈哈。

原教程地址：Building an Animated Slider?—?WotW。 
原作者：Eder Diaz
效果

內(nèi)容是一個溫度顯示“儀器”，上方一個當前溫度顯示，下方還有一個溫度刻線。拖動下面帶有溫度計圖標的按鈕，就可以改變當前的溫度，而背景的顏色也會隨著溫度的改變發(fā)生相應(yīng)的提示改變。

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

布局思路

基礎(chǔ)布局
整體上說它可以分為上和下兩個部分，所以我們用一個upper-container和lower-container來作為基礎(chǔ)。
原教程使用了Grid布局，給整個容器加上了100vh的高度，讓div在沒有內(nèi)容的時候也能被沾滿。Grid設(shè)置上部分占高度的3/4，下部分為1/4。

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

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

波浪的繪制
波浪實質(zhì)上是一個SVG圖像：

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

動作解析

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

按鈕和波浪的位置發(fā)生了改變

當前溫度發(fā)生了改變

背景顏色發(fā)生了改變

拖拽效果應(yīng)該很多人都做過啦，我們要通過在刻度線上偏移的量，對應(yīng)到顏色和當前溫度，所以我們應(yīng)該要有以下幾個數(shù)據(jù)來記錄：

dragging：是否正在拖拽

initialMouseX: 拖拽開始鼠標的X位移

sliderX: 按鈕和波浪當前的X位移

initialSliderX: 按鈕和波浪初始的X位移

gradientStart: 漸變開始的顏色

gradientEnd: 漸變結(jié)束的顏色

TweenMax

是一個JS動畫庫，官網(wǎng)在這里：
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的內(nèi)容，整個效果達成的話這里只用到了一個：

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

動畫在0.7秒內(nèi)對顏色進行漸變。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/113547.html

相關(guān)文章

  • GreenSock (TweenMax) 極簡入門指南

    摘要：模塊化與插件式的結(jié)構(gòu)保持了核心引擎的輕量，包非常小基本上低于。在代碼中表示它會把元素初始化為?；卣{(diào)函數(shù)提供了豐富的回調(diào)函數(shù)來操作動畫效果。首先來創(chuàng)建一個的函數(shù)觸發(fā)回調(diào)函數(shù)，只需要添加下面這句代碼就可以了就可以了，非常簡單。 最近把GreenSock的一些知識以及一些開發(fā)技巧使用gitbook整理了一本在線的電子書，GreenSock電子書可以去看看，下面是一個基本入門的簡化版本，更詳細...

    hoohack 評論0 收藏0

  • GSAP - 專業(yè)的 Web 動畫庫

    摘要：雖然沒有視覺效果，但這就是基本的值動畫。有專門的位置可以查詢緩動函數(shù)。另外，不要期望在不支持的瀏覽器上做動畫。是專業(yè)動畫庫，在大部分情況下，它也具備更好的動畫性能。 說到在網(wǎng)頁里創(chuàng)建動畫，你可能很快會想到j(luò)Query的animate()方法，或者css3的animation和transition?，F(xiàn)在，本文將介紹另一個web動畫的可選方案，GSAP。 GSAP的全名是GreenSock...

    MASAILA 評論0 收藏0

  • species-in-pieces網(wǎng)站動效的JS實現(xiàn)

    摘要：難度系數(shù)普通關(guān)鍵詞前言看到網(wǎng)站做的很炫，想要借鑒，發(fā)現(xiàn)主要是用的實現(xiàn)的，兼容不好，因此想著用實現(xiàn)下。實現(xiàn)思路根據(jù)參考網(wǎng)站的代碼，動物圖案是用實現(xiàn)的，第一時間想到了的另外對于轉(zhuǎn)場動畫，過渡動畫，找個自己熟悉的動畫庫實現(xiàn)就行了。 難度系數(shù)：普通關(guān)鍵詞：GSAP SVG 前言 看到species網(wǎng)站做的很炫，想要借鑒，發(fā)現(xiàn)主要是用css3的clip-path實現(xiàn)的，兼容不好，因此想著用js...

    galois 評論0 收藏0

  • GreenSock (TweenMax) 動畫案例(二)

    摘要：實現(xiàn)效果動畫分解燈光閃爍文字出現(xiàn)水流心電圖知識點可盡情騷擾歐巴了解基本的知識點寫在前面寫過第一篇文章后動畫案例一再回頭看發(fā)現(xiàn)代碼太多，根本沒耐心去看完。操作這里就不再贅述了，在動畫案例一中有說到轉(zhuǎn)文件。四段水流都是這種方式來移動。 實現(xiàn)效果 showImg(https://segmentfault.com/img/bVT51P?w=613&h=568); 動畫分解 1.燈光閃爍2.文字...

    Michael_Ding 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<