Carousel: replace TWEEN with TWIXT/Animation, use stepper:'timer' at …

…existing call sites, #381 Signed-off-by: Chris Malley <[email protected]>
phetsims · Aug 24, 2018 · ccaeddf · ccaeddf
1 parent 6334e98
commit ccaeddf
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 29 deletions.
diff --git a/js/Carousel.js b/js/Carousel.js
@@ -16,8 +16,10 @@ define( function( require ) {
   'use strict';
 
   // modules
+  var Animation = require( 'TWIXT/Animation' );
   var CarouselButton = require( 'SUN/buttons/CarouselButton' );
   var Dimension2 = require( 'DOT/Dimension2' );
+  var Easing = require( 'TWIXT/Easing' );
   var HSeparator = require( 'SUN/HSeparator' );
   var inherit = require( 'PHET_CORE/inherit' );
   var Node = require( 'SCENERY/nodes/Node' );
@@ -65,8 +67,10 @@ define( function( require ) {
     separatorColor: 'rgb( 180, 180, 180 )', // {Color|string} color for separators
     separatorLineWidth: 0.5, // {number} lineWidth for separators
 
-    // animation
-    animationEnabled: true // {boolean} is animation enabled when scrolling between pages?
+    // animation, scrolling between pages
+    animationEnabled: true, // {boolean} is animation enabled when scrolling between pages?,
+    animationDuration: 0.4, // {number} seconds
+    stepper: 'manual' // {string} see Animaton options.stepper
   };
   assert && Object.freeze( DEFAULT_OPTIONS );
 
@@ -77,6 +81,8 @@ define( function( require ) {
    */
   function Carousel( items, options ) {
 
+    var self = this;
+
     // Override defaults with specified options
     options = _.extend( {}, DEFAULT_OPTIONS, options );
 
@@ -244,9 +250,7 @@ define( function( require ) {
     var pageNumberProperty = new Property( options.defaultPageNumber );
 
     // Change pages
-    var self = this;
-    var scrollTween;
-
+    var scrollAnimation = null;
     function pageNumberListener( pageNumber ) {
 
       assert && assert( pageNumber >= 0 && pageNumber <= numberOfPages - 1, 'pageNumber out of range: ' + pageNumber );
@@ -260,35 +264,36 @@ define( function( require ) {
       }
 
       // stop any animation that's in progress
-      scrollTween && scrollTween.stop();
+      scrollAnimation && scrollAnimation.stop();
 
       if ( self._animationEnabled ) {
 
-        //TODO replace calls to Tween with a wrapper, see https://github.com/phetsims/tasks/issues/360
-        // Set up the animation to scroll the items in the carousel.
-        var parameters;
-        var animationDuration = 400; // ms
-        var easing = TWEEN.Easing.Cubic.InOut;
+        // options that are independent of orientation
+        var animationOptions = {
+          duration: options.animationDuration,
+          stepper: options.stepper,
+          easing: Easing.CUBIC_IN_OUT
+        };
+
+        // options that are specific to orientation
         if ( isHorizontal ) {
-          parameters = { left: scrollingNode.left };
-          scrollTween = new TWEEN.Tween( parameters )
-            .easing( easing )
-            .to( { left: -pageNumber * scrollingDelta }, animationDuration )
-            .onUpdate( function() {
-              scrollingNode.left = parameters.left;
-            } )
-            .start( window.phet && window.phet.joist && window.phet.joist.elapsedTime );
+          animationOptions = _.extend( {
+            getValue: function() { return scrollingNode.left; },
+            setValue: function( value ) { scrollingNode.left = value; },
+            to: -pageNumber * scrollingDelta
+          }, animationOptions );
         }
         else {
-          parameters = { top: scrollingNode.top };
-          scrollTween = new TWEEN.Tween( parameters )
-            .easing( easing )
-            .to( { top: -pageNumber * scrollingDelta }, animationDuration )
-            .onUpdate( function() {
-              scrollingNode.top = parameters.top;
-            } )
-            .start( window.phet && window.phet.joist && window.phet.joist.elapsedTime );
+          animationOptions = _.extend( {
+            getValue: function() { return scrollingNode.top; },
+            setValue: function( value ) { scrollingNode.top = value; },
+            to: -pageNumber * scrollingDelta
+          }, animationOptions );
         }
+
+        // create and start the scroll animation
+        scrollAnimation = new Animation( animationOptions );
+        scrollAnimation.start();
       }
       else {
 

diff --git a/js/demo/ComponentsScreenView.js b/js/demo/ComponentsScreenView.js
@@ -84,6 +84,7 @@ define( function( require ) {
     var vCarousel = new Carousel( vItems, {
       orientation: 'vertical',
       separatorsVisible: true,
+      stepper: 'timer',
       buttonTouchAreaXDilation: 5,
       buttonTouchAreaYDilation: 15,
       buttonMouseAreaXDilation: 2,
@@ -93,6 +94,7 @@ define( function( require ) {
     // horizontal carousel
     var hCarousel = new Carousel( hItems, {
       orientation: 'horizontal',
+      stepper: 'timer',
       buttonTouchAreaXDilation: 15,
       buttonTouchAreaYDilation: 5,
       buttonMouseAreaXDilation: 7,
@@ -258,7 +260,8 @@ define( function( require ) {
     // carousel
     var carousel = new Carousel( items, {
       orientation: 'horizontal',
-      itemsPerPage: 3
+      itemsPerPage: 3,
+      stepper: 'timer'
     } );
 
     // page control

diff --git a/js/sun-config.js b/js/sun-config.js
@@ -39,7 +39,8 @@ require.config( {
     SCENERY_PHET: '../../scenery-phet/js',
     SUN: '.',
     TAMBO: '../../tambo/js',
-    TANDEM: '../../tandem/js'
+    TANDEM: '../../tandem/js',
+    TWIXT: '../../twixt/js'
   },
 
   // optional cache buster to make browser refresh load all included scripts, can be disabled with ?cacheBuster=false

diff --git a/package.json b/package.json
@@ -14,6 +14,9 @@
     "preload": [
       "../sherpa/lib/Tween-r12.js"
     ],
+    "phetLibs": [
+      "twixt"
+    ],
     "runnable": true,
     "supportedBrands": [
       "phet",