[导弹打飞机H5动画制作] 导弹每次飞行的随机路线制作

关键词:引导型动画,随机

准备工作

先用AnimateCC制作一个路线固定的引导层动画，然后,利用下方步骤添加随机路线功能。

第一步:检测引导层插件是否具备,如果没有手工添加

createjs.MotionGuidePlugin.install();

第二步:增加全局变量

var fValue=0;
var iOddEven =0;
var missileObj=null;

第三步:填写 第一帧 代码

if (missileObj)
			stage.removeChild(missileObj);
			missileObj = new lib.flyingSymbol();
		stage.addChild(missileObj);	
		missileObj.setTransform(76, 418.65, 0.4419, 0.3569, 90, 0, 0, 95.5, 29);
		console.log(fValue)
		fValue = Math.random() * 200;
		iOddEven = Math.round(Math.random() * 100);
		if (iOddEven % 2 == 0)
			fValue = fValue * (-1);
		cjs.Tween.get(missileObj, {
			loop: true,
			override: true,
			useTicks:true
 
		}).to({
			rotation: 180,
			guide: {
				path: [76.1, 418.6, 78.1, 326.7, 80.1, 234.7, 79.7, 226.3, 80.9, 213.6, 83.4, 188.3, 91.6, 167, 103.1, 137.1, 124.5, 119.5, 151.3, 97.5, 192.1, 96.1, 266.2, 93.6 + fValue, 350.5 + fValue, 96 + fValue, 392.7 + fValue, 97.1 + fValue, 420 + fValue, 98.8 + fValue, 454.7 + fValue, 98.8 + fValue, 489.4 + fValue, 98.8 + fValue, 557 + fValue, 103.2 + fValue, 624.5 + fValue, 107.6 + fValue, 654.2 + fValue, 110.6 + fValue, 746.7 + fValue, 121.4 + fValue, 824 + fValue, 130.8 + fValue, 901.2 + fValue, 140.1 + fValue, 994.5 + fValue, 152.1 + fValue, 1087.8 + fValue, 164.1 + fValue, 1165.8 + fValue, 172.8 + fValue, 1243.8 + fValue, 181.4 + fValue, 1373.1 + fValue, 200 + fValue, 1502.4 + fValue, 218.6 + fValue],
				orient: 'fixed'
			}
		}, 49).wait(1);
		stage.update();

 第四步:最后一帧代码

this.gotoAndPlay(0);

第五步:发布后,修改Html5文件

AnimateCC2023 自动产生的导弹层代码全部注释掉.第三步的path数据实际为自动产生的代码层代码的复制改造版。

完整资源下载:

https://download.csdn.net/download/vinglemar/88385673

最后小结

先用Animate CC制作一个导弹引导动画,发布成Html5 canvas后,再手工修改Html5文件。