Question

我试图用Famous Timer建立倒计时。

作为第一步，我想制作一个滚动数字，所以我做了3个数字，正在做所需的动画，现在我只需要显示中间数字。

我看到了clipSize选项，但无法理解如何使用它。如果还有其他方法可以做到，那也很棒。

我的应用就在这里：http://slexy.org/view/s2R8VNhgEO

谢谢Alex A。

Answer 1

我没有修复你的代码，而是编写了一个示例，说明如何使用Lightbox渲染控制器创建所需的效果，并将视图剪切为仅显示当前倒计时索引。当然，这可以根据需要进行改进。

Example of the working code in jsBin ：只需点击即可启动计数器。

主要背景

  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;
  };

如何在Famo.us中剪辑视图？

1 个答案:

主要背景

CountdownView