一个有趣的项目

展示

引入

直接引入

<div class="sakana-box"></div>
<script src="https://cdn.jsdelivr.net/npm/sakana"></script>
<script>
Sakana.init({
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  scale:      .5,                // 缩放倍数
  canSwitchCharacter: true,      // 允许换角色
});
</script>

通过 NPM 安装&引入

npm i sakana -d

import Sakana from 'sakana';

Sakana.init({
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  scale:      .5,                // 缩放倍数
  canSwitchCharacter: true,      // 允许换角色
});

选项与方法

// 设定静音
Sakana.setMute(true);

// 获取静音状态
const { isMute } = Sakana.Voices;

// 启动
const sakana = Sakana.init({
  // 选项: 默认值
  el:         '.sakana-box',     // 启动元素 node 或 选择器
  character:  'takina',          // 启动角色 'chisato','takina' 
  inertia:    0.01,              // 惯性
  decay:      0.99,              // 衰减
  r:          60,                // 启动角度
  y:          10,                // 启动高度
  scale:      1,                 // 缩放倍数
  translateY: 0,                 // 位移高度
  canSwitchCharacter: false,     // 允许换角色
  onSwitchCharacter(character){  // 切换角色回调
    console.log(`${character} dayo~`);
  },
});

// 设定归零角度
sakana.setOriginRotate(10);

// 获取角色运行状态
const v = sakana.getValue();

// 确保运行
sakana.confirmRunning();

// 切换角色
sakana.switchCharacter();

// 暂停动作
sakana.pause();

// 恢复动作
sakana.play();

// 切换特定角色
sakana.setCharacter('chisato');

放在窗口右下角

html .sakana-box{
  position: fixed;
  right: 0;
  bottom: 0;
  transform-origin: 100% 100%; /* 从右下开始变换 */
}

注意事项

国内部分地区因为不可抗拒因素无法访问 jsdelivr