微信小程序：歌曲、视频、动画播放

最新推荐文章于 2024-05-08 00:59:54 发布
最新推荐文章于 2024-05-08 00:59:54 发布
阅读量870 收藏 9
点赞数 2
分类专栏： 微信小程序 服务器 文章标签： 动画 小程序 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Weirdo_ran/article/details/120311229
版权

js定时函数1  setTimeout(()=>{},1000); setTimeout间隔多少秒执行一次

js定时函数2 setInterval(() => {}, interval); setInterval间隔多少秒反复执行

取消定时函数clearInterval(你给定时函数的命名);

音乐播放

<audio controls="{{flag?'controls':''}}"    src="{{musicObj.url}}" name={{musicObj.name}}" poster="{{musicObj.img}}" author="{{musicObj.author}}"  loop="true">

视频播放

<video  controls="controls"  class="videoview" poster="{{videoInfo.img}}"  src="{{videoInfo.url}}">

效果

一开始计时动画进入主页，可以播放音乐，第二页可以播放视频

 

 

 代码

app.json

{
  "pages": [
    "pages/start/start",
    "pages/music/music",
    
    "pages/videoinfo/videoinfo",
    "pages/main/main",
    "pages/readbook/readbook",

    "pages/one/one",
    "pages/index/index",
    "pages/logs/logs",
    "pages/playmusic/playmusic"
    
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "selectedColor": "#8a8a8a",
    "list": [
      {
        "pagePath": "pages/music/music",
        "text": "音乐",
        "iconPath": "pages/images/music1.png",
        "selectedIconPath": "pages/images/music2.png"
      },
      {
        "pagePath": "pages/videoinfo/videoinfo",
        "text": "视频",
        "iconPath": "pages/images/sp1.png",
        "selectedIconPath": "pages/images/sp2.png"
      },
      {
        "pagePath": "pages/readbook/readbook",
        "text": "阅读",
        "iconPath": "pages/images/rb1.png",
        "selectedIconPath": "pages/images/rb2.png"
      }
    ]
  }
  
}

start.js

// pages/start/start.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:10,
    currentIndex:0,
    str:"你好，欢迎来到我的频道",
    index:1,
    text:""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //js定时函数1  setTimeout(()=>{},1000); setTimeout间隔多少秒执行一次
    //js定时函数2 setInterval(() => {}, interval); setInterval间隔多少秒反复执行
    let  an=setInterval(() => {
      let  num1=this.data.num-1;
      console.log("现在的数的值是:"+num1);
      //改变这个值姚赋值给data中的num
      this.setData({num:num1});
      //num1被减去1，得到0的应该跳转页面

      let  newIndex=++this.data.currentIndex;
      console.log(newIndex);
      this.setData({currentIndex:newIndex%6});

      if(num1==0)
      {
          //取消定时函数
          clearInterval(an);
          // wx.navigateTo({
          //   url: '../main/main',
          // }]
          wx.switchTab({
            url: '../music/music',
          })
        
      }
      
    }, 1000);

   let an1= setInterval(() => {

      let  text=this.data.str.substr(0,this.data.index);
      console.log(text);

      this.setData({text:text});

      // //判断到这个字符串的最后，不再执行++操作
      // console.log(this.data.index);
      // console.log(this.data.str.length);

      if(this.data.index==this.data.str.length)
      {
         clearInterval(an1);
      }

      this.data.index++;
      
    }, 500);

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

start.wxml

<!--pages/start/start.wxml-->
<view  class="pageview">
  <view  class="topview">
     {{text}}
  </view>
  <view  class="numview">
         {{num}}
  </view>


  
  <view class="bottomview">
    <block  wx:for="{{6}}">
        <view  class="boxview {{index==currentIndex?'bg1':'bg2'}}"></view>
    </block>
   </view>
  
  
   
</view>

start.wxss

/* pages/start/start.wxss */
.pageview{
  width: 100%;
  height: 100vh;
  background-color: snow;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.numview{

  width: 100px;
  height: 100px;
  border-radius: 50%;
  border:4px  solid whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: red;

}
.bottomview{
  width: 100%;
  height: 12%;
  position: fixed;
  bottom:26%;
  /* bottom: 0px;
  left: 0px; 
   border-top: 2px  solid whitesmoke; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxview{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 10px;
}
.bg1{
  background-color: snow;
}
.bg2{
  background-color: tomato;
}
.topview{
  width: 100%;
  height: 12%;
  position: fixed;
  top: 0px;
  left: 0px;
  border-bottom: 2px  solid  whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: larger;
  font-family: 楷体;
  color:grey;

}

music.js

// pages/music/music.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    musicdata:[],
    text:"你喜欢听歌嘛",
    index:0,
    loadtext:"",
    musicObj:{},
    flag:false

  },
  clickitem(event)
  {
     let   itemObj=event.currentTarget.dataset.item;
     console.log(itemObj);


     this.setData({musicObj:itemObj,flag:true});


     //1.跳转页面播放
    //  wx.navigateTo({
    //    url: '../playmusic/playmusic?musicobj='+JSON.stringify(itemObj),
    //  })




  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  let an= setInterval(()=>{
      let  operatorIndex=++this.data.index;
      let  str=this.data.text.substr(0,operatorIndex);
      if(operatorIndex==this.data.text.length)
      {
          clearInterval(an);
      }
      this.setData({index:operatorIndex,loadtext:str});

    },300);

    wx.showLoading({
      title: '正在加载音乐',
    })

    //延时3秒请求python  FastAPI的音乐服务
    setTimeout(()=>{

      wx.request({
        url: '你的内网穿透到Python服务器的地址/loadmusic',
        success:(resp)=>
        {
          let  datas=resp.data;
          console.log(datas);

          wx.hideLoading();
  
          this.setData({musicdata:datas});
        }
      });

    },3000);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

music.wxml

<!--pages/music/music.wxml

  0.启动动画
  1.自定义底部菜单栏音乐频道 视频频道 在线阅读
  2.页面区域轮播组件
  3.双向切换
  4.构建音乐频道
  5.构建视频频道
  6.构建在线阅读
-->
<view  class="pageview">
   <view  class="topview">
      <view  class="tv">{{loadtext}}</view> 
   </view>
   <view class="musicview">
      <scroll-view  class="scrollview"  scroll-y="true">
        <block  wx:for="{{musicdata}}">
           <view  class="listview"  bindtap="clickitem"  data-item="{{item}}">
              <view  class="box1">
                <image  src="{{item.img}}"  class="cimg"></image>
                <view class="box4">
                  <view  class="box2">
                    <view>{{item.name}}</view>
                  </view>
                  <view  class="box3">
                    <view>{{item.author}}</view>
                  </view>
                </view>
                <view class="box5">
                  <view>></view>
                </view>
            
              </view>
           </view>
        </block>
      </scroll-view>
   </view>

   <view  class="bottomview">
    <audio controls="{{flag?'controls':''}}"    src="{{musicObj.url}}" 
     name="{{musicObj.name}}" poster="{{musicObj.img}}" author="{{musicObj.author}}"  loop="true">


    </audio> 
   </view>
</view>

music.wxss

/* pages/music/music.wxss */
.pageview{
  width: 100%;
  height: 100vh;
  background-color: snow;
}
.topview{
  width: 100%;
  height: 12%;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top:0px;
  left: 0px;
}
.tv{

  font-family: 楷体;
  font-size: 28px;
  color: snow;
}
.musicview{

  width: 100%;
  height: 88%;
  background-color: snow;
  position: relative;
  top:12%;
  left: 0px;

}
.scrollview{
  width: 100%;
  height: 100%;
}
.listview{
  width: 100%;
  height: 18%;
  border-bottom: 2px  solid  gainsboro;
  display: flex;
}
.box5{
  width:45%;
  height: 45%;
  color: grey;
  flex: 1;
  /* border:1px  solid  paleturquoise; */
   display: flex;
   justify-content: space-evenly;
   align-items: center;
}
.box1{

  margin-left: 5%;
  flex: 1;
  /* border:1px  solid  paleturquoise; */
  display: flex;
  justify-content: left;
  align-items: center;

}
.box4{
  flex:4;
  margin-left: 2%;
 
}
.box2{

  flex: 3;
  /* border:1px  solid  palevioletred; */
  display: flex;
  justify-content: left;
  align-items: center;
  color: black;
  /* font-weight: bold; */
  font-size: larger;
  font-family: 楷体;
}
.box3{
  flex: 3;
  /* border:1px  solid  cadetblue; */
  display: flex;
  justify-content: left;
  align-items: center;
  color: grey;
  /* font-size: small; */
  font-family: 楷体;
  
}
.cimg{
  width: 23%;
  height: 75%;
  border-radius: 10px;
}
.bottomview{
  width: 100%;
  height: 12%;
  position:fixed;
  bottom:0px;
  left: 0px;
  display: flex;
  justify-content: center;
  
  
}

videoinfo.js

// pages/videoinfo/videoinfo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {


    lists:[],
    videoInfo:{}

  },
  clickvideo(event)
  {
   let  clickObj=event.currentTarget.dataset.item;
   console.log(clickObj);

   this.setData({videoInfo:clickObj});


  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

      wx.request({
        url: '你内网穿透到Python服务器的地址/loadvideo',
        success:(resp)=>
        {
          let  videos=resp.data;
            console.log(videos);

      

          this.setData({lists:videos});
        }
      })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

videoinfo.wxml

<!--pages/videoinfo/videoinfo.wxml-->
<view  class="pageview">
     
     <video  controls="controls"  class="videoview" poster="{{videoInfo.img}}"  src="{{videoInfo.url}}">
     </video> 

     <view>
          <view class="a1">视频剪辑</view>
          <view class="a2">8.8分·免费·全6集·2021万次播放</view>
     </view>

     <view class="a3">剧集</view>

     <view class="hview">
           <scroll-view  class="scrollview"  scroll-x="true">
               <block  wx:for="{{lists}}">
                    <view  class="box"  bindtap="clickvideo" data-item="{{item}}">
                         <view  class="innerbox">
                              <view>第{{index+1}}集</view>
                         </view>
                    </view>
               </block>
           </scroll-view>
     </view>

     
</view>

videoinfo.wxss

/* pages/videoinfo/videoinfo.wxss */
.pageview{
  width: 100%;
  height: 100vh;
  background-color: snow ;
}
.videoview{
  width: 100%;
  height: 30%;
}
.hview{
  width: 100%;
  height: 10%;
  border-bottom: 2px  solid   gainsboro;
  display: flex;
  align-items: center;
}
.scrollview{
  width: 100%;
  height: 70%;

  white-space: nowrap;

}
.box{
  display: inline-block;
  width: 30%;
  height: 90%;
  border:1px  solid  black;
  margin-left: 10px;
}
.innerbox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.a1{
  margin-left: 2%;
  font-size: larger;
}
.a2{
  margin-top: 1px;
  margin-left: 2%;
  font-size: small;
  margin-bottom: 5%;
  color: grey;
  border-bottom: 1px  solid   gainsboro;
}
.a3{
  margin-left: 2%;
  font-size: larger;
}

server.py

#来自于fastapi文件导入FastAPI  类
from fastapi  import  FastAPI
import   uvicorn

#创建FastAPI对象
app=FastAPI()


nginxpath="你内网穿透到nginx的地址"

@app.get("/")
def  index():
      print("执行index方法")
      return {"msg":"欢迎使用python最快的框架fastapi"}

@app.get("/query")
def  query():
      print("执行query方法")
      lists=["one","two","three"]
      return lists


@app.get("/loadindex")
def  loadIndexView():
      print("执行loadIndexView方法")
      #1.轮播图
      swiperdatas=[nginxpath+"img/a1.png",
                   nginxpath+"img/a2.png",
                   nginxpath +"/img/a3.png",
                   ]
      #2.轮播图的指示器的颜色
      color="blue"
      #3.水平滚动视图菜单
      menudatas=[{"img":"http://127.0.0.1:8030/img/a1.jpg","text":"生活"},
                 {"img":"http://127.0.0.1:8030/img/a2.jpg","text":"情商"},
                 {"img":"http://127.0.0.1:8030/img/a3.jpg","text":"智商"},
                 {"img":"http://127.0.0.1:8030/img/a4.jpg","text":"博爱"},
                 {"img":"http://127.0.0.1:8030/img/a5.jpg","text":"沟通"},
                 {"img":"http://127.0.0.1:8030/img/a6.jpg","text":"乐趣"},
                 {"img":"http://127.0.0.1:8030/img/a7.jpg","text":"运动"},
                 {"img":"http://127.0.0.1:8030/img/a8.jpg","text":"直播"},
                 {"img":"http://127.0.0.1:8030/img/a9.jpg","text":"文章"}]

      #4.垂直滚动的功能视图
      griddatas=[{"img":"http://127.0.0.1:8030/img/d0.png","text":"第01个"},
                 {"img":"http://127.0.0.1:8030/img/d1.png","text":"第02个"},
                 {"img":"http://127.0.0.1:8030/img/d2.png","text":"第03个"},
                 {"img":"http://127.0.0.1:8030/img/d3.png","text":"第04个"},
                 {"img":"http://127.0.0.1:8030/img/d4.png","text":"第05个"},
                 {"img":"http://127.0.0.1:8030/img/d5.png","text":"第06个"},
                 {"img":"http://127.0.0.1:8030/img/d6.png","text":"第07个"},
                 {"img":"http://127.0.0.1:8030/img/d7.png","text":"第08个"},
                 {"img":"http://127.0.0.1:8030/img/d8.png","text":"第09个"},
                 {"img":"http://127.0.0.1:8030/img/d9.png","text":"第10个"},
                 {"img":"http://127.0.0.1:8030/img/d10.png","text":"第11个"},
                 {"img":"http://127.0.0.1:8030/img/d11.png","text":"第12个"},
                 {"img":"http://127.0.0.1:8030/img/d12.png","text":"第13个"},
                 {"img":"http://127.0.0.1:8030/img/d13.png","text":"第14个"},
                 {"img":"http://127.0.0.1:8030/img/d14.png","text":"第15个"},
                 {"img":"http://127.0.0.1:8030/img/d15.png","text":"第16个"},
                 {"img":"http://127.0.0.1:8030/img/d16.png","text":"第17个"},
                 {"img":"http://127.0.0.1:8030/img/d17.png","text":"第18个"},
                 {"img":"http://127.0.0.1:8030/img/d18.png","text":"第19个"},
                 {"img":"http://127.0.0.1:8030/img/d19.png","text":"第20个"},
                 {"img":"http://127.0.0.1:8030/img/d20.png","text":"第21个"},
                 {"img":"http://127.0.0.1:8030/img/d21.png", "text": "第22个"}
                 ]
      return  {"sdatas":swiperdatas,"color":color,"menus":menudatas,"griddatas":griddatas}


@app.get("/loadmusic")
def   loadMusic():
      print("加载音乐信息")
      musicdatas=[
          {"img":nginxpath+"/img/a1.jpg","name":"歌曲一","author":"李一","url":nginxpath+"/audio/a0.mp3"},
          {"img": nginxpath + "/img/a2.jpg", "name": "歌曲二", "author": "李二", "url": nginxpath + "/audio/a0.mp3"},
          {"img": nginxpath + "/img/a3.jpg", "name": "歌曲三", "author": "李三", "url": nginxpath + "/audio/a1.mp3"},
          {"img": nginxpath + "/img/a4.jpg", "name": "歌曲四", "author": "李四", "url": nginxpath + "/audio/a2.mp3"},
          {"img": nginxpath + "/img/a5.jpg", "name": "歌曲五", "author": "李五", "url": nginxpath + "/audio/a3.mp3"}
                  ]
      return   musicdatas

@app.get("/loadvideo")
def   loadVideo():
      print("加载视频信息")
      videodatas=[
          {"img": nginxpath + "/img/a1.jpg", "url": nginxpath + "/video/a1.mp4"},
          {"img": nginxpath + "/img/a1.jpg", "url": nginxpath + "/video/a1.mp4"},
          {"img": nginxpath + "/img/a1.jpg", "url": nginxpath + "/video/a1.mp4"}
                ]
      return   videodatas

if __name__=="__main__":
    uvicorn.run(app="server:app",host="0.0.0.0",port=8050,reload=True)

Yfzm_c
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序开发之录音机 音频播放 动画 (真机可用)
dzp_coder
11-27 4万+
趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和
微信小程序实现svga格式动画播放
salestina的博客
03-26 2415
微信小程序环境要求：基础库>=2.10.0 代码片段示例：https://developers.weixin.qq.com/s/57sWDkmq7Eeu 注意：该方法只支付svga2.0动画，如果版本不对，请联系对应的平面设计人员修改svga版本。 在需要播放动画的页面 wxml 中，添加以下 canvas，其中 type 必须为 2d，width 和 height 必须指定具体值，id 为任意值。 <canvas type="2d" style="width: 300px; heig
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
09-01
主要介绍了微信小程序开发之录音机 音频播放 动画实例 (真机可用)，这里整理了详细的代码,有需要的小伙伴可以参考下。
微信小程序实现一个音乐播放器的功能
weixin_71893790的博客
12-21 3067
微信小程序实现一个音乐播放器的功能
微信小程序开发中的视频播放和直播功能
最新发布
qq_67153941的博客
05-08 465
本文详细介绍了微信小程序开发中的视频播放和直播功能的实现方法。通过代码案例，我们可以实现基本的视频播放和直播推拉流功能。当然，这只是一个基础示例，实际项目中可能还需要根据具体需求进行更多的处理和配置。希望本文对你理解和实现微信小程序中的视频播放和直播功能有所帮助。如果有任何问题或疑问，欢迎留言讨论。
微信小程序实现js控制动画——点击播放动画
机智的奎哥的博客
03-15 3513
功能需求：点击刷新图标，图标旋转进入Loading状态，加载完毕，动画停止 //index.wxml <view class="flex-col group_2"> <text decode="decode" class="text_1">{{userInfo.nickName}}</text> <view class="flex-row items-center section_1" hover-class="down_state" hover-stay-.
微信小程序播放音乐界面.rar
11-30
微信小程序播放音乐界面，点歌页面，微信小程序入门学习，可以播放，切换歌曲
微信小程序 录音机 播放器 动画
11-27
微信小程序 录音机 播放器 动画
微信小程序按钮点击动画效果的实现
01-03
动画效果如下： GIF看起来可能会有点卡 wxml 确定 wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff; line-height: 80rpx; text...
微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)
06-19
微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音机 音频播放 动画 (真机可用)(源代码+截图)微信小程序开发之录音...
WxSacnProgressBar微信小程序自定义扫描进度动画组件
08-10
用于微信小程序的一个圆形进度组件，支持自定义循环播放图标。
微信小程序-一个音乐播放器视频播放器小程序
08-08
音频播放器 >PS:这里音乐/图片(MP3/图片)来源是我本地电脑自己搭建的服务器. >用WAMP.把音乐放在根目录就可以了. >当然也可以返回网络上的数据 util.js getDataFromNet()返回音乐列表数据,模拟网络数据用setTimeOut 自动下一首 添加截图
微信小程序制作音乐跳动动画样例源码
04-23
微信小程序制作音乐跳动动画样例，实际项目中应用录音上传到服务器，然后服务器解析音频后把分贝值传给小程序,小程序绘制音乐跳动动画。
微信小程序实现循环动画效果
12-09
在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验，本文通过微信小程序原生API来实现小程序中控件的各种动画效果，先看下本文最终的效果：    上图中的“关注公众号”动画就是我们要实现的效果。  ...
微信小程序 小程序制作及动画（animation样式）详解
01-03
微信小程序制作 实现效果图： 微信小程序也已出来有一段时间了，最近写了几款微信小程序项目，今天来说说感受。 首先开发一款微信小程序，最主要的就是针对于公司来运营的，因为，在申请appid(微信小程序ID号)时候...
微信小程序音乐播放器旋转动画
weixin_45580341的博客
05-14 1321
小程序播放器专辑界面旋转动画 二话不说看效果 首先是CSS样式 .music_on{ animation: audio-rotate 8s linear infinite; } .audio_control{ display: flex; flex-direction: row; justify-content:space-around; } .audio_control button{ width:200rpx; height:80rpx; line-height:80
微信小程序网易云音乐视频播放切换的功能的实现
weixin_48952990的博客
07-08 1075
微信小程序网易云音乐视频播放切换功能
微信小程序循环动画效果的实现
热门推荐
仰望星空
07-16 1万+
在微信小程序的交互效果中，通常通过各种动画效果来增强用户体验，本文通过微信小程序原生API来实现小程序中控件的各种动画效果，先看下本文最终的效果： 上图中的“关注公众号”动画就是我们要实现的效果。 为了实现上文中的效果，我们首先来看一下微信小程序关于动画的官方API 微信官方API学习 wx.createAnimation(OBJECT) 说明：创建一个动画实例animation...
小程序-video视频
ai5945fei的博客
11-05 733
WXML <video src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff020.
微信小程序 怎么实现多次播放动画
06-06
在微信小程序中，你可以通过使用 `animation` 组件来创建动画。要实现多次播放动画，你可以在动画完成时，手动将元素的样式恢复到动画前的状态，然后再次触发动画。以下是一个简单的示例代码： ```html <view class="box" animation="{{animationData}}">这是一个动画</view> <button bindtap="playAnimation">播放动画</button> ``` ```javascript Page({ data: { animationData: null }, playAnimation: function() { var animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease', }) animation.scale(1.5).rotate(45).step() this.setData({ animationData: animation.export() }) // 动画完成后，手动将元素的样式恢复到动画前的状态 setTimeout(() => { animation.scale(1).rotate(0).step() this.setData({ animationData: animation.export() }) }, 1000) } }) ``` 在上面的代码中，我们创建了一个 `animation` 对象，并使用 `scale` 和 `rotate` 方法来设置动画效果。然后，我们将动画对象导出，并将它绑定到了 `box` 元素上。在触发点击事件时，我们先将动画对象应用到元素上，然后在动画完成后，手动将元素的样式恢复到动画前的状态，并再次触发动画。 需要注意的是，如果你希望动画可以无限循环播放，可以将 `animation` 对象的 `iterations` 属性设置为 `Infinity`。同时，你也可以使用 `animation` 对象的 `step` 方法来实现多个动画效果的组合。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值