嫦娥飞天动画简易版
前言
中秋佳节即将到来，除了赏月、恰月饼、吃团圆饭，我们这还有博饼的习俗。跑题了，回到本文，上古神话传说-嫦娥奔月，大家都知道，那我来实现个简单版的嫦娥奔月，祝大家中秋快乐，也符合中秋的意境。
简单的分析一下需求：需要一轮明月在夜空中，需要个漂亮的嫦娥，从远处飞到月亮。
实现嫦娥奔月
各部分代码都很简单，只是需要把它们结合起来使用才是一个完整的奔月效果。
实现一轮明月
这个比较简单,大家都会画圆，然后再给它个黄色背景。也就是来一个有长宽值的容器，然后设置个月亮色的背景，再设置圆角，就能实现。
效果：
代码：
<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)
}
}
实现奔月
上面那些元素搞定，一个嫦娥奔月就已经完成了
完整代码自取
小结
这只是一个粗糙版本，还有很多需要优化的地方，比如给嫦娥姐姐加个弧线运动曲线，压缩一下图片...，不过可能需要更多时间，后续可能会进行优化，下班才开始实现这个嫦娥奔月，现在还没吃晚饭，身为淦饭人，先去淦饭了！
中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！
中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！
中秋将至，愿君月圆人圆事事圆满，愿君爱情甜蜜生活美满！！！
如果你还有想补充或者说明的欢迎留言评论。
熟能生巧(Practice make perfect!)。
