#优质博文 #前端 #动画 #css #交互设计 #react

云音乐2023年度听歌报告动效大揭秘

【这个好啊，很长，推荐阅读】

AI 摘要：
动效设计流程
年度听歌报告是网易云音乐的保留节目，本文介绍了2023年度报告的动效设计过程。传统流程为设计师制作动画效果并交给开发人员实现代码，但对于年度听歌报告这样的大项目，此流程效率低。为提高效率，动效设计师直接用代码实现动效，前端专注业务逻辑，最后进行代码合并。

翻页动效
主要使用React的CSSTransition组件实现页面的淡入淡出效果，并设置合适的背景色以避免翻页时的闪烁感。

文字动效
使用CSS Animation实现文字的渐现和位移效果，主要通过调整animation-timing-function属性来控制动画节奏。

简单页面动效
具体页面如“初次相遇”页面，通过父容器和子容器分别实现流星从天而降、爆闪和循环闪烁的效果。

通过优化设计和实现流程，以及巧妙运用React和CSS技术，网易云音乐2023年度听歌报告实现了温暖轻快的动画效果。

via 微信公众号 网易云音乐技术团队

Weixin Official Accounts Platform

云音乐2023年度听歌报告动效大揭秘

2023网易云音乐年度听歌报告已经上线，你它被刷屏了吗？有没有好奇那些精美的动效是如何制作的呢？这篇文章将为你揭秘年报的动效是如何设计和落地的。

#碎碎念
买了个狗窝沙发（顾名思义），这下可以在客厅躺着办公了嘿嘿嘿真软啊！

#优质博文 #ReactNative #跨端 #tailwind #rn
原来 React Native 已经如此成熟了

【能用 tailwind 了确实爽，前阵子试了试】

AI 摘要：React Native 的最新发展和优势
作者详细介绍了 React Native 的最新进展和成熟度，特别是以下几个关键点：

1. Hermes 引擎：提升了 JavaScript 的解析和编译效率，使应用程序运行更快。
2. JSI 通信方式：通过 C++ 实现的轻量级工具，减少了 JS 和 Native 之间的通信成本。
3. Fabric 渲染引擎：提高了 UI 渲染性能，支持高频交互和同步渲染。
4. Hades 垃圾回收器：在后台并行执行垃圾回收，减少程序运行延迟。
5. Expo 框架：提供了完整的应用层框架和沙箱能力，降低了开发门槛。
6. React Native IDE：VSCode 插件，简化了开发和调试过程。
7. Tailwindcss 集成：实现了一致的开发体验，简化了样式编写。

总结认为，React Native 生态系统已经非常成熟，并且未来发展可期。

via 微信公众号 这波能反杀

Weixin Official Accounts Platform

原来 React Native 已经如此成熟了

#优质博文 #阮一峰的科技周刊 #前端 #css
科技爱好者周刊（第 307 期）：不要看重 Product Hunt

1. CSS 锚点定位（英文） 📓 Chrome 125 引入了 CSS 锚点定位（Anchor Positioning），这种新语法使得元素之间相对定位变得异常容易。
2. 内存的栈和堆的区别（英文） 📓 本文解释了内存的基本知识，不涉及细节，只解说概念，说得挺好的。
3. 英文博客汇聚 🧰 该网站汇总每周的英文技术博客，并提供每篇文章的中文摘要。

【我发现我变挑剔多了，好多工具都不想放进来qwq看看文章吧还是】

Coryrylan

Flow Charts with CSS Anchor Positioning

Learn how to use CSS Anchor Positioning to create flow charts and diagram with just CSS.

#碎碎念 #惊悚时刻
⚠️⚠️⚠️大蟑螂
睡前想刷牙，开门准备拿牙刷发现上面一只大蟑螂…………天知道我的心理阴影面积有多大
北方人的我：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊想死（尖叫）
南方人的老妈：小场面（然后熟练弄死冲马桶）

#优质博文 #前端 #浏览器 #插件开发 #pdf
基于Chrome扩展的浏览器可信事件与网页离线PDF导出

AI 摘要：这篇文章探讨了如何通过Chrome扩展实现浏览器可信事件和网页离线PDF导出。首先，作者介绍了使用Chrome DevTools Protocol协议与浏览器进行交互，以实现自动化任务，比如复制和粘贴操作。文章详细描述了如何在扩展中模拟用户操作以绕过浏览器的安全限制，通过注入脚本和使用DevTools Protocol模拟按键事件，实现内容的选中和复制。接着，作者探讨了如何通过该协议实现网页的PDF导出，利用Page.printToPDF方法生成自定义的PDF文件，并通过扩展的下载API实现自动下载。文中还提供了具体的代码示例和调试方法，帮助开发者实现这些功能。

via WindrunnerMax

#碎碎念
深圳的延迟真低啊