{"id":16231518,"url":"https://github.com/hustcc/pixi-action","last_synced_at":"2025-07-28T20:08:57.253Z","repository":{"id":57325059,"uuid":"77006074","full_name":"hustcc/pixi-action","owner":"hustcc","description":":horse_racing: pixi-action is a plugin for Pixi.js to create actions and animations easily, inspired by Cocos2d-x.","archived":false,"fork":false,"pushed_at":"2017-12-27T02:55:16.000Z","size":644,"stargazers_count":68,"open_issues_count":2,"forks_count":17,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-07-19T10:45:34.174Z","etag":null,"topics":["actionmanager","animation","cocos2d","cocos2d-x","elapsedtime","pixi","pixi-action","rotation","tint"],"latest_commit_sha":null,"homepage":"http://git.hust.cc/pixi-action/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hustcc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-21T01:48:18.000Z","updated_at":"2024-09-11T19:17:54.000Z","dependencies_parsed_at":"2022-09-18T03:31:12.291Z","dependency_job_id":null,"html_url":"https://github.com/hustcc/pixi-action","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/hustcc/pixi-action","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fpixi-action","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fpixi-action/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fpixi-action/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fpixi-action/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hustcc","download_url":"https://codeload.github.com/hustcc/pixi-action/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hustcc%2Fpixi-action/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267578001,"owners_count":24110351,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-28T02:00:09.689Z","response_time":68,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["actionmanager","animation","cocos2d","cocos2d-x","elapsedtime","pixi","pixi-action","rotation","tint"],"created_at":"2024-10-10T13:05:56.551Z","updated_at":"2025-07-28T20:08:57.211Z","avatar_url":"https://github.com/hustcc.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pixi-action\n\n\u003e **pixi-action** is a plugin for [Pixi.js](https://github.com/pixijs/pixi.js) to create actions and animations easily. API inspired by **Cocos2d-x**. Online demo [here](http://git.hust.cc/pixi-action/).\n\n[![Build Status](https://travis-ci.org/hustcc/pixi-action.svg?branch=master)](https://travis-ci.org/hustcc/pixi-action) [![npm](https://img.shields.io/npm/v/pixi-action.svg?style=flat-square)](https://www.npmjs.com/package/pixi-action) [![npm](https://img.shields.io/npm/dt/pixi-action.svg?style=flat-square)](https://www.npmjs.com/package/pixi-action) [![npm](https://img.shields.io/npm/l/pixi-action.svg?style=flat-square)](https://www.npmjs.com/package/pixi-action)\n\n\n## 1. Install\n\n\u003e **npm install pixi-action**\n\n`require` it, or import it with `script` tag, all is OK.\n\n\n## 2. Usage\n\nCode just like below.\n\n```js\nvar renderer = new PIXI.autoDetectRenderer(800,600);\ndocument.body.appendChild(renderer.view);\nvar stage = new PIXI.Container();\n\nvar cat = new Sprite(resources['res/img/animal.png'].texture);\n\n// here is the action define.\n// similar with cocos2d-x.\nvar action_move = new PIXI.action.MoveTo(500, 400, 2);\n// run the action with actionManager.\nvar animation = PIXI.actionManager.runAction(cat, action_move);\n// listen the event, include: start, end.\nanimation.on('end', function(elapsed) {\n  console.log('action end.');\n});\n\nfunction animate() {\n  window.requestAnimationFrame(animate);\n  renderer.render(stage);\n  PIXI.actionManager.update(); // update actions\n}\nanimate();\n```\n\nAction defines are similar with cocos2d-x.\n\n\n## 3. How it works\n\nThis plugin add a new namespace named **`action`** to the PIXI namespace, and the action namespace has 2 new classes, **ActionManager** and **Action**, 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. \n\nFor max accuracy calculating the delta time you can use the [AnimationLoop](https://github.com/Nazariglez/pixi-animationloop/) plugin.\n\nWhen a action is started, or ended, it will fire events named `start` / `end`.\n\n\n## 4. Using AnimationLoop\n\n```js\nvar renderer = new PIXI.autoDetectRenderer(800,600);\ndocument.body.appendChild(renderer.view);\n\nvar animationLoop = new PIXI.AnimationLoop(renderer);\n\n//Add a postrender or prerender event to add the timer.update in the raf.\nanimationLoop.on('postrender', function() {\n  PIXI.actionManager.update(this.delta); //Pass as param the delta time to PIXI.timerManager.update\n});\n\nanimationLoop.start();\n```\n\n\n## 5. Events\n\nTimerManager extends from [PIXI.utils.EventEmitter](https://github.com/primus/eventemitter3), and emit some events: start, end, repeat, update and stop. More info: [Node.js Events](https://nodejs.org/api/events.html#events_emitter_emit_event_arg1_arg2)\n\n- **start - callback(elapsedTime)**: Fired when the action starts.\n- **end - callback(elapsedTime)**: Fired when the action is ended.\n\n\n## 6. Actions \u0026 Animations\n\nNow **pixi-action** supported actions / animations below. You can just combine them for complex actions.\n\n - [x] **ActionMove**\n\n\u003e PIXI.action.MoveTo(x, y, time);\n\u003e PIXI.action.MoveBy(x, y, time);\n\n - [x] **ActionScale**\n\n\u003e PIXI.action.ScaleTo(x, y, time);\n\u003e PIXI.action.ScaleBy(x, y, time);\n\n - [x] **ActionRotate**\n\n\u003e PIXI.action.RotateTo(rotation, time);\n\u003e PIXI.action.RotateBy(rotation, time);\n\n - [x] **ActionBlink**\n\n\u003e PIXI.action.Blink(count, time);\n\n - [x] **ActionFade**\n\n\u003e PIXI.action.FadeIn(time);\n\u003e PIXI.action.FadeOut(time);\n\n - [x] **ActionSkew**\n\n\u003e PIXI.action.SkewTo(x, y, time);\n\u003e PIXI.action.SkewBy(x, y, time);\n\n - [x] **ActionPivot**\n\n\u003e PIXI.action.PivotTo(x, y, time);\n\u003e PIXI.action.PivotBy(x, y, time);\n\n - [x] **ActionTint**\n\n\u003e PIXI.action.TintTo(tint, time);\n\u003e PIXI.action.TintBy(tint, time);\n\n - [x] **ActionAlpha**\n\n\u003e PIXI.action.AlphaTo(alpha, time);\n\u003e PIXI.action.AlphaBy(alpha, time);\n\n - [x] **ActionSequence**\n\n\u003e PIXI.action.Sequence(actions);\n\n - [x] **Spawn**\n\n\u003e PIXI.action.Spawn(actions);\n\n - [X] **ActionRepeat**\n\n\u003e PIXI.action.Repeat(action, count);\n\n - [x] **repeatForever**\n\n\u003e PIXI.action.Repeat(action);\n\n - [x] **ActionDelay**\n\n\u003e PIXI.action.DelayTime(time);\n\n - [x] **ActionCallFunc**\n\n\u003e PIXI.action.CallFunc(func);\n\n\n\n## 7. API\n\n - **PIXI.actionManager.runAction(object, action)**: run action on an object, return an animation, can `on` the events.\n -  **PIXI.actionManager.cancelAction(AnimationObject)**: cancel the animation.\n - **new PIXI.action.*(args)**: create an action.\n  \n\n## LICENSE\n\nMIT@[hustcc](https://github/com/hustcc). Welcome to **`Submit Pull Request`**.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fpixi-action","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhustcc%2Fpixi-action","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhustcc%2Fpixi-action/lists"}