Я нашел этот gif, но его качество низкое, и мне нужен лучший.
Можно ли кодировать анимацию gif на основе JS?Анимация кода. Преобразование загрузочного круга gif с галочкой в анимацию на основе JS
0
A
ответ
0
Да, это возможно. Вы можете сделать большой, записать его анимацию, а затем преобразовать HQ в формат gif.
Вот одно из раствора:
$.getScript('https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js', function(){
var loading = `<style>
div#container {
margin: 20px;
width: 200px;
height: 200px;
pointer-events: none;
user-select: none;
}
div#bkground {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 200px;
height: 200px;
}
div#bkground div {
width: 182px;
height: 182px;
background-color: #a3a3ff;
border-radius: 100px;
}
div#whitecircle {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 200px;
height: 200px;
}
div#whitecircle div {
width: 182px;
height: 182px;
background-color: #fff;
border-radius: 100px;
}
div#tick {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 200px;
height: 200px;
}
div#tick div {
color: #E0E0FF;
font-size: 0;
font-weight: bold;
}
</style>
<div id="container">
<div id='bkground'><div></div></div>
<div id='whitecircle'><div></div></div>
<div id='tick'><div>✔</div></div>
</div>
</div>`;
$('div#check.check').html(loading);
var bar = new ProgressBar.Circle(container, {
strokeWidth: 5,
easing: 'easeInOutExpo',
duration: 1500,
color: '#a3a3ff',
trailColor: '#d1d1ff',
trailWidth: 5,
svgStyle: null,
from: { color: '#a3a3ff', width: 5 },
to: { color: '#a3a3ff', width: 5 },
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 100);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.text.style.color = 'transparent';
bar.animate(1.0);
var interval2 = setInterval(function(){
if ($('div.progressbar-text').text() == '100') {
clearInterval(interval2);
$('div#whitecircle div').animate({
width: 0,
height: 0
}, 333, function(){
$('div#tick div').animate({
fontSize: 150
}, 333);
});
};
}, 100);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div class='check' id='check'></div>
Основные параметры: (. Оп = 200px)
width
и height
width
и height
(Ori = 182px.)
border-radius
easing
(ori. = 'EaseInOutExpo')
div#tick div
(галочка-х font-family
)
Для более bar
«s параметры, пожалуйста, посетите this page.
Кредит: kimmobrunfeldt
Смежные вопросы
- 1. Добавить анимацию загрузочного круга во время загрузки изображений
- 2. Простая GIF-анимация с Spritekit
- 3. Отключить gif анимацию программно
- 4. Анимация gif на прокрутку.
- 5. Изменение размера загрузочного gif
- 6. Как перезапустить gif-анимацию на новой странице?
- 7. Анимация изображения .GIF на JPanel
- 8. Анимация: CSS3 или GIF?
- 9. Показать анимацию gif
- 10. Анимация - GIF
- 11. Анимация круга вдоль кривой синуса
- 12. Gif анимация не перезапускается на новой странице ...?
- 13. html css Gif Анимация
- 14. Анимация gif в wxPython
- 15. Анимация - рисование круга в iOS - не анимация полного круга
- 16. (QT C++) Анимация GIF на основе значения слайдера/набора
- 17. android- лучший способ играть в анимацию gif
- 18. ImageMagick: анимация GIF с прозрачным фоном
- 19. Как преобразовать анимацию GIF в строку Base64 и вернуться в анимацию GIF?
- 20. Создать анимацию анимации вращающегося круга
- 21. GIF анимация в Qt
- 22. PHP: удалить анимацию GIF
- 23. Отображает анимацию для Photo GIF GIF?
- 24. mplayer gif анимация в полноэкранном режиме?
- 25. XNA Gif Анимация
- 26. Преобразование кода анимации div в vanilla JS
- 27. редактирование gif-файла в gimp останавливает анимацию
- 28. Преобразование кода на основе события в Rx
- 29. Как нарисовать анимацию круга без использования холста?
- 30. андроид gif анимация и кнопка