【动画】想怎么动就怎么动，在我的地盘你得听我的

2022-05-06 107

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： transition、animation是CSS3中制作DOM元素动画的重要属性，但其仅仅只能应对一些常规的需求，针对非DOM元素的属性过渡时就显得无能为力了，所以接下来通过js简单实现其动画原理（说白了也就是通过JavaScript间接操作目标过渡属性值，每隔一段时间更新一次）让动画变得更加灵活可控，而不是对可恶的pm说这效果有啥用、砍掉这类的话，当然还得看需求使用场景

先给个demo：针对这样的需求怎么实现呢？

纯css显然已无法做到（图片有点失真，~~在线众筹换mac~~, 意思到位了就行~）

简单概述下上面的gif，布局采用了d3实现，针对这种需求常规的可视化图形插件(如ECharts、ichartjs等)，通过简单的配置可能已无法做到，就算能实现灵活度也必然受到了限制。熟悉d3的同学实现起来也不会太复杂，图中主要是数字的变化以及弧形的颜色渐变的效果应如何实现，以及整体的联动。下面通过js来描述动画原理，使得更易于掌握css过渡transition及动画animation

关于transition和animation属性介绍有很多文章参考一篇CSS3的动画属性

接下来就使用js简单实现一个让div元素的width属性从20px过渡到200px的动画效果

html代码

<div id="motionPath"></div>

css代码

#motionPath {
  width: 20px;
  height: 100px;
  color:#333;
  background-color: red;
}

在实现之前，先简单了解下贝塞尔曲线的原理参考贝塞尔曲线扫盲，了解了原理之后推荐一个实现三次贝塞尔曲线的js库CubicBezier，也是下文中使用的动画函数，等价CSS transition-timing-function、animation-timing-function

首先定义过渡动画的几个参数：

paused：控制动画暂停标志

duration：动画过渡时间

easing：动画过渡曲线，配置常规的动画过渡曲线参考缓动函数

update：动画更新时的回调函数

var BezierEasing = require('bezier-easing')
var tween = {
  paused: false,
  duration: 6000,
  easing: BezierEasing(0, 0, 1, 0.5),
  update: function (v) {
    // anim 是下文定义的一个描述动画的对象
    anim.target.innerHTML = v
  }
}

定义一个动画开始函数play()

var raf = null
function play() {
  raf = requestAnimationFrame(function (t) {
    step(t);
  })
  function step(t) {
    if (!tween.paused) {
      setInstanceProgress(t);
      play();
    } else {
      raf = cancelAnimationFrame(raf);
    }
  }
}

step() 为动画的入口，这里使用requestAnimationFrame关键帧动画函数，当然也可用setTimeout来模拟实现，但更推荐使用requestAnimationFrame，推荐阅读深入理解requestAnimationFrame。在每一个动画关键帧周期内会调用setInstanceProgress() 函数，下面来看下setInstanceProgress() 函数的实现

function setInstanceProgress(engineTime) {
  var insTime = engineTime;
  if (insTime > tween.duration) {
    tween.paused = true;
  }
  var currentTime = Math.min(Math.max(insTime, 0), tween.duration);
  setAnimationsProgress(currentTime);
}

setInstanceProgress() 函数对动画时间进行了修正，同时会判断动画是否应该结束，并将修正的时间传给了setAnimationsProgress() 函数，同样再来看看setAnimationsProgress()函数的实现，我们知道动画其实是“位移”关于“时间”的函数：s=f(t)将动画函数与时间关联起来，计算 t 时刻动画属性值 f(t)

接下来再定义一个描述动画的对象如下各参数的含义：

target：过渡的目标对象，当前是div元素

type：过渡的目标属性类型，元素的width归并于css

property：目标过渡的属性名，也就是元素的宽width

fromNumber：过渡的属性的起始值20px

toNumber：过渡属性的结束值200px

var anim = {
  target: document.getElementById('motionPath'),
  type: 'css',
  property: 'width',
  fromNumber: 20,
  toNumber: 200
}

setAnimationsProgress() 函数

function setAnimationsProgress(insTime) {
  var elapsed = insTime / tween.duration;
  var eased = tween.easing(elapsed);
  var value = anim.fromNumber + (eased * (anim.toNumber - anim.fromNumber))
  setProgressValue[anim.type](anim.target, anim.property, value);
  tween.update(value);
}

setAnimationsProgress() 函数也就是动画的核心，把时间和过渡函数相结合，计算t时刻对应的value值，再把value值设置到过渡的目标对象属性中去，接下来就是setProgressValue的实现，针对DOM元素，设置width属性也就是设置style对应的属性

var setProgressValue = {
  css: function (t, p, v) {
    t.style[p] = v + 'px'
  },
  plainkey: function (t, p, v) {
    t[p] = v
  }
}

最后只需要运行play()函数，一个简单的动画也就实现了，效果如下：

如果说我们要过渡一个对象plain={key: 0}中的key属性值从 0 到 100 是不是修改一下anim参数就可以了，如下:

var plain = {key: 0}
var anim = {
  target: plain,
  type: 'plainkey',
  property: 'key',
  fromNumber: 0,
  toNumber: 200
}

key值的变化我就不给效果图了，总之通过这样简单的配置就解决了css不能实现类似的需求了，文章开头所说的数字变化的效果就完美的给解决了

最后一个问题了，文章开头的扇形的颜色渐变效果又应该如何实现呢，其实也很简单扇形是通过多份小扇形拼接而成的，然后设置相应的颜色，那每个小扇形应该设置什么样色来达到渐变的效果呢？

举例：从颜色#e8cf22 变化到 #48b532，应用上面所讲的过渡动画原理，#e8cf22对应的rgb格式为rgb(232, 207, 34)，#48b532对应的rgb格式为rgb(72, 181, 50)，那么分别对R、G、B各值按照对应的起始值和对应的终点值进行过渡(R：从232到72，G：从207到181，B：从34到50)，过渡过程中再次组合对应的rgb值就是其过渡对应的颜色值，这就是颜色的过渡渐变原理，下面使用animejs这个库来实现，原理是一样的

html代码

<div id="motionPath"></div>

css代码

#motionPath {
  color: blue;
  height: 100px;
}

js代码

var oDev = document.getElementById('motionPath')
anime({
  targets: '#motionPath',
  duration: 6000,
  backgroundColor: ['rgb(232, 207, 34)', 'rgb(72, 181, 50)']
  easing: 'easeInOutQuad',
  update: function (instance) {
    oDev.innerHTML = instance.animations[0].currentValue;
  }
});

效果如下：

综上：了解了js如何实现动画之后，接下来看个使用css3 animation的例子，效果图就不粘出来了。如下示例代码：

// div
<div class="animation"></div>
// css
.animation
{
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: myfirst 4s;
  animation-timing-function: cubic-bezier(0.42,0,0.58,1);
}
@keyframes myfirst
{
  0%   {background:red; left:0px; top:0px;}
  25%  {background:yellow; left:200px; top:0px;}
  50%  {background:blue; left:200px; top:200px;}
  75%  {background:green; left:0px; top:200px;}
  100% {background:red; left:0px; top:0px;}
}
/*
    效果表现为：让一个长宽都是100px的div元素，在不同的时间阶段，结合过渡函数cubic-bezier(0.42,0,0.58,1)来进行颜色和位置的过渡变化，
 那么我想问0%、25%、50%、75%、100%指什么呢，过渡函数cubic-bezier(0.42,0,0.58,1)是应用到整个4s的过渡周期还是每个阶段应用一次完整的过渡？ 
 答案：n%指的是所占过渡时间duration的百分数，0%~25%也就是从0s到1s阶段，然后结合时间t关于过渡函数cubic-bezier(0.42,0,0.58,1)来计算相应的位置点值和颜色值
*/