小程序实现音乐播放界面

音频设备播放顺序控制：在播放列表中手动排序或使用音乐APP的播放顺序功能。 #生活技巧# #数码产品使用技巧# #音频设备调校#

参考网址：https://blog.csdn.net/sinat_19327991/article/details/79083885

页面部分：

<view class="record flex1">

　　<!-- 唱片 -->

　　<image src="../images/musicCD.png" class="{{playStatus === true ? 'rotate-360' : 'rotate-360-paused'}}"/>

　　<!-- 唱针 -->

　　<view class="handle {{handleStatus === true ? 'rotate-10 transform' : 'rotate-10-paused transform-paused'}}" >

　　　　<image src="../images/musicCDline.png" />

　　</view>

</view>

css部分：

@keyframes rotate

{

　　0% {transform: rotate(0deg);transform-origin: 50% 50% 0;}

　　50% {transform: rotate(180deg);transform-origin: 50% 50% 0;}

　　100% {transform: rotate(360deg);transform-origin: 50% 50% 0;}

}

@keyframes rotate13

{

　　0% {transform: rotate(0deg); transform-origin: 75% 5%;}

　　100% {transform: rotate(13deg); transform-origin: 75% 5%;}

}

　

.transform {

　　transform: rotateZ(12deg);

　　-webkit-transform: rotateZ(12deg);

　　transform-origin: 75% 5%;

}

.transform-paused {

　　transform: rotateZ(0deg);

　　-webkit-transform: rotateZ(0deg);

　　transform-origin: 75% 5%;

}

.rotate-10 {

　　animation: rotate13 1s linear;

}

.rotate-10-paused {

　　animation-play-state: paused;

}

.rotate-360 {

　　animation: rotate 10s linear infinite;

}

.rotate-360-paused {

　　animation-play-state: paused;

}

知识要点：

css3 transform：旋转

css3 transform-origin：旋转中心

css3 animation：

　　animation-name：绑定keyframe名称

　　animation-duration：动画所花时长（默认0s）

　　animation-timing-function；动画速度曲线（默认ease）

　　animation-iteration-count：动画播放次数 默认1 infinite（无限次）

　　animation: rotate 10s linear infinite;

网址：小程序实现音乐播放界面 https://klqsh.com/news/view/49230

相关内容

知识付费在线课程小程序
小米音响怎么联动手机蓝牙
微信知识付费小程序排行榜
电影局鼓励虚拟现实电影创作 剧本梗概应履行备案程序
小程序+知识付费：普通人也能打造专属知识生态圈
五大知识付费平台对比！看看每个小程序平台的区别
知识类付费小程序
华晨宇第六张个人数字专辑《量变临界点》在网易云音乐正式开售
享受音乐生活，体验广播收音机的乐趣
知识付费APP小程序开发 万世科技和你一起终身学习

随便看看