How to clip a view in Famo.us?

Question

I'm trying to build a countdown with Famous Timer.

As a first step, I want to make a scrolling digit, so I made 3 digits which are doing the needed animation and now I need to show only the middle one.

I saw the clipSize option, but couldn't understand how to use it. If there are some other way to do it, that's great too.

My app is here: http://slexy.org/view/s2R8VNhgEO

Thanks, Alex A.

Answer 1

Rather than fix your code, I wrote an example of how you can create the effect you are looking for with the Lightbox render controller and clipping the view to only show the current count down index. Of course, this can be improved as needed.

Example of the working code in jsBin: Just click to start the counter.

Main Context

  var mainContext = Engine.createContext();

  var cview = new CountdownView({
    start: 10,
    size: [50, 50]
  });

  var counter = 0;
  var started = false;
  var funcRef;

  cview.on('click', function () {
    if (started) {
      Timer.clear(funcRef);
      started = false;
    } else {
      started = true;
      funcRef = Timer.setInterval(function(){
        console.log('setNext ' + cview.nextIndex);
        cview.setNext();
      },1000);
    }
  });

  var container = new ContainerSurface({
    size: [100, 100],
    properties: {
      overflow: 'hidden'
    }
  });
  container.add(cview);

  mainContext.add(container);

CountdownView

  function CountdownView(options) {
    View.apply(this, arguments);
    this.options.start = options.start || 10;

    this.surfaces = [];
    for (var i = 0; i <= this.options.start; i++) {
      var surface = new Surface({
        size: this.options.size,
        content: i.toString(),
        properties: {
          backgroundColor: "hsl(" + (i * 360 / 40) + ", 100%, 50%)",
          lineHeight: this.options.size[1]+"px",
          textAlign: "center",
          fontSize: "30px",
          cursor:'pointer'
        }
      });
      this.surfaces.push(surface);
      surface.pipe(this._eventOutput);
    }

    this.renderer = new Lightbox({
      inOpacity: 0,
      outOpacity: 0,
      inOrigin: [1, 1],
      inAlign: [1, 1],
      showOrigin: [0, 0],
      inTransform: Transform.translate(0,0,0.0002),
      outTransform: Transform.translate(0,this.options.size[1],0.0001),
      outOrigin: [1,1],
      outAlign: [1,1],
      inTransition: { duration: 600, curve: Easing.inCirc },
      outTransition: { duration: 1000, curve: Easing.outCirc },
      overlap: true
    });

    this.add(this.renderer);
    this.renderer.show(this.surfaces[this.options.start]);
    this.nextIndex = this.options.start - 1;

  }

  CountdownView.prototype = Object.create(View.prototype);
  CountdownView.prototype.constructor = CountdownView;

  CountdownView.prototype.setNext = function setNext() {
    this.renderer.show(this.surfaces[this.nextIndex]);
    this.nextIndex = (this.nextIndex -1 < 0) ? this.options.start : this.nextIndex - 1;
  };
  CountdownView.prototype.setIndex = function setIndex(newIndex) {
    if (newIndex < 0 || newIndex > this.countStart) return;
    this.renderer.show(this.surfaces[newIndex]);
  };
  CountdownView.prototype.getLength = function getLength() {
    return this.surfaces.length;
  };