ce6aa207e9
- 将所有图片路径从绝对路径改为使用 process.env.PUBLIC_URL - 修复 HomePage.tsx 中所有图片引用 - 修复 CoursePage.tsx 中所有图片引用 - 确保图片在 GitHub Pages 上正确加载 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.5 KiB
JavaScript
42 lines
1.5 KiB
JavaScript
import { px } from 'motion-dom';
|
|
|
|
function pixelsToPercent(pixels, axis) {
|
|
if (axis.max === axis.min)
|
|
return 0;
|
|
return (pixels / (axis.max - axis.min)) * 100;
|
|
}
|
|
/**
|
|
* We always correct borderRadius as a percentage rather than pixels to reduce paints.
|
|
* For example, if you are projecting a box that is 100px wide with a 10px borderRadius
|
|
* into a box that is 200px wide with a 20px borderRadius, that is actually a 10%
|
|
* borderRadius in both states. If we animate between the two in pixels that will trigger
|
|
* a paint each time. If we animate between the two in percentage we'll avoid a paint.
|
|
*/
|
|
const correctBorderRadius = {
|
|
correct: (latest, node) => {
|
|
if (!node.target)
|
|
return latest;
|
|
/**
|
|
* If latest is a string, if it's a percentage we can return immediately as it's
|
|
* going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number.
|
|
*/
|
|
if (typeof latest === "string") {
|
|
if (px.test(latest)) {
|
|
latest = parseFloat(latest);
|
|
}
|
|
else {
|
|
return latest;
|
|
}
|
|
}
|
|
/**
|
|
* If latest is a number, it's a pixel value. We use the current viewportBox to calculate that
|
|
* pixel value as a percentage of each axis
|
|
*/
|
|
const x = pixelsToPercent(latest, node.target.x);
|
|
const y = pixelsToPercent(latest, node.target.y);
|
|
return `${x}% ${y}%`;
|
|
},
|
|
};
|
|
|
|
export { correctBorderRadius, pixelsToPercent };
|