sakana 使用记录

两种方式，其中 sakana-widget 自定义角色方便些

1. sakana 方式

🐟「Sakana!」石蒜模拟器 github

要修改的文件（别的主题可能是其他文件）：
blog/themes/redefine/layout/_partials/scripts.ejs

要加的内容：

<!-- Sakana 动画盒子 ↓ -->
<div class="sakana-box" style="position:fixed;bottom:10px;right:10px;transform-origin: 100% 100%;">
</div>
<script>
    function initSakanaTest() {
        // 初始化 Sakana 动画并配置参数
        const sakana = Sakana.init({
            el: '.sakana-box',             // 启动元素选择器
            character: 'takina',           // 启动角色，可以是 'chisato' 或 'takina'
            inertia: 0.001,                 // 惯性
            decay: 0.999,                   // 衰减
            r: 10,                         // 启动角度
            y: 10,                         // 启动高度
            scale: 0.5,                    // 缩放倍数
            translateY: 0,                 // 位移高度
            canSwitchCharacter: true,      // 允许换角色
            onSwitchCharacter(character) { // 切换角色回调
                console.log(`${character} dayo~`);
            }
        });
        // 设置初始状态
        Sakana.setMute(true);             // 静音模式
        sakana.setOriginRotate(0);       // 设定归零角度
        // 检查并确保动画正常运行
        sakana.confirmRunning();
    }
</script>
<script onload="initSakanaTest()" src="https://cdn.jsdelivr.net/npm/sakana"></script>
<!-- Sakana 动画盒子 ↑ -->

2. sakana-widget 方式

sakana-widget github

要修改的文件（同上）：
blog/themes/redefine/layout/_partials/scripts.ejs

要加的内容：
容器

<div id="asuna-widget"></div>
<div id="kirito-widget"></div>

样式

<style>
    /* asuna-widget */
    #asuna-widget {
        display: none;
    }
    /* 仅在屏幕宽度大于等于 768px 时显示 */
    @media only screen and (min-width: 768px) {
        #asuna-widget {
            display: block;
            position: fixed;
            left: 1%;
            bottom: 4%;
        }
    }

    /* kirito-widget */
    #kirito-widget {
        display: none;
    }
    /* 仅在屏幕宽度大于等于 768px 时显示 */
    @media only screen and (min-width: 768px) {
        #kirito-widget {
            display: block;
            position: fixed;
            right: 5%;
            bottom: 5%;
        }
    }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.css" />

脚本

<script>
    function initializeWidgets() {
        initAsunaWidget();
        initKiritoWidget();
    }
    function initAsunaWidget() {
        const asuna = SakanaWidget.getCharacter('takina');
        asuna.image = 'https://blog.megumiai.com/images/sao/asuna-removebg-preview_600.png';
        asuna.initialState = {
            ...asuna.initialState,
            d: 1, // 衰减
            i: 0.0001, // 惯性
            r: 0, // 角度
            // s: 0.001, // 粘性
            // t: -10, // 垂直速度
            // w: -10, // 水平速度
            y: 10 // 高度
        };
        SakanaWidget.registerCharacter('asuna', asuna); // 注册新的角色
        new SakanaWidget({
            character: 'asuna',        // 自定义角色
            size: 330,                // 组件大小（默认 200）
            // autoFit: true,            // 自动适应容器大小
            controls: false,           // 显示控制栏
            rod: false,                // 显示支撑杆
            draggable: false,          // 允许拖动
            stroke: {                 // Canvas 线条设置
                color: '#59442d',       // 线条颜色
                width: 5,               // 线条宽度
            }
        }).mount('#asuna-widget');
    }
    function initKiritoWidget() {
        const kirito = SakanaWidget.getCharacter('takina');
        kirito.image = 'https://blog.megumiai.com/images/sao/kirito-removebg-preview_600.png';
        kirito.initialState = {
            ...kirito.initialState,
            d: 1, // 衰减
            i: 0.0001, // 惯性
            r: 0, // 角度
            // s: 0.001, // 粘性
            // t: 100000, // 垂直速度
            // w: 10, // 水平速度
            y: 10 // 高度
        };
        SakanaWidget.registerCharacter('kirito', kirito); // 注册新的角色
        new SakanaWidget({
            character: 'kirito',        // 自定义角色
            size: 250,                // 组件大小（默认 200）
            // autoFit: true,            // 自动适应容器大小
            controls: false,           // 显示控制栏
            rod: false,                // 显示支撑杆
            draggable: false,          // 允许拖动
            stroke: {                 // Canvas 线条设置
                color: '#59442d',       // 线条颜色
                width: 5,               // 线条宽度
            }
        }).mount('#kirito-widget');
    }
</script>
<script async onload="initializeWidgets()" src="https://cdn.jsdelivr.net/npm/sakana-widget@2.7.0/lib/sakana.min.js">
</script>

成功获得门神 ✅