微信小程序学习笔记（七）音乐播放器（正在播放页面）

微信小程序学习笔记（七）音乐播放器（正在播放页面）

正在播放页面，目前由于初学，仅仅只显示歌曲图像一个旋转动画。

1.musicdemo.wxml代码

<!--正在播放界面-->   
    <view class="current-play-page" hidden="{{tab!=1}}">
      <image src="{{currentPlayMusic.musicImage}}" />
    </view> 

2.musicdemo.wxss代码

.current-play-page{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.current-play-page>image{
  width: 300rpx;
  height: 300rpx;
  border-radius: 100px;
  
  animation: movie1 5s infinite;/*图像旋转动画*/
  animation-timing-function:linear;/*开头结尾以相同的速度动画*/
  -webkit-animation-timing-function: linear;
}

/*播放时封面动画*/
@keyframes movie{
  0%{transform: rotate(0deg)}
  25%{transform: rotate(90deg)}
  50%{transform: rotate(180deg)}
  75%{transform: rotate(270deg)}
  100%{transform: rotate(360deg)}
}
@keyframes movie1{
  form{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}

页面最终效果如下图

来源：oschina

链接：https://my.oschina.net/u/3537796/blog/3212725