Как сделать радиальную анимацию?

Question

[Артур Бекеров]

Как можно сделать анимацию, которая показывает картинку так, как вот тут в самом конце www.chartjs.org Doughnut charts.
Только чтобы вместо SVG была картинка и при открытии картинка сама не деформировалась, а просто показывалась часть в зависимости от времени. т.е. увеличивается угол со временем.

Answer 1

[xmitternachtx]

Наложить поверх картинки div, дождаться события onload img и применить к div-у данный вид анимации. Ну это первое, что пришло в голову.

Comments

[Артур Бекеров]

@xmitternachtx и как же прикрутить к диву? я не вижу разницы между див и картинкой.

[xmitternachtx]

@krekerov
$('img').onload(function(){
$('#your_div_id').animate('your_settings')
}

ничего сложного же. Div-у даёте анимацию поворота + opacity с таймингом. Div будет исчезать постепенно, а картинка появляться

[xmitternachtx]

@krekerov Вы не видите принципиальной разницы между div и картинкой, или вы не знаете что с ними делать?

Answer 2

[Виталий Желтяков]

Либо используем div, как написали выше, применяя к нему анимацию поворота. Либо спрайтовую анимацию с закрывающей картинкой.
Но у меня подозрение, что оба варианта будут слегка тормознутыми