fj-timeline-storyboard v1.0.2

Getting Started

npm install fj-modal --registry http://192.168.0.150:4876

basic use

  // 使用当前核心库数据更新时间线数据用于交互计算
  function decodeToTimeline() {
    let {
      mainLayer,
      subLayer,
      subAudioLayer,
      bgmLayer,
    } = canvas.getAllLayer();

    let createLayerData = (layer) => {
      return layer.map(id => {
        let graph = canvas.getGraphById(id);
        return wrapBrickData(graph);
      })
    };

    FJTimelineStore.decode({
      mainLayer: createLayerData(mainLayer),
      subLayer: createLayerData(subLayer),
      subAudioLayer: createLayerData(subAudioLayer),
      bgmLayer: createLayerData(bgmLayer),
    })
  }

  // 返回时间线的交互数据用于更新核心库
  function encodeFromTimeline() {
    let layer = FJTimelineStore.encode();
    let _layer = canvas.getAllLayer();
    let updateLayer = (timelineLayer, canvasLayer) => {
      // 清空当前层
      canvasLayer.length = 0;
      let cache = {};
      timelineLayer.forEach(brick => {
        let copyCacheGraph = FJTimelineStore.getCopyCache() && FJTimelineStore.getCopyCache().cache;
        let graph = cache[brick.id] || canvas.getGraphById(brick.id) || copyCacheGraph;
        if (graph) {
          canvas.remove(graph);
          if (brick.cloned) {
            cache[brick.id] = cache[brick.id] || graph;
            graph = graph.clone();
          }

          graph.decode({
            startTime: brick.startTime,
            endTime: brick.endTime,
            delay: brick.delay,
          });

          if (graph.type === FJCoreConstant.TEXT_ANIMATION) {
            graph.createAni();
          }

          canvas.add(graph);
          canvasLayer.push(graph.id);
        }
      });
    };

    updateLayer(layer.mainLayer, _layer.mainLayer);
    updateLayer(layer.subLayer, _layer.subLayer);
    updateLayer(layer.subAudioLayer, _layer.subAudioLayer);
    updateLayer(layer.bgmLayer, _layer.bgmLayer);
  }

  // 在使用FJTimelineStore的接口时，需要将先就用FJTimelineStore.decode()更新时间线的相关数据
  // 在交互计算完成后获取FJTimelineStore.encode()的返回值更新自身的核心库
  decodeToTimeline();
  let {adsorptionLine, exchangeId} = FJTimelineStore.dragTimeline(id, dragData);
  encodeFromTimeline();

API