学习小结 | Vue+TweenMax做一个温度计

smartlion 发布于2019-08-29 16:08 / 2900人阅读

摘要：原作者效果内容是一个温度显示仪器，上方一个当前温度显示，下方还有一个温度刻线。原教程使用了布局，给整个容器加上了的高度，让在没有内容的时候也能被沾满。设置上部分占高度的，下部分为。温度的数据要从的实例中获取，然后进行一个输出。

前言

所谓站在巨人的肩膀上学习，是因为这个例子是来自于一个来自于国外的“每周插件”的栏目的教程，所以我很严肃的说清楚这点！这篇文章是自己通过这个例子的学习后，的一些碎碎叨和笔记，请大家多支持原作者忽略我哈哈哈。

原教程地址：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秒内对颜色进行渐变。

GPU云服务器云服务器 javascript学习小结 js做温度 TweenMax vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113547.html

GreenSock (TweenMax) 极简入门指南

摘要：模块化与插件式的结构保持了核心引擎的轻量，包非常小基本上低于。在代码中表示它会把元素初始化为。回调函数提供了丰富的回调函数来操作动画效果。首先来创建一个的函数触发回调函数，只需要添加下面这句代码就可以了就可以了，非常简单。最近把GreenSock的一些知识以及一些开发技巧使用gitbook整理了一本在线的电子书，GreenSock电子书可以去看看，下面是一个基本入门的简化版本，更详细...

hoohack 2019-08-20 12:20 评论0 收藏0
GSAP - 专业的 Web 动画库

摘要：虽然没有视觉效果，但这就是基本的值动画。有专门的位置可以查询缓动函数。另外，不要期望在不支持的浏览器上做动画。是专业动画库，在大部分情况下，它也具备更好的动画性能。说到在网页里创建动画，你可能很快会想到jQuery的animate()方法，或者css3的animation和transition。现在，本文将介绍另一个web动画的可选方案，GSAP。 GSAP的全名是GreenSock...

MASAILA 2019-08-19 18:25 评论0 收藏0
species-in-pieces网站动效的JS实现

摘要：难度系数普通关键词前言看到网站做的很炫，想要借鉴，发现主要是用的实现的，兼容不好，因此想着用实现下。实现思路根据参考网站的代码，动物图案是用实现的，第一时间想到了的另外对于转场动画，过渡动画，找个自己熟悉的动画库实现就行了。难度系数：普通关键词：GSAP SVG 前言看到species网站做的很炫，想要借鉴，发现主要是用css3的clip-path实现的，兼容不好，因此想着用js...

galois 2019-08-22 16:25 评论0 收藏0
GreenSock (TweenMax) 动画案例(二)

摘要：实现效果动画分解灯光闪烁文字出现水流心电图知识点可尽情骚扰欧巴了解基本的知识点写在前面写过第一篇文章后动画案例一再回头看发现代码太多，根本没耐心去看完。操作这里就不再赘述了，在动画案例一中有说到转文件。四段水流都是这种方式来移动。实现效果 showImg(https://segmentfault.com/img/bVT51P?w=613&h=568); 动画分解 1.灯光闪烁2.文字...

Michael_Ding 2019-08-20 19:06 评论0 收藏0