基于SVG技术的微信交互图文创意合集二——初级音频交互:音乐播放器外观调整

初级音频交互的效果相对单调,与其说是交互,不如说是对微信原生音乐播放器的外观优化,避免了原生播放器对视觉整体性的破坏。

例如别克的《别克GL8“以礼相待”人物系列微电影 | 武汉十二锣》https://mp.weixin.qq.com/s/5mAo-x5v9abem1K8ngC6og,技术原理是利用scale、translate、opacity等css属性,使原生播放器按钮重新定位,并强制透明,覆盖在设计图中触发按钮的上方。

不过,只要创意足够出色,再简单的技术也能玩出新花样。处于同一层级的交互,重复执行多次,很容易让用户产生疲倦。但拥有递进关系的交互,会带给用户逐步深入的阅读体验,具有强调信息、提升感官刺激的效果。

奥迪《这才是夏天该听的音乐》这篇推送就巧妙地将音频触发按钮放在了第二层级。用户需先执行三次第一层级的交互(即横向拨动琴弦(touchmove)弹出三个音乐元素),才能获取到第二层级的音频触发按钮,点击播放音频,营造出「弹吉他生成音乐」的效果。

使用技术:音频定位+穿透触发+深色模式适配+foreignObject位图交互+缓动函数位移动画

交互图文周刊|〇〇二

你可能感兴趣的:(基于SVG技术的微信交互图文创意合集二——初级音频交互:音乐播放器外观调整)