开启新坑,将live2d引入网页

我们在某些网站能够看到动态的看板娘

例如这个

这个

这个

那么这个是怎么实现的呢?其实就是live2D。

Live2D是一种应用于电子游戏的绘图渲染技术,技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像,对于以动画风格为主的冒险游戏来说非常有用,缺点是Live 2D人物无法大幅度转身,开发商正设法让该技术可显示360度图像。(来自百度百科)

那么怎么用在网页上呢?

网上能够搜索到的资料很少,查了整整一天都没找到详细的教程。我很感兴趣!!!

这里就立一个flag,先研究研究,到实际能用的时候就发教程。

live2D官网:https://www.live2d.com/

live2D百度贴吧:https://tieba.baidu.com/f?kw=live2d&fr=ala0&tpl=5


说明:本人写博的风格都倾向与将复杂的问题简单化,再将问题深入的探讨。

例如

  • 当出现【初级篇】这个标题前缀时,都是忽略原理,目的是达到能用的目的即可。如果条件允许,则会出【高级篇】。
  • 如果没有标题前缀,则为均为高级篇。高级篇会尽可能的详细说明操作步骤、操作所蕴含的原理,以及所需要的的工具等。
  • 【初级篇】和【高级篇】都是记录我所学习到的知识。接触的事物程度不同,难免会有错误和差异。如有问题,尽情提出,一起学习探讨。
实现滚动代码可以使用WXSS中的animation属性,具体代码如下: 1. 在wxml文件中使用scroll-view组件,并设置class属性为“scroll-view”,同时在组件内部添加text组件,用于展示歌词: ```html <scroll-view class="scroll-view" scroll-y> <text class="lyric">感恩的心</text> <text class="lyric">作词:李炜、王晓晖</text> <text class="lyric">作曲:李炜</text> <text class="lyric">演唱:李炜</text> <text class="lyric">感恩的心</text> <text class="lyric">为什么总是不够满足</text> <text class="lyric">总是想要更多的拥有</text> <text class="lyric">不知道什么是珍贵</text> <text class="lyric">它不是用钱可以买到</text> <text class="lyric">感恩的心</text> <text class="lyric">为什么总是看不到</text> <text class="lyric">身边有多少的付出</text> <text class="lyric">总是想要更多的关照</text> <text class="lyric">却忘了多少的付出</text> </scroll-view> ``` 2. 在WXSS文件中设置.scroll-view和.lyric类的样式,以及动画效果: ```css .scroll-view { height: 300rpx; overflow: hidden; } .lyric { font-size: 26rpx; line-height: 36rpx; text-align: center; color: #666; } /* 动画效果 */ @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .scroll-view .lyric:nth-child(odd) { animation: scroll 10s linear infinite; } .scroll-view .lyric:nth-child(even) { opacity: 0.5; } ``` 其中,.scroll-view类设置了组件的高度和overflow属性,以便实现滚动效果;.lyric类设置了歌词的样式,包括字体大小、行高、对齐方式和颜色;@keyframes定义了动画效果,通过transform属性实现垂直方向的平移;.scroll-view .lyric:nth-child(odd)和.scroll-view .lyric:nth-child(even)则分别设置了奇数行和偶数行的样式,其中奇数行使用了scroll动画效果,而偶数行则设置了透明度0.5。 3. 最终效果如下图所示: ![滚动歌词效果](https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/docs/assets/demo.gif) 通过以上步骤,即可在微信小程序中实现滚动歌词效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值