zarm/es/notice-bar/hooks.js

基于 React 的移动端UI库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useCallback, useEffect, useState } from 'react';
import { addKeyframe, removeKeyframe, existKeyframe } from '../utils/keyframes';
export default function useAnimationDuration(_ref) {
  var noticeBarRef = _ref.noticeBarRef,
      contentRef = _ref.contentRef,
      delay = _ref.delay,
      speed = _ref.speed,
      keyframeName = _ref.keyframeName;

  var _useState = useState(0),
      _useState2 = _slicedToArray(_useState, 2),
      animationDuration = _useState2[0],
      setAnimationDuration = _useState2[1];

  var updateScrolling = 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 (existKeyframe(keyframeName)) {
        removeKeyframe(keyframeName);
      } // 增加重新计算后的 keyframe


      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]);
  useEffect(function () {
    updateScrolling();
  }, [updateScrolling]);
  return animationDuration;
}