统计
  • 文章总数:902 篇
  • 评论总数:1473 条
  • 分类总数:2 个
  • 最后更新:昨天 21:03

短视频直播送礼SVGAweb全屏动画

本文阅读 1 分钟
首页 技术知识 正文

svgaHTML5源码,会用的人可以学习下,直播间的礼物特效,跑车啊,嘉年华这些随机应该大概10种。
如果需要在动画中添加音频效果,可以使用库如 Howler.js 来处理音频的加载和播放。
2024-04-06T06:02:21.png
2024-04-06T06:00:52.png
示例源码需要上传到服务器测试,包含十种特效每次访问随机展示。
2024-04-06T06:04:33.png

JS实例代码

var player = new SVGA.Player("#demoCanvas");

var parser = new SVGA.Parser("#demoCanvas");

var sound = new Howl({

src: ["http://demo.bpwzj.com/svg/jntm.mp3"],

onload: function() {

  console.log("音频已加载");

  var svgs = ["./svg/gift_gif_95.svga", "./svg/giftfeiji.svga", "./svg/giftliuxingyu.svga", "./svg/giftmeiguihua.svga", "./svg/giftmenghuanchengbao.svga", "./svg/giftpaoche.svga", "./svg/giftxuanzhuanmuma.svga", "./svg/giftqiubite.svga", "./svg/giftqueqiaoxianghui.svga", "./svg/giftxuanzhuanmuma.svga","./svg/giftyoulun.svga"];

var svg = svgs[Math.floor(Math.random() * svgs.length)];

parser.load(svg, function(videoItem) {

            player.loops = 0;//0重复播放  》1 指定播放次数

            player.setVideoItem(videoItem);

            sound.play();   // 播放音频

            player.startAnimation(); // 开始播放动画

            player.clearsAfterStop = false;

sound.once("load", function() {

console.log("开始");

});

player.onFrame(function(frame) {//frame == 当前svga播放位置 1....

//其他操作 if(frame == 1)

  });

player.onFinished(function() {//播放结束

sound.stop();

  var lottieDiv = document.getElementById("lottie");

  lottieDiv.parentNode.removeChild(lottieDiv);

});

}, function (error) {

    console.log("资源加载失败");

          alert(error.message);

      });

}

}

);

$(function() {

      $(window).resize(resizeCanvas);

      resizeCanvas();

    });

function resizeCanvas() {

$("#demoCanvas").attr("width", $(window).get(0).innerWidth);

$("#demoCanvas").attr("height", $(window).get(0).innerHeight);

};

下载地址:

隐藏内容
评论可见
前往评论

免责声明
本站提供的一切内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
AIBotPro开源码AI Web 应用
« 上一篇 04-06
Emlog博客多功能卡片类型主题
下一篇 » 04-06

发表评论

V注册会员 L评论等级
R2 条回复
  1. 2024-04-07     Win 10 /    Chrome

    666还可以这样

  2. stalkerV :
    2024-04-06     Win 10 /    Chrome

    非常棒的动画

没有更多评论了

作者信息

动态快讯

    请配置好页面缩略名选项

热门文章

标签TAG

没有任何标签

热评文章