博客图形改进和新功能

2025年1月07日

Available in :

我很高兴为您介绍博客的最新改进，这些改进将丰富您的阅读体验！

使用 Framer Motion 实现流畅动画

为了使导航更加愉悦和现代化，我集成了 React 的强大动画库 Framer Motion。您现在将注意到：

页面之间的流畅过渡
文章卡片上的精细动画
更优雅的悬停效果
更流畅的加载动画

以下是本博客中文章卡片的动画实现方式：

tsx
1import { motion } from 'framer-motion';
2
3export default function PostCard({ post }) {
4  return (
5    <motion.article
6      initial={{ opacity: 0, y: 20 }}
7      animate={{ opacity: 1, y: 0 }}
8      transition={{
9        duration: 0.4,
10        delay: index * 0.1,
11        ease: [0.25, 0.1, 0.25, 1],
12      }}
13    >
14      {/* 卡片内容 */}
15    </motion.article>
16  );
17}

这个动画使每个文章卡片以轻微的垂直偏移和淡入效果出现，在页面加载时创建流畅的序列。

简化预约系统

为了方便读者，我添加了通过 Calendly 直接联系的按钮。现在您可以轻松安排预约来讨论：

您的技术项目
合作机会
软件架构咨询

该按钮可以在主页和"关于我"部分找到。

未来计划

这些改进仅仅是开始！我将继续致力于：

性能优化
添加新的交互组件
提高可访问性
新的社区功能
最重要的是，新文章 😉

欢迎在评论区分享您的反馈和建议！

Recommended next reads

Continue with these curated articles on the same topic.

2024年11月05日不懂装懂的批评艺术：程序员的经典现象

软件开发领域总是吸引着批评专家却不见实践高手。让我们深入探讨这个阻碍创新的有毒现象。

2024年11月01日昔日时光：回忆那个永不坏的诺基亚

用幽默的眼光回顾诺基亚，那个让我们远离屏幕、拉近人与人距离的永不坏手机。

2024年10月31日为什么在2024年末重启开发者博客？

作为开发者重新发现个人博客带来的表达自由和内容掌控

使用 Framer Motion 实现流畅动画

为了使导航更加愉悦和现代化，我集成了 React 的强大动画库 Framer Motion。您现在将注意到：

页面之间的流畅过渡

文章卡片上的精细动画

更优雅的悬停效果

更流畅的加载动画

以下是本博客中文章卡片的动画实现方式：

tsx

1import { motion } from 'framer-motion';
2
3export default function PostCard({ post }) {
4  return (
5    <motion.article
6      initial={{ opacity: 0, y: 20 }}
7      animate={{ opacity: 1, y: 0 }}
8      transition={{
9        duration: 0.4,
10        delay: index * 0.1,
11        ease: [0.25, 0.1, 0.25, 1],
12      }}
13    >
14      {/* 卡片内容 */}
15    </motion.article>
16  );
17}

这个动画使每个文章卡片以轻微的垂直偏移和淡入效果出现，在页面加载时创建流畅的序列。