TweenMax实现大山怪物出没动画效果代码
代码语言:html
所属分类:动画
代码描述:TweenMax实现大山怪物出没动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> body { margin: 0; background: #000000; overflow: hidden; } #canvas { position: absolute; margin: auto; width: 600px; height: 600px; top: 0; bottom: 0; left: 0; right: 0; background: #000; } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> </head> <body style=""><canvas id="canvas" width="600" height="600"></canvas> <script> var mViewWidth = 0, mViewHeight = 0, mCanvas = document.getElementById("canvas"), mCtx; var mRootDisplayNode; var mTrees = []; var mTreeImage = '//repo.bfw.wiki/bfwrepo/images/animat/tree.png', mMonsterImage = '//repo.bfw.wiki/bfwrepo/images/animat/monster-01.png'; var mUrls = [ mTreeImage, mMonsterImage ]; var mImages = {}; var mLoadedCount = 0; mUrls.forEach(function(url) { var img = mImages[url] = document.createElement('img'); img.onload = function() { if (++mLoadedCount === mUrls.length) { init(); } }; img.crossOrigin = 'Anonymous'; img.src = url; }); function init() { initCanvas(); createMist(); createTrees(300); createMist(); createTrees(250); createMist(); createMonster(); createTrees(160); createMist(); createTrees(120); createMist(); createTrees(90); createMist(); createTrees(70); requestAnimationFrame(loop); } function initCanvas() { mViewWidth = mCanvas.width = mCanvas.clientWidth; mViewHeight = mCanvas.height = mCanvas.clientHeight; mCtx = mCanvas.getContext('2d'); mRootDisplayNode = new Node(); } function createMist() { var mist = new Node(new Mist(mViewWidth * 1.2, mViewHeight * 1.2)); var range = randomRange(0, 100); mist.x = -mViewWidth * 0.1; mist.y = -mViewHeight * 0.1; TweenMax.fromTo(mist, randomRange(6, 8), {y:'-='+range}, {y:'-='+range, ease:Power1.easeInOut, repeat:-1, yoyo:true}); mRootDisplayNode.add(mist); } function createMonster() { var monster = new Node(new Monster(mImages[mMonsterImage])); monster.y = 135; monster.x = -150; var stepDeltaX = 30, stepDeltaY = 10; var stepDuration = 1.6, startOffset = 0.6; function step() { var tl = new TimelineMax(); if (monster.x > mViewWidth) { monster.x = -150; } tl.to(monster, stepDuration * 0.4, {y:'-=' + stepDeltaY, ease:Power2.easeOut}, startOffset); tl.to(monster, stepDuration * 0.6, {y:'+=' + stepDeltaY, ease:Power4.easeIn}); tl.add('shake'); tl.to(monster, stepDuration, {x:'+=' + stepDeltaX, ease:Power1.easeOut}, startOffset); tl.addCallback(function() { mTrees.forEach(function(t) { TweenMax.to(t, randomRange(0.3, 0.4), {y:'+=' + randomRange(4, 16), ease:Back.easeIn, repeat:1, yoyo:true}); }); }, 'shake-=0.25'); tl.eventCallback('onComplete', step); } mRootDisplayNode.add(monster); step(); } function createTrees(yOffset) { var tree; var dx = mViewWidth / 12; for (var i = 0; i < 12; i++) { tree = createTree( mImages[mTreeImage], dx * i + 35 * randomRange(0.8, 1.2), (mViewHeight - yOffset) * randomRange(1.0, 1.2) ); tree._segments.forEach(function(c) { var range = randomRa.........完整代码请登录后点击上方下载按钮下载查看
网友评论0