Issue

Issue name

Tween: Full version [#seek] method isn't working

Issue description

Tween: Full version [#seek] method isn't working

Related

This issue is related to

• [ ] LICENSE

• [ ] README

• [ ] ABOUT COPYRIGHT VIOLATION (be careful before checking this...!)

• [ ] package.json

• [ ] demos/examples

• [ ] core.ts

• [x] Tween.ts

• [ ] lite.ts

• [ ] Easing.ts

• [ ] Interpolation.ts

• [x] Timeline.js

• or provide something else (from es6-tween files...)

Example

https://codepen.io/dalisoft/pen/boBNaV (remove commented code)

What you excepted?

Seek the tween

NOTE

• Please add read code, docs, files, issues, PR list for avoid duplicating existing question, bug or something else...

Hello, after this.tween.pause() in this case:

this.node.addEventListener('mouseenter', this.pause)
this.node.addEventListener('mouseleave', this.play)

this.tween = new window.TWEEN.Tween({ x: 0 })
  .to({ x: this.contentWidth * -1 }, random(4, 8) * 1000)
  .easing(window.TWEEN.Easing.Quintic.InOut)
  .on('update', (v) => {
    this.wrapper.style.setProperty('transform', 'translate3d(' + v.x + 'px, 0, 0)')
  })
  .repeat(Infinity)

I have a visual backward or forward jump for 1/3px on this.wrapper. I work with about 20 wrappers.

• OS: MacOs
• Browser chrome
• Version 73.0.3683.103 (Official Build) (64-bit)

Hi,

I figured out that the order of complete events wasn't properly repsected.

After dig in, I found that the update loop uses

while ( i < _tweens.length)  {
  _tweens[i++].update( time, preserve)
}

The issue is that _tweens[i++].update( time, preserve) can (actually will by default) remove the tween from our _tweens meaning we will skip the next index.

I've added a unit test :)

I'm using es6-tween in a NodeJS script. I'm trying to evaluate a tween at a custom time using Tween#update, but I'm getting really strange results that are way out of bounds. The same code in the browser outputs better-looking numbers, but they're still incorrect.

(I'd love a way to feed all these options to the library and get a simple tween function back which accepts a time value argument and returns the corresponding domain value, but I didn't see a way to get that in the documentation.)

To reproduce

let tweenVal = 0;

const tween = new TWEEN.Tween({x: 0})
  .to({x: 128}, 1000)
  .easing(TWEEN.Easing.Linear.None)
  .yoyo(true)
  .repeat(Infinity)
  .on('update', val => tweenVal = val.x)
  .start();

for (let t = -1000; t <= 3500; t += 500) {
  // Have to set preserve to `false` to keep tween from stopping,
  // and forceTime to `true` to get tween to run at all.
  tween.update(t, false, true);
  console.log(`at t=${t}: ${tweenVal}`);
}

https://jsfiddle.net/ds5h17fo/7/

Expected behavior

Given a linear tween from 0 to 128 over a duration of 1000 with .repeat(Infinity) and .yoyo(true), I expect that calling Tween#update will trigger update events with output values like the following, on every platform:

at t=-1000: 128
at t=-500: 64
at t=0: 0
at t=500: 64
at t=1000: 128
at t=1500: 64
at t=2000: 0
at t=2500: 64
at t=3000: 128
at t=3500: 64

Actual behavior

Firefox Developer Edition 72.0.1 (64-bit), Linux Mint 18.3.

NOTE: outputs for time values less than the duration (-1000 thru 1000 here) are not stable, and change every time (!?) you execute the script. I tried a few durations, and it's always the times under the duration that emit strange outputs. Even stable values past the duration time are incorrect, acting as if the time is offset by 500 here.

at t=-1000: -154.496
at t=-500: -90.496
at t=0: -26.496
at t=500: 37.504
at t=1000: 101.504
at t=1500: 128
at t=2000: 64
at t=2500: 0
at t=3000: 64
at t=3500: 128

NodeJS 10.19.0 and 12.15.0, same platform:

NOTE: output values increase with every execution.

at t=-1000: -25912755.214790147
at t=-500: -25912691.214790147
at t=0: -25912627.214790147
at t=500: -25912563.214790147
at t=1000: -25912499.214790147
at t=1500: -25912435.214790147
at t=2000: -25912371.214790147
at t=2500: -25912307.214790147
at t=3000: -25912243.214790147
at t=3500: -25912179.214790147

Add TWEEN.onRequestTick that can be used to notify when another animation frame is needed.

This can be used when autoPlay is false and the user wants on demand animation frame rather than continuous one.

Also, Fix TWEEN.FrameThrottle which wasn't expose

Rather than having two repos that are diverging, let's get ideas from here, and make PRs for them in the base tween branch, and let's delete this repo so we can clean up the org.

There's lots of good ideas here @dalisoft

Then moving forward, what we should do is create new feature branches in the original repo, or make new repos under our own usernames and make pull requests onto the main repo.

Features

• [x] Compiled Single-file for performance and simple, clean result
• [x] Works all method
• [x] Works on Browser too ( Chrome 55+ )
• [x] You like import and you don't want single file? You can split files and make it modular (requires some time)

Usage

• this javascript usage same as default Tween.js

var tween = new TWEEN.Tween({x:0}).to({x:100}).easing(TWEEN.Easing.Quadratic.InOut).onUpdate((object, elapsed) => {
	console.log(object);
}).start();

requestAnimationFrame(function anim(time){
	requestAnimationFrame(anim);
	TWEEN.update(time);
});

If this makes V2 starting...

• Similar to TweenManager, but Group Manager is here
• Classes are made, so everyone can extend the class with

class MyExtend extends TWEEN.Tween { // class MyExtend extends TWEEN {
static Foo () {}
Bar (x) {
return x * 5;
}

NOTE

• If you need this work on back to IE9 (even IE8 possible), you need BabelJS.
• You can try Babel REPL
• Or you can try Babel in NodeJS (npm) via babel-loader plug-in
• It's starting, when we improve it together it will be better like emit instead of onUpdate, onStart or even new things.
• Compiling build and dev version takes just ~2min in Webpack+Babel+NodeJS

I have an angular js application. One of the controllers uses Esri MAP (ArcGIS JS API). I need to animate the vehicle graphic movement.

What I did? I imported the es-tween library and set autoPlay to true

const { Tween, Easing, autoPlay } = require('es6-tween'); autoPlay(true);

On the function of the vehicle location updated I did the following code:: let position = { x: vehicle.graphic.geometry.getLongitude(), y: vehicle.graphic.geometry.getLatitude(), heading: 180 }; let target = {x:position.x+2, y:position.y}; vehicle.tween = new Tween(position).to(target, 15000).easing(Easing.Elastic.InOut).on('update', (position) => { vehicle.graphic.setGeometry(position); console.log(position); }); vehicle.tween.start(); The Tween object of the vehicle is updated with the position and target. But the vehicle image does not move.

This is the Vehicle Object Object graphic: attributes: {currentPosition_X: -122.387786865234, currentPosition_Y: 47.5610885620117, driverName: "Unassigned", vehicleId: "new", mouseClicked: false} geometry: spatialReference: {wkid: 4326} type: "point" x: -122.387786865234 y: 47.5610885620117 proto: Object infoTemplate: undefined symbol: undefined _cache: null _extent: {type: "extent", xmin: -122.387786865234, ymin: 47.5610885620117, xmax: -122.387786865234, ymax: 47.5610885620117, …} _graphicsLayer: {_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …} _layer: {_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …} proto: Object make: "Dodge" model: "Caravan" onboard_device_id: "new" tween: L id: 7 object: {x: -122.387786865234, y: 47.5610885620117, heading: 180} updateCallback0: ƒ (position) _chainedTweensCount: 0 _delayTime: 0 _duration: 15000 _easingFunction: ƒ (t) _easingReverse: ƒ (t) _initTime: 48742.665000027046 _interpolationFunction: ƒ (t,e,r) _isFinite: true _isPlaying: true _maxListener: 15 _onStartCallbackFired: false _pausedTime: null _prevTime: 48742.665000027046 _r: 0 _rendered: false _repeat: 0 _reversed: false _startTime: 48742.665000027046 _valuesEnd: {x: -120.387786865234, y: 47.5610885620117} _valuesStart: {} _yoyo: false proto: Object vehicle_id: 888 vehicle_id_number: "new" vehicle_registration: "new" vehicle_status: "active" vehicle_type: "sedan" proto: Object

|Issue name|Issue description|Issue Demo URL |---|---|---| | | | |

Related

This issue is related to

• [ ] LICENSE

• [ ] README

• [ ] ABOUT COPYRIGHT VIOLATION (be careful before checking this...!)

• [ ] package.json

• [ ] demos/examples

• [ ] core.ts

• [x] Tween.ts

• [ ] lite.ts

• [ ] Easing.ts

• [ ] Interpolation.ts

• [ ] Timeline.js

• or provide something else (from es6-tween files...)

What you excepted?

• Describe your result of research or idea...

NOTE

• Please add read code, docs, files, issues, PR list for avoid duplicating existing question, bug or something else...

Issue description

• I believe that import { Easing, Interpolation, Tween, autoPlay } from 'es6-tween/src/index.lite' should end with .js., not .lite.

Related

This issue is related to: README

What you excepted?

• I expected to be able to paste that line into my code and have access to the lite version of Tween. Instead, I had to change the file extension.

Also, what is the difference between importing { Easing, Tween, autoPlay } from index.js and from es6-tween? I found I had to change .onUpdate() to .on('update', ...) when importing the library.

Issue

Issue name

es6-tween relies on process.hrtime if available, which seems to work unexpectedly(?) in Electron.

Issue description

Animations doesn't progress in Electron.

Related

This issue is related to

• [ ] LICENSE
• [ ] README
• [ ] ABOUT COPYRIGHT VIOLATION (be careful before checking this...!)
• [ ] package.json
• [ ] demos/examples
• [x] core.ts
• [ ] Tween.ts
• [ ] lite.ts
• [ ] Easing.ts
• [ ] Interpolation.ts
• [ ] Timeline.js

Current tests on travis are running on node so we're not actually using window or window.performance. Travis can run headless browsers, and we should use it to make sure we're not breaking things.