davidfig / pixi-ease Goto Github PK

Here is the error from the console

ERROR in node_modules/pixi-ease/@types/index.d.ts:63:5 - error TS2416: Property 'on' in type 'Ease' is not assignable to the same property in base type 'EventEmitter<string | symbol, any>'.
  Type '(event: "complete" | "each", fn: (ease: Ease) => void, context?: any) => this' is not assignable to type '<T extends string | symbol>(event: T, fn: (...args: any[]) => void, context?: any) => this'.
    Types of parameters 'event' and 'event' are incompatible.
      Type 'T' is not assignable to type '"complete" | "each"'.
        Type 'string | symbol' is not assignable to type '"complete" | "each"'.
          Type 'string' is not assignable to type '"complete" | "each"'.
            Type 'T' is not assignable to type '"each"'.
              Type 'string | symbol' is not assignable to type '"each"'.
                Type 'string' is not assignable to type '"each"'.

63     on(event: 'each' | 'complete', fn: (ease: Ease) => void, context?: any): this

Using latest version of pixi-ease, angular 9.
Are there any types to be installed for this error to go away?
Thanks

When animation is completed and activates onComplete callback, which removes other animation array "list" and array this.easings becomes different. After that action list have an element which this.easing doesn't. After that coming splice with index -1 and removes wrong animation element

proofs
after we delete element animation

and now we deleting index -1, so wrong element lost animation

Currently there doesn't seem to be a way to animate the pivot/anchor. Is this possible?

My initial thoughts are it's more difficult due to the pivot/anchor values being objects rather than just a number on the element being eased.

As far as I can see, it only ever returns one.

When I set useTicker: true along with the ticker, it raised an error saying TypeError: undefined is not an object (evaluating 'this.ticker.elapsedMS').

It seems like after I come back to the tab after a while, animations have been "queued up" and all play at once resulting in their state switching from (seemingly) start to finish 10 times a second.

A temporary workaround for me is to remove all animations once the browser tabs "blur" event is called and then readd them once "focus" is fired. This results in a "lifeless" game when losing focus on the window. It becomes alive again once focus comes back at least so I guess this is "acceptable".

Is this avoidable otherwise? I am pretty sure my implementation was nothing too specific:

const animationList = new Ease.list()

animationList.to(graphic.scale, { x: 1.2, y: 1.2 }, 500, { ease: "easeInSine", repeat: true, reverse: true })

Hi!
I often need proportional/relative easing, e.g., for scaling of objects by a factor X instead of (absolute) scaling to a scale X.
Is this supported (I didn't find it)? or is this a desirable feature (e.g. as one more option to ease.add())?
Thanks!

Wrong remove algorithm, it splice wrong elements if it can't find match. Really, how can you write code like that? I spend around a hour to understand wtf with my element and his animation. Maybe you add some checking?

My last element losing his animation, when index being -1
http://prntscr.com/pwqw8s

Hello David,

I love your work and your pixi libraries are just awesome !
I found some errors just by opening your index.d.ts in pixi-ease.

ERROR in node_modules/pixi-ease/@types/index.d.ts:17:6 - error TS2411: Property 'position' of type 'Point | DisplayObject' is not assignable to string index type 'number'.

17      position?: PIXI.DisplayObject | PIXI.Point
        ~~~~~~~~
node_modules/pixi-ease/@types/index.d.ts:25:6 - error TS2411: Property 'face' of type 'Point | DisplayObject' is not assignable to string index type 'number'.

25      face?: PIXI.DisplayObject | PIXI.Point
        ~~~~
node_modules/pixi-ease/@types/index.d.ts:29:6 - error TS2411: Property 'tint' of type 'number | number[]' is not assignable to string index type 'number'.

29      tint?: number | number[]
        ~~~~
node_modules/pixi-ease/@types/index.d.ts:30:6 - error TS2411: Property 'blend' of type 'number | number[]' is not assignable to string index type 'number'.

30      blend?: number | number[]

This prevent me from using the production build inside the angular application I am working on. I am still a beginner concerning typescript so I have no clue about the cause of this error and this may be totally due to some local configurations.

Any thoughts about this ?

So I can't really figure out how to solve this problem.

So for example we have a very simple animation.
Object is initially at position A, then it moves to position B, waits 2s, and moves from position B to position C.

How do I have to configure animation list to get animation like that? Currently it always starts animation B->C from position A instead of B.

Thank you for providing this library，can you add support for import ,like import Ease from 'pixi-ease'

import * as PIXI from 'pixi.js'
import { Ease, ease } from 'pixi-ease'

const app = new PIXI.Application()
const test = app.stage.addChild(new PIXI.Sprite(PIXI.Texture.WHITE))
const generic = ease.add(test, { alpha: 0 }, { duration: 1500, repeat: true, ease: 'easeOutQuad' })
generic.on('each', () => console.log(test.generic))

Docs are saying that: fires on each loop when there are eases running

But it fires on each tick (every frame).

So, how to catch an event when the current loop of repetitive animation is completed (event between each repetitive loop)?

This happens for me after upgrading to 2.x. It seems to happen when easings are in progress and ease.removeAll() or ease.removeAllEases() is called.

this.list[e].update is not a function
    at update (/Volumes/Data/Workspace/touchtech/dsr-space-exploration/node_modules/pixi-ease/dist/ease.js:1)
    at TickerListener.emit (/Volumes/Data/Workspace/touchtech/dsr-space-exploration/node_modules/@pixi/ticker/lib/ticker.js:138)
    at Ticker.update (/Volumes/Data/Workspace/touchtech/dsr-space-exploration/node_modules/@pixi/ticker/lib/ticker.js:661)
    at Ticker._tick (/Volumes/Data/Workspace/touchtech/dsr-space-exploration/node_modules/@pixi/ticker/lib/ticker.js:367)```

I can't seem for the life of me to find an actual list of functions included (ie linear, easeInCubic )
Digging through the code shows some of them but its not a great way to go about it