古茗前端 第十五期周刊

资讯

文章推荐

canvas 核心技术-如何实现碰撞检测

针对古茗小程序动效场景中,针对复杂动效可能我们采用 css3 的 animation 属性不好实现,需要通过 canvas 实现动效。有一种场景,在游戏或者动画中,运动的物体在变化的过程中,它们是有可能碰撞在一起的,这篇介绍了如何进行碰撞检测。

Controlling CSS AnimationsTransitions with JavaScript

关于 js 控制 CSS 的基本思路,如何暂停 transition 以及在 animation 执行过程中获取当前keyframes的百分比,可以实现一些联动动画如进度条伸长过程中点亮碰到的节点。

  1. getComputedStyle有助于操作 CSS 过渡。
  2. transitionend当使用 JavaScript 操作 CSS 转换和动画时,它的相关事件非常有用。
  3. 可以通过获取 JavaScript 中的样式表来更改 CSS 动画的当前值,但可能会非常复杂。
  4. 在 JavaScript 中,CSS 过渡通常比 CSS 动画更容易使用。
  5. CSS 矩阵通常很难处理,尤其是对于初学者来说。
  6. 思考应该做什么并计划如何做对于动画编码至关重要。

Semi D2C 设计稿转代码的演进之路

23年6月,Figma 推出了围绕变量和变体的设计功能,使得设计组件和前端组件能做得到工程级别的一致性保证,从而有了 C2D 的设计软件基础。Semi 组件库是我认为当前页面开源产品中最合适前端和设计师的设计组件库方案。由此保证的 D2C 的技术方案也相当推荐。

分布式理论(上篇)

上篇讲述了分布式的概念、分布式架构演进和分布式中的一些基本理论;文章里包含下篇,主要讲述分布式数据同步的相关算法,看完之后能够对分布式有个大致了解。

前端版本过低引导弹窗方案分享

用户被动去感知版本的变化,以及如何拿到本地的版本和云端的版本号 ,将两个版本进行对比来引导用户强制更新为最新版本

防呆设计的10个通用设计原则

10分钟阅读时间,快速了解防呆设计原则。 文章概要:

  1. 防呆是什么概念
  2. 10条防呆设计原则分别是什么
  3. 具体每一条防呆设计原则的工业设计介绍以及对于到web交互设计的具体实践方式

小茗推荐

最后

关注公众号「Goodme前端团队」,获取更多干货实践,欢迎交流分享。

相关推荐
噢,我明白了36 分钟前
表单的完整 CRUD 练习【极简个人记账本】(含前端后端链接mySQL)
java·前端·数据库·mysql
幽络源小助理39 分钟前
MacCMSPro版视频影视系统源码_全开源高可用视频平台解决方案
前端·php·php源码
不会敲代码17 小时前
手写 Zustand:三十分钟带你搞懂状态管理库的核心原理
前端·javascript·源码
神奇的程序员7 小时前
重构了自己5年前写的截图插件
前端·javascript·架构
UXbot9 小时前
一人独立交付 UI + 前端:AI 驱动 UI 设计工具的五大功能模块深度评测
前端·低代码·ui·设计模式·交互
kobesdu9 小时前
【ROS2实战笔记-19】ROS2 生命周期节点的启动顺序、状态转换陷阱与热备方案
java·前端·笔记·机器人·ros·ros2
诚实可靠王大锤9 小时前
React Native 输入框与按钮焦点冲突解决方案(rn版本0.70.3)
前端·javascript·react native·react.js
kyriewen9 小时前
测试妹子让我写单测,我偷偷用AI一天干完一周的活
前端·chatgpt·cursor
2601_957780849 小时前
Claude Code 2026年最新部署指南:从环境搭建到技能扩展
前端·人工智能·ai编程·claude
zhangfeng113310 小时前
workbuddy 专家 “前端开发师” 结合nvidia-mistral-small-4-119b-2603 项目计划-前端界面开发.md
前端·人工智能·免费