zarm/lib/notice-bar/hooks.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = useAnimationDuration;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var _keyframes = require("../utils/keyframes");

function useAnimationDuration(_ref) {
  var noticeBarRef = _ref.noticeBarRef,
      contentRef = _ref.contentRef,
      delay = _ref.delay,
      speed = _ref.speed,
      keyframeName = _ref.keyframeName;

  var _useState = (0, _react.useState)(0),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      animationDuration = _useState2[0],
      setAnimationDuration = _useState2[1];

  var updateScrolling = (0, _react.useCallback)(function () {
    if (!noticeBarRef.current || !contentRef.current) return;
    var wrapWidth = noticeBarRef.current.getBoundingClientRect().width;
    var contentWidth = contentRef.current.getBoundingClientRect().width;

    if (contentWidth > wrapWidth) {
      // 完整的执行时间 = 前后停留时间 + 移动时间
      var newAnimationDuration = Math.round(delay * 2 + contentWidth / speed * 1000); // 计算停留时间占总时间的百分比

      var delayPercent = Math.round(delay * 100 / newAnimationDuration); // 删除之前的 keyframe 定义

      if ((0, _keyframes.existKeyframe)(keyframeName)) {
        (0, _keyframes.removeKeyframe)(keyframeName);
      } // 增加重新计算后的 keyframe


      (0, _keyframes.addKeyframe)(keyframeName, "\n        0%, ".concat(delayPercent, "% {\n          -webkit-transform: translate3d(0, 0, 0);\n          transform: translate3d(0, 0, 0);\n        }\n\n        ").concat(100 - delayPercent, "%, 100% {\n          -webkit-transform: translate3d(").concat(-(contentWidth - wrapWidth), "px, 0, 0);\n          transform: translate3d(").concat(-(contentWidth - wrapWidth), "px, 0, 0);\n        }\n      "));
      setAnimationDuration(newAnimationDuration);
    }
  }, [keyframeName, delay, speed, noticeBarRef, contentRef]);
  (0, _react.useEffect)(function () {
    updateScrolling();
  }, [updateScrolling]);
  return animationDuration;
}