前言所谓在巨人肩膀上学习，是因为这个例子来自国外“每周插件”专栏的一个教程，所以我说的很认真，要注意这一点！这篇文章是我学习完这个例子后的一些手抄报和笔记。请支持原作者，不要理我哈哈哈。原教程地址：BuildinganAnimatedSlider—WotW。原作者：EderDiaz效果内容是一个温度显示“仪表”，上方是当前温度显示，下方是温度标线。拖动下方带有温度计图标的按钮可以改变当前温度，背景颜色也会随着温度的变化而相应变化。模仿敲击的效果：https://codepen.io/mochilee/p....原教程使用的是Grid布局，给整个容器加了100vh的高度，这样即使没有内容也能填满div。Grid将上部设置为高度的3/4，将下部设置为1/4。显示：网格；网格模板列：1fr；网格模板行：3fr1fr；高度：100vh；上容器部分是普通文本的中心，下容器部分的刻度线是一个ul列表，除了数据之外，每个数字还对应一个竖条。从vue实例中获取温度数据，然后进行v-for输出。波浪图波浪本质上是一个SVG图像：这里的波浪是可以随着按钮移动的，其实就是把它们所在的整个div平移平移，让人感觉好像在变形。动作分析整个效果的核心是随着鼠标移到按钮上，有几个地方会发生变化：按钮的位置和波浪发生了变化当前温度发生了变化背景颜色发生了变化拖动效果应该通过很多人对吧，我们需要通过刻度线上的偏移量来对应颜色和当前温度，所以我们应该有如下数据记录：draggingstartssliderX:按钮和波浪的当前X位移initialSliderX:按钮和波浪的初始X位移gradientStart:渐变开始颜色gradientEnd:渐变结束颜色TweenMax是一个JS动画库，官网在这里：https://greensock.com/tweenmaxhttps://greensock.com/tweenliteTweenMax扩展了TweenLite，添加了许多有用的（但不是必需的）功能，如repeat()、repeatDelay()、yoyo()、updateTo()等。TweenMax包含了TweenLite的内容，实现了整个效果的话，这里只用了一个：TweenLite.to(this,0.7,{'gradientStart':targetGradient.start,'gradientEnd':targetGradient.end})动画在0.7秒内渐变颜色。
