@shijiu/jsview 1.9.731 → 1.9.759

package/dom/jsview-dom/src/engine-js/browser/animation_progress.js

@@ -1,287 +0,0 @@
-/* eslint-disable no-prototype-builtins */
-import { animationToStyle, getStaticFrameControl, convertTimingFunc } from "./animation_keyframe";
-
-const is_char = char_code => (char_code >= 65 && char_code <= 90) || (char_code >= 97 && char_code <= 122);
-const is_num = char_code => char_code >= 48 && char_code <= 57;
-const __parseTransform = (transform) => {
-  if (!transform) { return null; }
-  let func_name = "";
-  let param = "";
-  let param_list = [];
-  let mode = 0; // 0 parse name; 1 parse params;
-  for (let i = 0; i < transform.length; i++) {
-    const char_code = transform.charCodeAt(i);
-    if (mode === 0) {
-      if (is_char(char_code) || is_num(char_code)) {
-        func_name += transform[i];
-      }
-    } else {
-      if (is_num(char_code) || char_code === 46 || char_code === 45 || char_code === 101) { // 科学计数
-        param += transform[i];
-      }
-    }
-
-    if (char_code === 40) { // (
-      mode = 1;
-      param = "";
-      param_list = [];
-    } else if (char_code === 41) { // )
-      param_list.push(parseFloat(param));
-      return {
-        name: func_name,
-        params: param_list
-      };
-    } else if (char_code === 44) { // ,
-      param_list.push(parseFloat(param));
-      param = "";
-    }
-  }
-  console.error("transform error", transform);
-  return null;
-};
-
-function _BuildTracer(layout_view) {
-  const children = layout_view.Element.children;
-  let found_tracer = null;
-  // 寻找进度跟踪器，以免重复创建，浪费资源
-  for (let i = 0; i < children.length; i++) {
-    if (children[i].id === "_AnimateProgressTracer") {
-      found_tracer = children[i];
-      break;
-    }
-  }
-
-  if (found_tracer === null) {
-    // 若在此节点下没有进度跟踪器，则创建一个
-    found_tracer = window.originDocument.createElement("div");
-    found_tracer.id = "_AnimateProgressTracer";
-    layout_view.Element.appendChild(found_tracer);
-  }
-
-  return found_tracer;
-}
-
-let sIdToken = 0;
-
-class AnimationProgress {
-  constructor(layout_view) {
-    this._TracerDiv = _BuildTracer(layout_view);
-    this._IdToken = (sIdToken++);
-    this._KeyFrameName = null;
-    this._AdvanceTimer = null;
-    this._AdvanceListener = null;
-    if (!this._TracerDiv.hasOwnProperty("_ForgeProgressToken")) {
-      this._TracerDiv._ForgeProgressToken = 0;
-    }
-
-    // 阻止事件上发到父节点
-    this._OnEndListener = ((event) => {
-      event.stopPropagation();
-    });
-
-    // TODO: 要支持Android WebView? WebkitAnimationEnd...
-    this._TracerDiv.addEventListener("animationend", this._OnEndListener);
-  }
-
-  _ClearAdvanceTimer() {
-    if (this._AdvanceTimer !== null) {
-      clearInterval(this._AdvanceTimer);
-      this._AdvanceTimer = null;
-    }
-  }
-
-  _NotifyAdvance() {
-    this._ClearAdvanceTimer();
-    if (this._AdvanceListener !== null) {
-      this._AdvanceTimer = setInterval(() => {
-        const progress = this.GetProgress();
-        this._AdvanceListener(progress);
-        if (progress === 1) {
-          this._ClearAdvanceTimer();
-        }
-      }, 100);
-    }
-  }
-
-  Start(host_animation, starter_progress, advance_listener) {
-    this._AdvanceListener = advance_listener;
-
-    // 保证可用的Animation动画
-    if (this._KeyFrameName) {
-      console.error("Error: Asset!! should Stop before start");
-    }
-    this._TracerDiv._ForgeProgressToken = (this._TracerDiv._ForgeProgressToken + 1) % 2;
-    this._KeyFrameName = this._BuildTraceKeyFrame(
-      starter_progress,
-      this._IdToken,
-      this._TracerDiv._ForgeProgressToken);
-    this._TracerDiv.style.animation = animationToStyle(host_animation, this._KeyFrameName);
-    // TODO: 要支持Android WebView? WebkitAnimationEnd...
-    this._TracerDiv.addEventListener("animationend", this._OnEndListener);
-
-    this._NotifyAdvance();
-  }
-
-  // 停止进度跟进，并返回进度值
-  Stop() {
-    const progress = this.GetProgress();
-    this._TracerDiv.style.animation = null;
-
-    if (this._KeyFrameName) {
-      this._RemoveTraceKeyFrame(this._KeyFrameName);
-      this._KeyFrameName = null;
-    }
-
-    if (this._AdvanceListener) {
-      this._ClearAdvanceTimer();
-      this._AdvanceListener(progress);
-      this._AdvanceListener = null;
-    }
-
-    return progress;
-  }
-
-  GetProgress() {
-    const s = window.getComputedStyle(this._TracerDiv);
-    if (s.transform.length === 0) {
-      // 没有transform，以目前调查结果认为是动画结束
-    } else if (s.transform.length > 0 && s.transform !== "none") {
-      const trans_values = __parseTransform(s.transform);
-      if (trans_values !== null) {
-        return (trans_values.params[4] / 1000); // type is matrix...
-      }
-      console.error("Error:internal error");
-      return 0;
-    }
-    // none的场合代表动画结束了
-    return 1;
-  }
-
-  _BuildTraceKeyFrame(starter_progress/* 0~1 */, token, dynamic_count) {
-    const keyframe_name = `_AnimateProgress_${token}_${dynamic_count}`;
-    const keyframe_control = getStaticFrameControl();
-    const animate_progress = `@keyframes ${keyframe_name}
-       {0%{transform:translate3d(${Math.floor(starter_progress * 1000)}px,0,0)}
-       100%{transform:translate3d(1000px,0,0)}}`;
-    keyframe_control.insertRule(animate_progress);
-    return keyframe_name;
-  }
-
-  _RemoveTraceKeyFrame(name) {
-    const keyframe_control = getStaticFrameControl();
-    keyframe_control.removeRule(name);
-  }
-}
-
-class AnimationGroupProgress {
-  constructor(layout_view, steps_total) {
-    this._TracerDiv = _BuildTracer(layout_view);
-    this._IdToken = (sIdToken++);
-    this._KeyFrameNameArray = null;
-    this._StepsTotal = steps_total;
-    this._RunAnimList = null;
-
-    if (!this._TracerDiv.hasOwnProperty("_ForgeProgressToken")) {
-      this._TracerDiv._ForgeProgressToken = 0;
-    }
-
-    // 阻止事件上发到父节点
-    this._OnEndListener = ((event) => {
-      event.stopPropagation();
-    });
-
-    // TODO: 要支持Android WebView? WebkitAnimationEnd...
-    this._TracerDiv.addEventListener("animationend", this._OnEndListener);
-  }
-
-  Start(steps_settings/* [{easing:xxx, duration:xxxx},{}...] */) {
-    // 保证可用的Animation动画
-    if (this._KeyFrameName) {
-      console.error("Error: Asset!! should Stop before start");
-    }
-
-    // 交替token，避免animation属性中KeyFrames名字不变导致不触发动画启动
-    this._TracerDiv._ForgeProgressToken = (this._TracerDiv._ForgeProgressToken + 1) % 2;
-    this._BuildTraceKeyFrameGroup(this._IdToken, this._TracerDiv._ForgeProgressToken);
-
-    this._RunAnimList = this._ConvertToAnimationStyle(steps_settings);
-    this._TracerDiv.style.animation = this._RunAnimList[0];
-  }
-
-  // 下个步骤的触发由KeyFrameGroupAnimation来完成
-  TriggerNextStep(index) {
-    this._TracerDiv.style.animation = this._RunAnimList[index];
-  }
-
-  // 停止进度跟进，并返回进度值
-  Stop() {
-    const progress = this.GetProgress();
-    this._TracerDiv.style.animation = null;
-
-    if (this._KeyFrameNameArray !== null) {
-      this._RemoveTraceKeyFrameGroup();
-      this._KeyFrameNameArray = null;
-    }
-
-    return progress;
-  }
-
-  GetProgress() {
-    const s = window.getComputedStyle(this._TracerDiv);
-    if (s.transform.length === 0) {
-      // 没有transform，以目前调查结果认为是动画结束
-    } else if (s.transform !== "none") {
-      const trans_values = __parseTransform(s.transform);
-      if (trans_values !== null) {
-        const p = (trans_values.params[4] / (this._StepsTotal * 100)); // type is matrix...
-        // console.log("Report progress=" + p + " v=" + trans_values.params);
-        return p;
-      }
-      console.error("Error:internal error");
-      return 0;
-    }
-    // none的场合代表动画结束了
-    return 1;
-  }
-
-  _BuildTraceKeyFrameGroup(token, dynamic_count) {
-    this._KeyFrameNameArray = new Array(this._StepsTotal);
-    const keyframe_control = getStaticFrameControl();
-    for (let i = 0; i < this._KeyFrameNameArray.length; i++) {
-      const step_name = (i === this._KeyFrameNameArray.length - 1 ? "finalStep" : `${i}`);
-      const keyframe_name = `_AnimateGroupProgress_${token}_${dynamic_count}_Cnt_${step_name}`;
-      const animate_progress = `@keyframes ${keyframe_name}
-        {0%{transform:translate3d(${100 * i}px,0,0)}
-         100%{transform:translate3d(${100 + 100 * i}px,0,0)}}`;
-      keyframe_control.insertRule(animate_progress);
-      this._KeyFrameNameArray[i] = keyframe_name;
-    }
-  }
-
-  _RemoveTraceKeyFrameGroup() {
-    const keyframe_control = getStaticFrameControl();
-    this._KeyFrameNameArray.forEach((name) => {
-      keyframe_control.removeRule(name);
-    });
-  }
-
-  _ConvertToAnimationStyle(steps_settings) {
-    const anim_list = [];
-    for (let i = 0; i < steps_settings.length; i++) {
-      let timing_func = "linear";
-      const settings = steps_settings[i];
-      if (settings.easing) {
-        timing_func = convertTimingFunc(settings.easing);
-      }
-      anim_list.push(`${this._KeyFrameNameArray[i]} ${settings.duration / 1000}s ${timing_func}`);
-    }
-
-    return anim_list;
-  }
-}
-
-export default AnimationProgress;
-export {
-  AnimationGroupProgress,
-  AnimationProgress
-};