灵动岛没什么好说的 就是打磨css动画 主要是动画效果比较难模仿 具体可以看预览
这里 主要说动态的阴影效果是如何根据“光源所改变” 核心思路
如果使用css写过时钟动画的 应该都清楚 秒针是跟随钟盘转的
可以吧光源当成秒针理解
只是这里我们把钟盘透明
就好像一个光点围着屏幕转 模拟太阳
我们以 9点钟方向为 0度 也就是 rotate(0deg)
转动钟盘 就是不断的改变度数 rotate(0deg) -> 360deg
这里我们把 0-90deg 90-180deg 180-270deg 270-360deg
所涵盖的范围 分成4分
阴影 0-90 时
水平方向的阴影 是从元素最右侧 慢慢往中间靠
垂直方向的阴影 是从没有 到 元素底部
为了方便直观 看我灵魂画作
其他3份 自己总结一下吧 一样的逻辑 略有变化
我们接下来看实现 这里使用React jsx更改样式比较灵活直观
一 先画圆
point就是小黄点 css代码
二 用js控制圆动起来
组件代码 第二行是全局状态管理库recoil 上手简单
因为其他地方会用到 组件加载完成后 每0.3秒转1度 并记录当前度数
三 读取度数 计算阴影相关参数
这里直接写了个hook 主要根据光源所在的 4个象限来分别计算
脑补一下象限 方便理解
四 使用 hook 渲染ui
预览地址: wdppx.gitee.io/light/ 仓库地址: gitee.com/wdppx/light
