Live2D看板娘-通过 WebView 写到Android 中,安卓版看娘来咯

原创 已于 2022-05-06 08:46:44 修改 · 1.5k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#android #app #html #webview

于 2021-05-07 16:34:37 首次发布
本文介绍了如何将HTML中的看娘功能通过Android的WebView控件引入，展示了如何在Android应用中实现实时交互，利用WebView展示HTML页面并利用JavaScript与模型进行互动的过程。

无意间进入一个博客，被左下角的看娘给吸引了，感觉很高大上的感觉，而且还能互动，非常有趣。

经过面向百度操作，发现看娘功能的实现只需JS引入即可，无需自己添加操作（除自定义的那种）。

于是有一个大胆的想法----虽然看娘是在html 上实现的，但是Android 也支持 html ， 只需通过WebView控件即可添加我们的html界面，并且只需通过Android调用web源生的方法就可以实现 Android 与 web端的 交互，简直太方便了吧

各位看官先看效果图，我把界面放到右上角了，可随各位心意随便放置位置，满意的话继续往下看哦
在这里插入图片描述

话不多说，扛起键盘开始敲咯

首先要在web页面上实现看娘功能，然后通过Android 显示出来即可。

1.首先创建 assets 文件夹

右键-new-Folder-Assets Folder
然后新建一个www文件夹
然后把能够运行看娘的html文件放到里面
在这里插入图片描述
2.
把Activity设置为背景透明（这里需要注意MainActivity要继承Activity,否则会闪退哦）

 android:theme="@android:style/Theme.Translucent.NoTitleBar"

在这里插入图片描述
3.
设置xml文件，可以看到右上角为WebView 左上角，左下角，右下角，我分别设置了三个按钮，为了不影响整体效果，设置为透明色。
在这里插入图片描述
4.
为WebView控件添加本地界面即可显示可爱的小看娘咯
在这里插入图片描述
5.最后附上html的代码

<!DOCTYPE html>
<html>
	<head>
    <meta charset="UTF-8">
    <meta name
最低0.47元/天 解锁文章
live2d实现看板娘达到交互效果
code_carrierV1的博客
05-30 3371
网页上实现一个卡通人物，鼠标移动时做出各种动作和文字提示，达到交互效果 一直想在网页实现下这个效果，研究了下，其实它是引用live2D实现的，Live2D是一种应用于电子游戏的绘图渲染技术，技术由日本Cybernoids公司开发。通过一系列的连续图像和人物建模来生成一种类似三维模型的二维图像。 如果只是简单学下的话，复制以下代码 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title
cocos2d-x-webview:一个轻量级的lib，可将webview嵌入到cocos2dx的游戏中
05-16
一个轻量级的lib，它在iOS和android上的cocos2dx游戏中嵌入了Webview。 要在游戏中显示WebView，您只需要编写两行代码即可。 特征 继承自CCNode，这意味着您可以设置位置，比例或从CCNode中获取任何内容。 简单，...
Live2D看板娘
02-19
可用于网页端显示Live2D版的伊斯特瓦尔(Histoire)，主要功能如下： 1.可以基于图灵机器人的聊天功能（需要自己写接口，默认隐藏）。 2.能够随意移动并记录位置（关闭浏览器后失效）。 3.能够随意唤醒或者关闭并记录状态。 4.自动判断浏览器是否为IE或者手机浏览器，如果判断为true则不加载伊斯。 5.给骚扰伊斯加了限制频率，不能狂骚扰伊斯了。
live2d_android
03-27
live2d开发的jar包，需要有这个包才行
【亲测免费】 推荐一个生动有趣的Web交互体验：Live2D看板娘插件
gitblog_00053的博客
05-14 932
如果你正在寻找一种独特的方式来提升网站的互动性和趣味性，那么这个开源项目——Live2D看板娘插件绝对不容错过。它是一个基于JavaScript和HTML5的轻量级插件，能够让你的网页增添一位可爱的3D虚拟角色，与访客进行实时互动。 ## 项目介绍 Live2D看板娘插件通过API加载模型，并提供了丰富的功能，如自定义提示语、参数设置以及多样化的交互动作。该插件的核心是Live2D技术，这是一...
Live2D看板娘学习
qq_51049931的博客
11-22 1588
学习一个简单又实用的LIve2D看板娘
react-native-android-fullscreen-webview:在Android上支持全屏视频的React Native WebView组件
05-02
该软件包实质上复制了现有的Android版WebView，并添加了一些额外的功能来启用全屏视频。 iOS默认情况下支持此行为，因此将仅使用本机iOS WebView。 入门 yarn add hummingbird-me/react-native-android-fullscreen-...
Android代码-Android-X5WebView基本封装
08-06
Android-X5WebView基本封装和使用 通过OkHttp拦截器、自定义CookieJar有效完成客户端与H5端的Cookie同步管理 监听WebView的加载进度 滚动条的设置（隐藏或者显示,内侧显示还是外侧显示） 优化X5WebView的预加载问题...
Android逆向-frida hook 脚本- hook webview
08-17
Android逆向-frida hook 脚本- hook webview。 frida hook webview的loadurl方法，获取加载的地址和调用链。 Java.choose 获取到webview的对象，可以主动调用webview的方法。
Live2D看板娘详细实现
m0_37792384的博客
03-04 1万+
Live2D看板娘实现 开发工具IDEA 国际惯例先上图： 所需资源： 链接：https://pan.baidu.com/s/1s7IJIqGnn-cNRAfoS-qG5w 提取码：dhf4 其中包含了看板娘所需的CSS，image,JS,Live2d所需的基本资源。 下面就来实现吧 开发工具idea+tomcat,如果没有的小伙伴们可以自己从网上分别安装这两个资源并配置，网上有很多，这里我不在赘述了。（如果有很多人需要我或许可以出个教程…认真脸）。 1.创建项目 2.项目创建完成 3.引入看板娘
live2d看板娘设置
04-16
详细介绍见https://blog.youkuaiyun.com/renjingzhaozhao/article/details/105558061
来定制一个自己专属的live2D看板娘吧
08-10
来定制一个自己专属的live2D看板娘吧(๑•̀ㅂ•́)و✧
Live2D看板娘的简单使用
最新发布
weixin_73687229的博客
11-19 1358
Live2D看板娘是一种基于Live2D技术的网页插件，它能够在网页上展示一个动态的2D动画角色，这些角色通常具有互动性，能够响应用户的鼠标动作或点击，增加网页的趣味性和互动性。Live2D技术由日本Cybernoids公司开发，主要应用于电子游戏领域，通过将2D图像进行平移、旋转和变形等操作，生成具有自然动画效果的可动人物模型。
live2d web 看板娘
辰风沐阳
07-01 960
看板娘是一种职业和习惯称呼，也是ACGN次文化中的萌属性之一。简而言之就是小店的女服务生，也有“吸引顾客，招揽生意，提高人气”等作用类似品牌形象代言人的含义。 1. 访问网站，下载压缩包 https://www.jsdelivr.com/package/npm/live2d-widget 2. 解压压缩包，复制 lib 目录下的四个文件 3. 引入 两个js 文件，加一句css代码 <!DOCTYPE html> <html> <head> <tit.
Live2d看板娘教程
emmmmmmm__的博客
01-28 1758
先来看一下效果： 将代码复制到自己的网页代码码中 <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script> <script> L2Dwidget.init({ "model": { //jsonpath控制显示那个小萝莉模型，下面这个就是我觉得最可爱的小萝莉模型，替换时后
live2d看板娘一览图
盐一酱的专栏
10-15 1万+
模型下载地址：https://github.com/xiazeyu/live2d-widget-models/tree/master/packages 搭建教程：https://www.jianshu.com/p/3a6342e16e57 epsilon2_1 chitose   gf izumi koharu miku ni-j nico nie...
【live2D看板娘】为你的网站添加萌萌的二次元板娘，这都拿不下你？
热门推荐
阿牛的博客
10-04 1万+
好久没有分享过有趣的东西了，这次我打算分享一个所有人都无法拒绝的前端小demo。相信好多自己搭建博客的盆友们总喜欢搞一个萌萌的二次元板娘，但基本都是网上引入别人封装好的资源，无法进行小部分修改，那么今天阿牛把我之前搞得可以扩展与修改的live2D板娘分享出来，快拿去装扮到你的博客小站去装x吧！
评论 8
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值