成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

smartlion / 2924人閱讀

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

前言

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

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

內(nèi)容是一個溫度顯示“儀器”，上方一個當(dāng)前溫度顯示，下方還有一個溫度刻線。拖動下面帶有溫度計(jì)圖標(biāo)的按鈕，就可以改變當(dāng)前的溫度，而背景的顏色也會隨著溫度的改變發(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的實(shí)例中獲取，然后進(jìn)行一個v-for輸出。

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

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

動作解析

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

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

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

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

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

dragging：是否正在拖拽

initialMouseX: 拖拽開始鼠標(biāo)的X位移

sliderX: 按鈕和波浪當(dāng)前的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)容，整個效果達(dá)成的話這里只用到了一個：

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.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電子書可以去看看，下面是一個基本入門的簡化版本，更詳細(xì)...

    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實(shí)現(xiàn)

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

    galois 評論0 收藏0

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

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

    Michael_Ding 評論0 收藏0

發(fā)表評論

0條評論

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