Анимация svg глаз кролика с помощью атрибутов path “d” и “keyTimes”

#css #html5 #svg #анимация #svg_animation

Как можно анимировать svg картинку? Хочу чтобы кролик моргал глазами.



#pa8{
width: 250px;
height:250px;
}
 



    

Ответы

Ответ 1

Взял код из предыдущего ответа, добавил кролику зрачок глаза. переработал анимацию
с учетом добавления атрибута keyTimes, которым задаётся неравномерность движения века
глаза.   

Основное условие применения этого атрибута -
Количество значений keytimes и values в path должно совпадать.   

keyTimes="0;0.15;0.18;0.85;1"  имеет 5 значений, ровно столько значений должно быть
в формуле анимации атрибута d path - 5 подробнее здесь   



.container {
width:90%;
height:90%;
}


  


Ответ 2

Если потребуется объяснения каким образом это сделано подробно я объясню 

Как было сказано на Toster что анимировать img не возможно и это обсуждалось уже
милион раз здесь , в вашем случае надо взять весь код из img открыть обычным халявным
notepad++ 
и вынести SVG в html и анемировать тот путь 


  Вот реализация вашей задумки :
  https://codepen.io/topicstarter/pen/PgLdog


я искал в ручную этот path и так как он был ниже того глаза то я просто переместил
path c анимацией в самый низ ...

И что хочу сказать что toster stackoverflow не база бесплатных исполнений ХОТЕЛОК

Конкретно вот этот участок отвечает за эффект :




     
     
    
  




Прошу модераторов простить меня за то что выложил код в песочнице но максимальная
длина сообщения 30000 а код составил 35 000


Ответ 3

Пришлось подрихтовать зайца, чтобы он лез в сниппет, я уменьшил точность точек в
путях при помощи svg-optimiser и убрал у него несколько областей.

Далее открываем отладчик Сhrome и при помощи инспектора  выясняем как найти тот путь,
который формирует глаза:



Как оказалось это второй по счету элемент с классом .a 

После манипуляций c путем выясняем какие части атрибута пути d формируют внутренние
отверстия для левого и правого глаза черном полигоне 

Разделить путь на внешний контур и внутренние отверстия легко вызвав .split('z')
на строке атрибута d

Далее добавляем 2 круга, которые будем двигать по кликам мышки и используем 2 пути
найденных на предыдущем шаге в качестве clip-path для них





let d=document
let e=d.querySelectorAll('.a')[1].getAttribute('d').split('z')
d.querySelector('svg').innerHTML+=`





`
let t,dir=-1,vr=0,vl=0
let xy=(e,x,y) => e.setAttribute('cx', x)||e.setAttribute('cy', y)
let tr=(e,x,y) => e.setAttribute('transform', `translate(${x},${y})`)
let l=(type,i) => addEventListener(type,()=>dir=i)
e=d.querySelectorAll('.a')
t=new Date().getTime()
l('mousedown',1)
l('mouseup',-1)
setInterval(()=>{
 dir=1
 setTimeout(()=>dir=-1,300)
},3000)
anim()
addEventListener('mousemove',ev=>{
 let x=ev.clientX/innerWidth-0.5
 let y=ev.clientY/innerHeight-0.5
 tr(e[2],x*50,y*50)
 tr(e[3],x*40-10,y*30)
})
function anim() {
 let dt=new Date().getTime()-t
 vr=Math.min(1,Math.max(vr+dt/88*dir,0))
 vl=Math.min(1,Math.max(vl+dt/200*dir,0))
 xy(d.querySelector('#left'),345+vl*50,420+vl*125)
 xy(d.querySelector('#right'),400+vr*50,370+vr*150)
 t=new Date().getTime()
 requestAnimationFrame(anim)
}



Ответ 4

Это пример анимации кролика но саму картинку я взял из сети :с этого сайта

Так же анимировал по технике анимации SMIL 









Пример рекомендуется к просмотру в полноэкранном режиме