其他
QQ 25年技术巡礼丨技术探索下的清新设计,打造轻盈简约的QQ9
👉目录
1 极光动画
2 从灰阶图到多彩图
3 性能优化
4 灵动的 3D 企鹅
5 展望
最新发布的手机 QQ 9.0 界面轻盈换新,简洁纯粹,氛围轻松,上线后收获了许多网友的好评。腾讯云开发者社区联手 QQ 技术团队,撰写了本篇文章,向大家介绍其中像极光一样灵动的动效,和如弹簧一般可以自由拨动的3D企鹅的技术实现,以及对于视觉打磨和性能优化背后的故事。QQ 25周年技术巡礼系列文章陆续产出中,请大家持续关注腾讯云开发者公众号。
01
f(x) = 3x^2-2x^3
f(x) = 6x^5-15x^4+10x^3
02
// 获取噪音灰度值
float gray = noise(x, y);
// 颜色区间大小
float rangeSize = 1 / colorCount;
// 对应的颜色索引
int colorIndex = ceil(gray / rangeSize);
// 把gray值转换成两个不同颜色的区间值
gray -= rangeSize * colorIndex;
gray /= rangeSize;
// 颜色插值计算
mix(color1, color2, gray);
03
04
enum class Type : uint8_t {
SUN, // 太阳光
DIRECTIONAL, // 指向光
POINT, // 点光源
FOCUSED_SPOT, // 聚光灯
SPOT, // 斑点光源
};
f = -k·x
m * d²x/dt² + c * dx/dt + k * x = 0
m 是系统的质量。 c 是阻尼系数,它决定了阻尼力的大小。 k 是弹簧的刚度系数,它决定了恢复力的大小。 x 是系统的位移。 dx/dt 是系统的速度。 d²x/dt² 是系统的加速度。
欠阻尼(Underdamped):当 c² < 4mk 时,系统会发生振荡,但振幅随时间逐渐减小,直到最终停止。这是最常见的情况,通常在动画中模拟弹簧时会使用这种情况。 临界阻尼(Critically Damped):当 c² = 4mk 时,系统会以最快的速度返回到平衡位置,而不会发生振荡。这种情况通常用于需要快速稳定的系统,如汽车悬挂系统。 过阻尼(Overdamped):当 c² > 4mk 时,系统返回到平衡位置的速度会比临界阻尼慢,且不会发生振荡。这种情况在需要非常平稳、没有振荡的系统中使用。
05
📢📢欢迎加入腾讯云开发者社群,享前沿资讯、大咖干货,找兴趣搭子,交同城好友,更有鹅厂招聘机会、限量周边好礼等你来~
(长按图片立即扫码)