当前位置: 首页 > Web前端 > JavaScript

一个Live2D!一个可爱的Live2DAPIo(-≧▽≦)ツ

时间:2023-03-27 12:47:37 JavaScript

——“这个Live2D太可爱了,好想加到我的博客里!”......两年后......——“哎呀,怎么这么复杂,放弃吧~~呜呜呜”你还在为Live2D复杂的配置而烦恼吗?快来试试这个可爱的Live2DAPI吧!xiarimangguo/alive2D:aLive2D!一个可爱的Live2DAPIo(*≧▽≦)ツ快来给网页加一个可爱的看板妹子吧~我是可爱的gifdemo,点我看效果~~目录(?ˊ?ˋ)?*?一·萌の初见让我们开始吧!2.萌的自报理解一个Live2D的功能Position~模型定位全靠它X,Y~我也很重要!相似之处!为我启用新闻。3.萌の熟人改模型。使用分组功能随机显示模型。使用Random函数和Auto函数的分组★?萌API!?★自建API的吃法★?进阶·BuildAPI?★四·萌の感谢吃到这里,体验更棒~夏日芒果の小屋萌の第一次你好!我是可爱的Live2D,你很快就会见到我!n(*≧▽≦*)n开始吧!我们需要一个简单的HTML代码:我会悄悄出现在网页右下角~~你不信吗?那就来看看吧!#02007-|一品果|食语|-一个Live2D!一个可爱的Live2DAPIo(*≧▽≦)ツ或者...快来看看效果吧~夏日芒果の小屋悄悄告诉你,可以用“抓拍”功能记录下我可爱的瞬间~萌の自己-report-“我不喜欢一直停留在网页的右下角,你能帮我换个位置吗?”-《没问题!》理解aLive2D函数aLive2D(Model,Width,Height,Position,X,Y,EnableMsg)aLive2D函数提供了7个参数ModelName和要加载的模型的编号Width,Height指的是指定模型在网页中的宽高Position指定模型在网页中的定位方式X,Y指定模型在网页中相对原点的偏移距离EnableMsg是否显示消息,接受布尔值,否则false怎么做很简单,只要改变Position参数即可!aLive2D('#02007','240px','400px','Lb','10%','0%',false)嗯?怎样才能出现在页面的左下角?Position~模型定位就靠它了。Position以网页的四个角作为定位原点。提供4种定位方式:左上、右上、左上、右下、右下。参数值是'LeftTop'('Lt')'RightTop'('Rt')'LeftBottom'('Lb')'RightBottom'('Rb')它们指定模型应该位于网页的哪个角落作为原点(参考点),比如'Lb'表示要以网页的左下角为原点,等等~~X,Y~我也很重要!X是水平偏移量,Y是垂直偏移量。它们适用于html中的所有长度表示,并根据Position的不同而有所不同。当Position为“Lt”时,X向右偏移,Y向下偏移。Position为'Rb'时,X左移,Y上移,依此类推~~相似之处!看到这里,相信你已经发现了,这有点类似于css中的position定位,只是将left、right、top、bottom属性抽取出来作为函数的参数,很快就明白了!——“现在你知道你为什么在左下角了吧!我都告诉你了!”——《谢谢!!☆⌒(*?-?)v萌萌哒!为我开启消息——“我怎么会哑口无言,我真的不想沉默!”将EnableMsg参数设置为true,然后我就可以说话了!萌の相识——“我们是好朋友!欢迎和我的小朋友一起玩!”——“可是,我怎么才能找到你的小朋友呢?”改变模型。型号参数控制显示的型号,这里可以使用您定义的型号名称(如Haru),也可以使用您定义的型号编号(例如#01001)(温馨提示:关于list.js的详细介绍请查看★?高级·构建API?★)小伙伴们来了!我好寂寞,我想打电话给我所有的朋友!aLive2D('Group(defined,#02)','240px','400px','Lb','10%','0%',false)嗯?什么是组(定义,#02)?Model参数不仅支持显示单个模型,还支持随机显示多个??模型。使用分组功能随机显示模型。分组Group(Method,GroupList)Method支持3种分组模式!definedredefinecustom别急,听我慢慢define~顾名思义~我是defined组。您可以轻松地在list.js中设置组。您可以使用群名法(如Swy)或编号法(如#02)作为群名GroupList参数填写群名或群号!redefine~让我重新定义组Group(redefine,#02,List(+#01001,-#02053))重新定义Method时,函数接受3个参数#02是定义的组名或编号List(...)是一个数组,用于给定义的组添加或删除模型【这个只是在代码中临时添加或删除,不能改变list.js中定义的组】List数组的使用大List数组使用存放机型名称或编号,机型数量不限。在重定义条件下,使用+编号&名称添加模型,使用-编号&名称删除模型。混合名称和数字没有问题。Group(redefine,#02,List(+Haru,-#02053))大结局!风俗!custom用于在代码中自定义临时分组【不能改变list.js中定义的分组】Group(custom,List(#02001,#02007,#02002))ε==(づ′▽`)づList:我又来了。List也用于存储模型名称或编号,模型数量没有限制。自定义条件下,把你要组的模型全部放到List数组中!还支持名字和数字混合使用~~Tips为了更简洁的使用组,建议在list.js中定义组,然后按照定义的方式使用。但是,要在list.js中以定义的方式定义分组,只能将分组的模型按顺序排列在一起(★·进阶·构建API?★),redefine和custom方法可以自由定义不同顺序的组,更加灵活使用Random函数和Auto函数Random和Auto函数是用来随机显示模型的Random()Auto()是的,就这么简单,不需要参数!会从所有现有模型中随机抽取一个进行展示ο(=?ω<=)ρ⌒☆了解了以上这些,让我们开始使用MoeAPI吧!★?萌API!?★——《我们是朋友,我想把最可爱的东西分享给你!㎡(o?ω?o)㎡》欢迎大家使用萌API!最重要的事情来了!这是正确的!此API只需2行代码即可轻松将Live2D引入您的网页!实现全自动加载模型无需手动导入一系列js文件无需手动添加canvas标签无需自己编写css样式解决到处找Live2D模型的烦恼调整模型的位置、长宽网页上这个API目前是纯静态写的,你可以自己搭建API很容易,也可以部署在CDN上。无论是云服务器还是虚拟主机,都可以轻松搭建……最萌的吃法。接口地址https://91.90.194.171/api/Live2D使用上述API时,请使用Model的序号格式。本接口采用五位序号格式,如#02001。组名范围#01Default#01001--#01010#02Swy#02001--#02058……快来选出你喜欢的Live2D吧!自建API本API开箱即用,包含60+模型,快来搭建吧!★?Advanced·BuildingAPI?★萌の感谢本API的产生离不开一些开源项目的贡献,在此衷心感谢以下开源项目!fguby/live2D:快来定制属于你自己的live2D看板妹子(??????)??感谢以下项目提供Live2D模型Eikanya/Live2d-model:Live2d模型合集感谢以下项目提供留言功能galnetwen/Live2D:在网络上展示Live2D!o(*≧▽≦)ツ一起交流~~如果你喜欢这个项目,别忘了给我一个star!xiarimangguo/alive2D:aLive2D!一个可爱的Live2DAPIo(*≧▽≦)ツ快来给网页加一个可爱的看板妹子吧~迷雾山,迷雾海,茫茫人海,可爱的你o(*≧▽≦)ツ