数字孪生下的孪生风机，前端技术介绍

 

上一篇文章我们介绍了数字孪生，和该技术下孪生风机的诸多优点。本篇文章向大家介绍下孪生风机用了哪些前端技术？前端效果是如何实现的？

一、Canvas
简介
在web中，实现2D基本图形及动画效果，首先会想到使用canvas。例如上图，实现一个可以实时显示风向角变化的效果图。canvas非常灵活，能够很好地融合JavaScript代码并在浏览器内绘制华丽的图形，拥有多种绘制路径、形状、字符以及添加图像等方法。
面对各种复杂的图形及效果，我们可以采用canvas框架，例如Konva，它可以轻松的实现桌面应用和移动应用中的图形交互交互效果，可以高效的实现动画，变换， 节点嵌套， 局部操作，滤镜，缓存，事件等功能，不仅仅适用于桌面与移动开发， 还有更为广泛的应用。

实现
在实现动画实时变化效果时，如果每次风向发生改变，都需要重绘图形，效果显示难免有些单调。重新绘图的变化过程称为突变动画。

 

我们需要的是平滑的过渡效果，例如，风向角在上一时刻是36.89度，下一时刻是76.84度。动画效果由36.89度渐变到76.84度的平滑效果。

为避免突变动画的情况，我们需要在componentWillUpdate中监听角度参数rotation的变化，当有新的角度参数传入的时候，需要重新绘制图形并将新的参数传入。

代码如下：

componentWillUpdate(nextProps) {
    if (nextProps.rotation !== this.props.rotation) {
      this.layer.destroy()
      this.tween.destroy()
      this.drawWind(nextProps)
    }
  }
//旋转部分初始角度赋值为当前rotation。
 let lineGroup = new Konva.Group({
      x:radius,
      y:radius,
      rotation: this.props.rotation,
      //未变化时采用this.props值。动画处用nextProps
    })

//动画部分旋转角度赋值为新的rotation。
    this.tween = new Konva.Tween({
      node: lineGroup,
      easing: Konva.Easings.Linear,
      duration: 0.5,
      rotation: nextProps.rotation ? nextProps.rotation : nextProps.rotation === 0 ? 0 : this.props.rotation,
      onFinish: () => {
        this.tween.destroy()
      }
    });``

实现
风机模型加载完毕后，当鼠标移动到风机各个零部件