直播送礼SVGAweb全屏动画 多款动画
SVGA 是一种用于嵌入式动画的矢量文件格式，通常用于在移动应用程序和网页中展示高质量的动画效果。相对于传统的 GIF 动画或者基于帧的视频文件，SVGA 动画具有更小的文件尺寸和更高的清晰度，并且可以有效地实现各种复杂的动画效果。在网页中使用 SVGA 动画通常需要使用相应的库或框架来解析和播放这些动画。一般而言，您可以使用 SVGA 提供的解析器（Parser）来加载 SVGA 文件，并在网页中创建动画效果。同时，如果需要在动画中添加音频效果，可以使用库如 Howler.js 来处理音频的加载和播放。使用 SVGA 动画和音频效果可以增强网页的交互体验，为用户带来更加生动和吸引人的视觉效果。无论是在移动端应用还是网页中应用，SVGA 动画都能够为用户提供更加丰富、多样化的视觉体验。总之，SVGA 素材动画结合了矢量动画和音频效果，可以为网页和移动应用带来更具吸引力和交互性的效果，从而提升用户体验和视觉吸引力。
SVGA素材动画web HTML 用于论坛 社区 直播等等…
SVGA资源来于 CSDN
内容下载
蓝奏云 SVGAhtml5
使用方法
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);
};
没有回复内容