#android #android-webview #lottie
Вопрос:
У меня есть веб-представление, в котором отображается содержимое с двумя кнопками (кнопки HTML-тегов), в которых отображается какая-то опция для выбора пользователя. При нажатии на любую из них цвет кнопки меняется на зеленый и красный, указывая на правильную и неправильную опцию. Через 2-3 секунды эти две кнопки заменяются правильным текстом опции. Во время этого перехода я должен отобразить анимацию Лотти.
Это мой 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 — отрицательное число». Во время этого перехода мне нужно отобразить на нем файл анимации Лотти.
Следующий подход, опробованный, как упоминалось в https://airbnb.io/lottie/#/web, но ничего не происходит.