明日方舟干员名片｜ 「青训营 X 码上掘金」主题创作

当青训营遇上码上掘金.

主题 ：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

灵感来源

在逛明日方舟官网时, 发现其介绍干员的动画挺有意思, 小小的模拟一下

思路

1. 所有组件都有一个渐隐动画, 动画基于transition可以比较好做, 但是中间有一个突变到另一个方向的过程, 所以还是使用keyframe实现

@keyframes fade {
	0% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
	50% {
		opacity: 0;
		transform: translate3d(-100%, 0, 0);
	}
        //突变到另一个方向
	51% {
		opacity: 0;
                //使用3d可以提高性能
		transform: translate3d(100%, 0, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

2. 文字边框的装饰组件可以使用-webkit-text-fill-color实现
3. 对于组件动画的控制, 我选择了在css里面用一个大的类包裹, 再设置为父类的类有动画效果, 然后再js控制组件的类名的存在与否, 这样只需要控制一个组件的类名就可以控制这个组件下的所有子组件的渐隐动画
4. 由于是点击一次切换一次类名, 所以会导致要点击两次才会有动画效果, 这个时候我们可以写一个hook来自动在一定时间后变换state

const useToggleDelayState = (initialState: boolean, delay: number) => {
const [state, setState] = useState(initialState);
  let timer: null | NodeJS.Timeout = null;
  //每次调用toggle都会变换state并在delay ms后变换回原来的state
	const toggle = useCallback(() => {
		setState((prevState) => !prevState);
		setTimeout(() => {
			setState((prevState) => !prevState);
		}, delay);
	}, [delay]);
	return [state, toggle] as const;
};
export default useToggleDelayState;

存在的问题

1. 没有很好的调试缓动函数以及关键帧的参数, 导致动画效果不尽人意
2. 没有做节流处理, 导致多次连续点击没有动画效果