vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果

上一节,我们实现了选取建筑物后,建筑物以半透明特效跟随鼠标移动的效果。这一节,我们要实现的是,当用户点击鼠标,将建筑物投放到指定区域后。建筑物的生成不能一撮而就,而是有要像红警或是星际那样,建筑物在最终生成时,有一连续的转变过程,经过一个动态流程的转变后才变成最终形态。本节代码完成后,我们会取得如下效果:

vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果_第1张图片
这里写图片描述

当用户点击后,建筑物开始形态如上图,经过大概几秒后,建筑物形态变成下面的样子:
[图片上传失败...(image-2cd91a-1513066426002)]

然后再经过几秒,建筑物变成他本来的模样:


vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果_第2张图片
这里写图片描述

接下来我们看看如何实现这种效果。首先,我们先规定建筑物在生成时处于每个阶段的时间,因此在Constant.vue中添加如下代码:


                    
                    

你可能感兴趣的:(vue+webpack实现精美游戏设计:实现建筑物的渐变生成效果)