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>
|
|||
|
|
);
|
|||
|
|
}
|