tiefen_space_h5/app/noticeDetail/components/ScrollNotice/index.js

"use client";
// import { Animated, Easing } from "react-native";
import React from "react";
import { NoticeBar } from "antd-mobile";
import OwnIcon from "@/components/OwnIcon";
import { useRouter } from "next/navigation";
import baseRequest from "@/utils/baseRequest";

export default function ScrollNotice({ data }) {
  const base = baseRequest();

  const router = useRouter();
  // const [fadeAnim] = useState(new Animated.Value(300)); // 透明度初始值为0
  // let animation = Animated.timing(fadeAnim, {
  //   toValue: -(length * 60),
  //   duration: 4000,
  //   delay: 500,
  //   easing: Easing.linear,
  //   useNativeDriver: false,
  //   useNativeDriverForTransform: true, // 如果动画涉及transform属性，则需要此设置
  // });
  // useEffect(() => {
  //   return () => {
  //     animation && animation.stop();
  //     animation = null;
  //   };
  // }, []);

  // const runAnimation = () => {
  //   animation &&
  //     animation.start(() => {
  //       // 动画完成时的回调，重置动画值并再次运行动画以实现循环
  //       fadeAnim.setValue(length * 80); // 重置动画值（如果需要）
  //       runAnimation(); // 再次运行动画
  //     });
  // };

  // useEffect(() => {
  //   runAnimation(); // 组件挂载时开始动画
  //   // 注意：这里没有清理函数，因为动画是无限循环的。
  //   // 如果你需要在组件卸载时停止动画，你需要实现一个机制来跟踪组件的状态，并在适当时调用`stopAnimation`。
  // }, [fadeAnim]);
  return (
    <div
      className="bg-[#301024] border-2 border-[#FF518F26] px-4 py-3 rounded-xl flex-row"
      onClick={() => {
        const links = data?.hyperlinks;
        if (links.length > 1) {
          router.push(links[1]?.url);
        } else {
          if (links[0]?.action === "outward") {
            // 在新的标签也打开
            window.open(links[0]?.url);
          } else {
            // alert(links[0]?.params);
            // alert(encodeURIComponent(links[0]?.params));
            router.push(
              `/webView/${encodeURIComponent(
                links[0]?.url +
                  (links[0]?.action === "webViewWithOutHeaderInward" ||
                  links[0]?.action === "webViewHeaderInward"
                    ? `?base=${encodeURIComponent(JSON.stringify(base))}`
                    : "")
              )}`
            );
          }
        }
      }}
    >
      <NoticeBar
        icon={
          <OwnIcon
            className="rounded-full w-[14px] h-[14px]"
            src="/icons/32DP/notice.png"
            fit="cover"
          />
        }
        bordered={false}
        content={<div>{data.content}</div>}
        style={{
          "--background-color": "transparent",
          "--height": "max-content",
          border: "none",
          padding: 0,
        }}
      />
      <div className="mr-2"></div>
    </div>
  );
}