63 lines
2.0 KiB
JavaScript
63 lines
2.0 KiB
JavaScript
"use client";
|
||
// import { Animated, Easing } from "react-native";
|
||
import React, { useState, useEffect } from "react";
|
||
import { Image, NoticeBar } from "antd-mobile";
|
||
export default function ScrollNotice({ content }) {
|
||
// 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">
|
||
<NoticeBar
|
||
icon={
|
||
<Image
|
||
width={14}
|
||
height={14}
|
||
className="rounded-full"
|
||
src={
|
||
process.env.NEXT_PUBLIC_WEB_ASSETS_URL + "/icons/32DP/notice.png"
|
||
}
|
||
fit="cover"
|
||
/>
|
||
}
|
||
bordered={false}
|
||
content={content}
|
||
style={{
|
||
"--background-color": "transparent",
|
||
"--height": "max-content",
|
||
border: "none",
|
||
padding: 0,
|
||
}}
|
||
/>
|
||
<div className="mr-2"></div>
|
||
</div>
|
||
);
|
||
}
|