android - 如何在单击 Android WebView 中存在的按钮时播放 Lottie 动画文件

问题描述

我有一个 Webview，它显示带有两个按钮（HTML 标签按钮）的内容，它显示了某种选择用户的选项。点击其中任何一个按钮颜色变为绿色和红色，表示正确和不正确的选项。2-3 秒后，这两个按钮被正确的选项文本替换。在此过渡期间，我必须显示 Lottie 动画。

这是我的 HTML 内容：

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  cursor: pointer;
}
.button1 
{
 background: #9752FF;
 background: -webkit-linear-gradient(to right, #9752FF 0%, #5e93ff 100%);
 background: -moz-linear-gradient(to right, #9752FF 0%, #5e93ff 100%);
 background: linear-gradient(to right, #9752FF 0%, #5e93ff 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  border: none;
border-radius: 22px;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
 }
.button1_enabled{
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  border: none;
    color: white;
   border-radius: 22px;
  background-color: #6fb833;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.button2 {
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  border: none;
border-radius: 22px;
 box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);}
.button2_enabled{
  padding: 8px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  margin: 4px 2px;
  border: none;
border-radius: 22px;
  background-color: #fc6174;
    color: white;
     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.correctAnswer{
 background:none;
 background-color: none;
  margin: 4px 2px;
  font-size: 14px;
  font:gotham-medium;
  color:#6fb833;
  border: none;
  text-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.2);

}

</style>
<script>
function setColor(clickedBtnId, isCorrect){
if(clickedBtnId == 'button1') {
    var selectedBtn = document.getElementById('button1');
    var otherBtn = document.getElementById('button2');
        var imageBtn = document.getElementById('button3');
          imageBtn.style.background = "#6fb833";

     selectedBtn.className = isCorrect? "button1_enabled": "button2_enabled"
     otherBtn.className = !isCorrect? "button1_enabled": "button2_enabled"
} else {
    var otherBtn = document.getElementById('button1');
    var selectedBtn = document.getElementById('button2');
    var imageBtn = document.getElementById('button3');
     selectedBtn.className = isCorrect? "button1_enabled": "button2_enabled"
          otherBtn.className = !isCorrect? "button1_enabled": "button2_enabled"
          imageBtn.style.background = "#fc6174";
     }
     setTimeout(function() {
var firstBtn = document.getElementById('button1');
    var secondBtn = document.getElementById('button2');
    secondBtn.style.display = "none"
    firstBtn.className = 'correctAnswer'
}, 5000);

}
</script>
</head>

<body>
-1 is a
<input type="button" id="button1" value = "negative" class = "button1" onclick="setColor('button1', true)";/>
<input type="button" id="button2" value = "positive" class = "button1" onclick="setColor('button2',false)";/> number
</body>
</html>

最终结果将是“-1 是负数”。在此过渡期间，我需要在其上显示 Lottie 动画文件。

如https://airbnb.io/lottie/#/web中所述，尝试了以下方法，但没有任何反应。

标签： androidandroid-webviewlottie

android - 如何在单击 Android WebView 中存在的按钮时播放 Lottie 动画文件

问题描述

解决方案

推荐阅读