嫦娥飞天动画简易版

前言

中秋佳节即将到来，除了赏月、恰月饼、吃团圆饭，我们这还有博饼的习俗。跑题了，回到本文，上古神话传说-嫦娥奔月，大家都知道，那我来实现个简单版的嫦娥奔月，祝大家中秋快乐，也符合中秋的意境。

简单的分析一下需求：需要一轮明月在夜空中，需要个漂亮的嫦娥，从远处飞到月亮。

实现嫦娥奔月

各部分代码都很简单，只是需要把它们结合起来使用才是一个完整的奔月效果。

实现一轮明月

这个比较简单,大家都会画圆，然后再给它个黄色背景。也就是来一个有长宽值的容器，然后设置个月亮色的背景，再设置圆角，就能实现。

效果：

代码：

<div class='moon'></div>
// css
 .moon {
    width: 500px;
    height: 500px;
    background: radial-gradient(rgb(196, 196, 60), rgb(240, 240, 9),           rgb(247, 247, 9));
    box-shadow: 0 0 40px 20px rgba(247, 247, 9, 0.5);
    border-radius: 250px;
    animation: yueliang 20s linear infinite;
  }

实现一嫦娥

我这里的嫦娥用了图片代替，所以实现也是较简单

实现个背景

原来我是想要个黑夜，带着星星的，发现好多人已经实现了，那我换个流星+星星的背景。(我猜大家比较喜欢看流星吧，之前收藏过这样的canvas动画)直接拿出来使用。

首先先实现个画布

  //获取canvas
  var stars = document.getElementById("stars");
  windowWidth = window.innerWidth; //当前的窗口的高度
  stars.width = windowWidth;
  stars.height = window.innerHeight;
  //获取context
  context = stars.getContext("2d");

星星

在画布中放一个小白点当做是星星。用Math.random实现一下位置随机，控制一下星星数量和范围。要有闪烁效果的话，就只改变颜色，实现小白点和小黑点之间切换即可。

//创建一个星星对象
var Star = function () {
  this.x = windowWidth * Math.random(); //横坐标
  this.y = 5000 * Math.random(); //纵坐标
  this.text = "."; //文本
  this.color = "white"; //颜色
  //产生随机颜色
  this.getColor = function () {
    var _r = Math.random();
    if (_r < 0.5) {
      this.color = "#333";
    } else {
      this.color = "white";
    }
  }
  //初始化
  this.init = function () {
    this.getColor();
  }
  //绘制
  this.draw = function () {
    context.fillStyle = this.color;
    context.fillText(this.text, this.x, this.y);
  }
}
//星星闪起来
function playStars() {
  for (var n = 0; n < starCount; n++) {
    arr[n].getColor();
    arr[n].draw();
  }

  setTimeout("playStars()", 100);
}

流星

绘制流星和使其移动，超出画布重头开始移动

  /****绘制流星***************************/
  this.draw = function () //绘制一个流星的函数
  {
    context.save();
    context.beginPath();
    context.lineWidth = 1; //宽度
    context.globalAlpha = this.alpha; //设置透明度
    //创建横向渐变颜色,起点坐标至终点坐标
    var line = context.createLinearGradient(this.x, this.y,
      this.x + this.width,
      this.y - this.height);
    //分段设置颜色
    line.addColorStop(0, "white");
    line.addColorStop(0.3, this.color1);
    line.addColorStop(0.6, this.color2);
    context.strokeStyle = line;
    //起点
    context.moveTo(this.x, this.y);
    //终点
    context.lineTo(this.x + this.width, this.y - this.height);
    context.closePath();
    context.stroke();
    context.restore();
  }
  this.move = function () {
    //清空流星像素
    var x = this.x + this.width - this.offset_x;
    var y = this.y - this.height;
    context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
    //         context.strokeStyle="red";
    //         context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
    //重新计算位置，往左下移动
    this.countPos();
    //透明度增加
    this.alpha -= 0.002;
    //重绘
    this.draw();
  }

加一些动画

上面已经有了星星，流星背景然后又有嫦娥和月亮，这时候要让嫦娥动起来。我这里写了两个animation动画用来实现奔月的效果。

嫦娥位移，从右下角移动到月亮位置

  @keyframes benyue {
    0% {
      bottom: 0;
      right: 0;
      transform: scale(1.2)
    }

    50% {
      bottom: 20%;
      right: 20%;
      transform: scale(0.8)
    }

    100% {
      bottom: 40%;
      right: 40%;
      transform: scale(0.4)
    }
  }

月亮大小改变动画，使月亮配合着变大变亮

  @keyframes yueliang {
    0% {
      transform: scale(0.5)
    }

    100% {
      transform: scale(1.2)
    }

  }

实现奔月

上面那些元素搞定，一个嫦娥奔月就已经完成了

完整代码自取

• github代码地址

• gitee代码地址

小结

这只是一个粗糙版本，还有很多需要优化的地方，比如给嫦娥姐姐加个弧线运动曲线，压缩一下图片...，不过可能需要更多时间，后续可能会进行优化，下班才开始实现这个嫦娥奔月，现在还没吃晚饭，身为淦饭人，先去淦饭了！

中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！

中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！

中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！

如果你还有想补充或者说明的欢迎留言评论。

熟能生巧(Practice make perfect!)。