| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
hhh0320
8年前发布

pixi-action:类似 cocos2d-x 使用方法的 Pixi.js 动画插件

   <h2>pixi-action</h2>    <p>pixi-actionis a plugin forPixi.js to create actions and animations easily. API inspired by <strong>Cocos2d-x</strong> .</p>    <h2>1. Install</h2>    <p>npm install pixi-action</p>    <p>require it, or import it with script tag, all is OK.</p>    <h2>2. Usage</h2>    <p>Code just like below.</p>    <pre>  var renderer = new PIXI.autoDetectRenderer(800,600);  document.body.appendChild(renderer.view);  var stage = new PIXI.Container();    var sprite1 = new Sprite(resources['res/img/animal.png'].texture);    var action_move = PIXI.action.MoveTo(500, 400, 2);    var animation = PIXI.actionManager.runAction(cat, action_moveto);  animation.on('end', function(elapsed) {    console.log('action end.');  });    function animate() {    window.requestAnimationFrame(animate);    renderer.render(stage);    PIXI.actionManager.update(); // update actions  }  animate();</pre>    <h2>3. How it works</h2>    <p>This plugin add a new namespace named <strong> action </strong> to the PIXI namespace, and the action namespace has 2 new classes, <strong>ActionManager</strong> and <strong>Action</strong> , and create an instance for ActionManager in PIXI.actionManager, but all you need is add PIXI.actionManager.update() in your requestAnimationFrame. You can pass as params for PIXI.actionManager.update(delta) your own delta time, if you don't pass anything it will be calculated internally.</p>    <p>For max accuracy calculating the delta time you can use theAnimationLoop plugin.</p>    <p>When a action is started, or ended, it will fire events named start / end .</p>    <h2>4. Using AnimationLoop</h2>    <pre>  var renderer = new PIXI.autoDetectRenderer(800,600);  document.body.appendChild(renderer.view);    var animationLoop = new PIXI.AnimationLoop(renderer);    //Add a postrender or prerender event to add the timer.update in the raf.  animationLoop.on('postrender', function() {    PIXI.actionManager.update(this.delta); //Pass as param the delta time to PIXI.timerManager.update  });    animationLoop.start();</pre>    <h2>5. Events</h2>    <p>TimerManager extends from PIXI.utils.EventEmitter , and emit some events: start, end, repeat, update and stop. More info: Node.js Events</p>    <ul>     <li><strong>start - callback(elapsedTime)</strong> : Fired when the action starts.</li>     <li><strong>end - callback(elapsedTime)</strong> : Fired when the action is ended.</li>    </ul>    <h2>6. Actions & Animations</h2>    <p>Now <strong>pixi-action</strong> supported actions / animations below. You can just combine them for complex actions.</p>    <ul>     <li><strong>ActionMove</strong></li>    </ul>    <p>PIXI.action.MoveTo(x, y, time); PIXI.action.MoveBy(x, y, time);</p>    <ul>     <li><strong>ActionScale</strong></li>    </ul>    <p>PIXI.action.ScaleTo(scale_x, scale_y, time); PIXI.action.ScaleBy(scale_x, scale_y, time);</p>    <ul>     <li><strong>ActionRotate</strong></li>    </ul>    <p>PIXI.action.RotateTo(rotation, time); PIXI.action.RotateBy(rotation, time);</p>    <ul>     <li><strong>ActionBlink</strong></li>    </ul>    <p>PIXI.action.Blink(count, time);</p>    <ul>     <li><strong>ActionFade</strong></li>    </ul>    <p>PIXI.action.FadeIn(time); PIXI.action.FadeOut(time);</p>    <ul>     <li><strong>ActionSkew</strong></li>    </ul>    <p>PIXI.action.SkewTo(x, y, time); PIXI.action.SkewBy(x, y, time);</p>    <ul>     <li><strong>ActionPivot</strong></li>    </ul>    <p>PIXI.action.PivotTo(x, y, time); PIXI.action.PivotBy(x, y, time);</p>    <ul>     <li><strong>ActionJump</strong></li>    </ul>    <p>PIXI.action.JumpTo(x, y, time); PIXI.action.JumpBy(x, y, time);</p>    <ul>     <li><strong>ActionTint</strong></li>    </ul>    <p>PIXI.action.TintTo(tint, time); PIXI.action.TintBy(tint, time);</p>    <ul>     <li><strong>ActionSequence</strong></li>    </ul>    <p>PIXI.action.Sequence(actions);</p>    <ul>     <li><strong>ActionRepeat</strong></li>    </ul>    <p>PIXI.action.Repeat(action, count);</p>    <ul>     <li><strong>repeatForever</strong></li>    </ul>    <p>PIXI.action.Repeat(action);</p>    <ul>     <li><strong>ActionDelay</strong></li>    </ul>    <p>PIXI.action.Delay(time);</p>    <h2>7. API</h2>    <ul>     <li><strong>PIXI.actionManager.runAction(object, action)</strong> : run action on an object, return an animation, can on the events.</li>     <li><strong>new PIXI.action.*(args)</strong> : create an action.</li>    </ul>    <p> </p>    <p> </p>    <p> </p>    
 本文由用户 hhh0320 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1482391630716.html
PixiJS JavaScript开发 cocos2d-x