1

Как с помощью paper.js можно анимировать один path в другой path, которые заранее известны?

    var path1 = "M2337.8,0.1c-346.8,7.6-415.8,270.8-934.3,244.7 c-330.4-16.6-389.1-110.8-677.8-101.3c-321,10.5-403.4,252.6-592.3,252.6C73,396.1,29.8,372.8,0,341.9v451.8h2778V200 C2692.9,103.1,2538.6-4.3,2337.8,0.1z"
    path2 = "M2337.8,326.3C1991,333.9,1845,45.9,1472,45.9 c-334.4,0-390,181.9-639,181.9C473,227.8,400.3,0,195.7,0C84.5,0,0,98.3,0,146.1v562.6h2778V62.9 C2686,199.8,2538.6,321.9,2337.8,326.3z" 

3
  • Коды каких патчей?
    – Dmitriy
    13 июн 2018 в 18:08
  • 1
    Отредактировал, добавил path
    – Dmitriy
    14 июн 2018 в 7:42
  • @Alexandr_TT, почта России?))))
    – Arthur
    14 июн 2018 в 7:58

1 ответ 1

2

Вот ваш svg, в котором патчами нарисованы две кривые.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
   
     width="500" height="500" viewBox="0 0 500 500" >  
<g fill="none" stroke="black">
 <path d= "M2337.8,0.1c-346.8,7.6-415.8,270.8-934.3,244.7 c-330.4-16.6-389.1-110.8-677.8-101.3c-321,10.5-403.4,252.6-592.3,252.6C73,396.1,29.8,372.8,0,341.9v451.8h2778V200 C2692.9,103.1,2538.6-4.3,2337.8,0.1z"/>

 <path d= "M2337.8,326.3C1991,333.9,1845,45.9,1472,45.9 c-334.4,0-390,181.9-639,181.9C473,227.8,400.3,0,195.7,0C84.5,0,0,98.3,0,146.1v562.6h2778V62.9 C2686,199.8,2538.6,321.9,2337.8,326.3z" />
 </g>
</svg>	 

Как я понимаю, вы хотели, чтобы одна кривая плавно трансформировалась в другую кривую.

Для этого нужно сделать анимацию параметра d патча.
Другими словами все узловые точки первого патча должны переместиться из позиций первого патча в позиции второго патча. Для этого существует команда анимации:

<animate attributeName="d" dur="4s" begin="svg1.click" fill="freeze" values="M2337.8,0.1c-346.8 первый патч .....z; M2337.8,326.3C1991... второй патч ..z />   

Обратите внимание на точку с запятой - z; это обязательное разделение двух патчей, которые будут трансформироваться

Анимация начинается по клику на холсте svg begin="svg1.click"

<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500" >  
<g fill="none" stroke="black">
 <path d= "M2337.8,0.1c-346.8,7.6-415.8,270.8-934.3,244.7 c-330.4-16.6-389.1-110.8-677.8-101.3c-321,10.5-403.4,252.6-592.3,252.6C73,396.1,29.8,372.8,0,341.9v451.8h2778V200 C2692.9,103.1,2538.6-4.3,2337.8,0.1z">  
 
<animate attributeName="d" dur="4s" begin="svg1.click" fill="freeze" values="M2337.8,0.1c-346.8,7.6-415.8,270.8-934.3,244.7 c-330.4-16.6-389.1-110.8-677.8-101.3c-321,10.5-403.4,252.6-592.3,252.6C73,396.1,29.8,372.8,0,341.9v451.8h2778V200 C2692.9,103.1,2538.6-4.3,2337.8,0.1z;M2337.8,326.3C1991,333.9,1845,45.9,1472,45.9 c-334.4,0-390,181.9-639,181.9C473,227.8,400.3,0,195.7,0C84.5,0,0,98.3,0,146.1v562.6h2778V62.9 C2686,199.8,2538.6,321.9,2337.8,326.3z " />
</path>
 </g>
</svg>	 

На мой взгляд просто необходимо разобраться, как происходят трансформации в чистом SVG, а потом уже использовать JS фреймворки.

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

1
  • Это все конечно замечательно, но это я все примерно знаю. Мне нужна информация именно по библиотеке, потому что она работает с канвас. Я знаю что она может генерировать пас в канвас, а вот как сделать морфлинг я в документации какой то вменяемой информации не нашел, но исходя из их примеров, это сделать можно
    – Dmitriy
    14 июн 2018 в 11:48

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.