01 - 钢琴键盘模拟器

01 - 钢琴键盘模拟器

• 介绍

  点按，长按会有特别的动画；音乐也会根据点按长按有各自的效果。

  链接：https://jacket-sikaha.github.io/javaScript30-Winter-vacation-to-practice/01 - 钢琴键盘模拟器/index-START.html

• 设计思路

1. 具体操作为键盘操作控制2样东西 声音，样式；
2. 事务流程：点击按键 -> 发出声音 + 添加样式 / 松开按键 -> 声音停止 + 样式删除
3. 确定监听对象和事件window和keydown，keyup；keydown是按住不放触发，keyup是松开才触发
4. 熟悉 audio标签对象的操作和KeyboardEvent 对象
5. 添加/删除样式方法： element.classList.add() / element.classList.remove()

• 注意问题

1. 键入的两种监听方式获取的keyCode都会读取键盘所以键，因此需要对键入值做出判断
2. keydown的特殊性质按下会不断触发，event.repeat（返回是否重复按住某个键）令其按压状态只执行一次事务
3. 快速键入问题，audio对象每次得重新加载一次再播放音乐以求模拟真实钢琴

//获取符合键入要求的keycode以备比较
  let keycode =Array.from(
      	document.querySelectorAll('.keys .key')) 
  		.map(value =>  value.dataset.key);
  window.addEventListener('keydown',function (event) {
    //避免触碰其他不必要的键导致获取的dom对象空指针
    if (!keycode.some(
      		value => value === event.keyCode.toString()))			{return;}
    if (!event.repeat) {//按压状态
      playMusic(event.keyCode);
      animate(event.keyCode);
    }
  })；

• 亮点：键盘长按 能 增添水波动画样式

/*选择col类里的span带有style的元素*/
.col span[style]{
  position: absolute;
  border:none;
  border-radius: 50%;
  /*//绑定动画名*/
  animation-name: identifier;
  /*//动画播放耗时*/
  animation-duration: 0.7s;
  /*//动画播放速度*/
  transition-timing-function:cubic-bezier(0.14, 1.04, 0.76, 0.9);;
  /*//动画播放次数*/
  /*animation-iteration-count: infinite;*/
  /*calc用于css属性值进行运算*/
  /*每个kdb标签都定义了两个span围绕周围，--i设置好各个span的播放延迟*/
  /*//动画播放延迟 */
  animation-delay: calc(0.3s * var(--i));
}

/*动画关键帧变化*/
@keyframes identifier {
0% {
  border:3px solid #ffffff;
  width: 120px;
  height: 120px;
  opacity: 1;
}
  50% {
    border:3px solid #ffffff;
    opacity: 0.4;
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
  }
}