cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Stay updated on what is happening on the PTC Community by subscribing to PTC Community Announcements. X

How can I animate .svg image in Vuforia Studio

Swapnil_More
14-Alexandrite

How can I animate .svg image in Vuforia Studio

Hello,

I want to animate .SVG file in Vuforia Studio. I have .SVG file and I am able to animate it on Google Chrome, but in VS it's not working. Can anyone explain me how to animate?

please find attached .svg file for reference.

This is SVG Code which I am using:

<?xml version='1.0' encoding='UTF-8'?>
<svg xmlns="http://www.w3.org/2000/svg" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" x="0px" y="0px" xml:space="preserve">
<path class="k4" style="fill:none;fill-rule:evenodd;stroke:#df871b;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 275.924,699.49118 54.75863,60.10532"/>
<g class="isolate">
<path class="blend t1" style="opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#dd5d20;stroke-width:79.81949615;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 215.47816,252.84847 115.22634,0"/>
<path class="blend t2" d="m 273.09133,252.65768 0,115.22634" style="display:inline;opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#0b9444;stroke-width:79.81949615;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<path class="blend h1" style="display:inline;opacity:1;fill:#1f91ac;fill-opacity:1;fill-rule:evenodd;stroke:#1f91ac;stroke-width:79.81949615;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 410.71374,252.65768 0,115.22634"/>
<path class="blend h2" d="m 410.47816,310.44844 115.22634,0" style="opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#df871b;stroke-width:79.81949615;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<path class="blend i1" d="m 215.47816,448.64847 115.22634,0" style="opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#dd5d20;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<path class="blend i2" style="opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#dd5d20;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 215.47816,563.85818 115.22634,0"/>
<path class="blend i3" style="display:inline;opacity:1;fill:#dd5d20;fill-opacity:1;fill-rule:evenodd;stroke:#1f91ac;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 273.09133,448.56614 0,115.22634"/>
<path class="blend n1" d="m 410.71374,448.36614 0,115.22634" style="display:inline;opacity:1;fill:#1f91ac;fill-opacity:1;fill-rule:evenodd;stroke:#da3931;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<path class="blend n2" style="display:inline;opacity:1;fill:#1f91ac;fill-opacity:1;fill-rule:evenodd;stroke:#da3931;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 526.004,448.36614 0,115.22634"/>
<path class="blend n3" style="fill:none;fill-rule:evenodd;stroke:#0b9444;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 410.7,448.46218 115.37,115.013"/>
<path class="blend k1" style="display:inline;opacity:1;fill:#1f91ac;fill-opacity:1;fill-rule:evenodd;stroke:#da3931;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" d="m 215.32637,644.48746 0,115.22634"/>
<path class="blend k2" d="m 215.31263,759.5965 115.37,-115.013" style="fill:none;fill-rule:evenodd;stroke:#1f91ac;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
</g>
<path class="h3" d="m 525.41374,252.65768 0,115.22634" style="display:inline;opacity:1;fill:#1f91ac;fill-opacity:1;fill-rule:evenodd;stroke:#1f91ac;stroke-width:79.81949615;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<circle class="h4" style="opacity:1;fill:#df871b;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" cx="526" cy="252.36218" r="40"/>
<circle class="i4" r="40" cy="448.36218" cx="273" style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<circle class="n4" style="opacity:1;fill:#da3931;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" cx="410.70001" cy="448.66217" r="40"/>
<circle class="n5" r="40" cy="563.16217" cx="526" style="opacity:1;fill:#da3931;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
<circle class="k3" r="40" cy="759.39655" cx="215.31264" style="opacity:1;fill:#da3931;fill-opacity:1;stroke:none;stroke-width:80;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1"/>
</svg>

and this is Javascript code:

var timeline = anime.timeline({ autoplay: true, direction: 'alternate', loop: true });

function setDash(el) {
  if (el.nodeName === 'path') {
    el.style.dashArray = anime.setDashoffset(el);
    return [anime.setDashoffset(el) - 1, 0];
  }
  
  return 0;
}

var animations = [
  { name: '.t1', x: 195.47816, y: 152.84847, stroke: '#dd5d20' },
  { name: '.t2', x: 254.09133, y: 152.65768, stroke: '#0b9444' },
  { name: '.h1', x: 387.71374, y: 152.65768, stroke: '#1f91ac' },
  { name: '.h2', x: 383.47816, y: 210.44844, stroke: '#df871b' },
  { name: '.h3', x: 510.41374, y: 152.65768, stroke: '#1f91ac' },
  { name: '.h4', x: 507, y: 152.36218, fill: '#df871b' },
  { name: '.i1', x: 192.47816, y: 348.64847, stroke: '#dd5d20' },
  { name: '.i2', x: 188.47816, y: 463.85818, stroke: '#dd5d20' },
  { name: '.i3', x: 258.09133, y: 348.56614, stroke: '#1f91ac' },
  { name: '.i4', x: 254, y: 348.36218, fill: '#ffffff' },
  { name: '.n1', x: 387.71374, y: 348.36614, stroke: '#da3931' },
  { name: '.n2', x: 499.004, y: 348.36614, stroke: '#da3931' },
  { name: '.n3', x: 395.7, y: 348.46218, stroke: '#0b9444' },
  { name: '.n4', x: 391.70001, y: 348.66217, fill: '#da3931' },
  { name: '.n5', x: 503, y: 463.16217, fill: '#da3931' },
  { name: '.k1', x: 188.32637, y: 544.48746, stroke: '#da3931' },
  { name: '.k2', x: 200.31263, y: 659.5965, stroke: '#1f91ac' },
  { name: '.k3', x: 196.31264, y: 659.39655, fill: '#da3931' },
  { name: '.k4', x: 252.924, y: 599.49118, stroke: '#df871b' }
];

animations.forEach(function(animation, index) {
  if (animation.stroke) {
    timeline
    .add({
      targets: animation.name,
      stroke: {
        value: ['#000', animation.stroke],
        duration: 500,
        delay: 1000 + index * 30,
        easing: 'easeInOutQuad'
      },
      offset: 0
    });
  }
  if (animation.fill) {
    timeline
    .add({
      targets: animation.name,
      fill: {
        value: ['#000', animation.fill],
        duration: 500,
        delay: 1000 + index * 30,
        easing: 'easeInOutQuad'
      },
      offset: 0
    });
  }
  timeline
  .add({
    targets: animation.name,
    translateX: {
      value: [100 * (index % 4) - animation.x + 100, -100],
      duration: 500,
      delay: 1000 + index * 30,
      easing: 'easeInOutQuad'
    },
    translateY: {
      value: [100 * Math.floor(index / 4) - animation.y + 100, -100],
      duration: 500,
      delay: 1000 + index * 30,
      easing: 'easeInOutQuad'
    },
    offset: 0
  });
  timeline
  .add({
    targets: animation.name,
    strokeDashoffset: {
      value: setDash,
      duration: 800,
      delay: 1200 + index * 30,
      easing: 'easeInOutQuad'
    },
    offset: 0
  });
});

timeline
.add({
  targets: '.t1',
  opacity: 1,
  duration: 1000,
  delay: 4000,
  offset: 0
});

If possible please help me with this.

 

Regards,
Swapnil More
1 ACCEPTED SOLUTION

Accepted Solutions

So if you read that last error saying "anime is not defined" I would start there. I don't see 'anime' defined anywhere in the code you posted, but you try to reference it in the first line.

View solution in original post

4 REPLIES 4

2D or 3D image widget? And are you able to get it to display but the animation is not working? Is your JS code throwing any error in the console?

 

Pure speculation here but Studio and View are weird in how they handle 2D assets used in the 3D space. For example you can swap out the src for a 3D image but you can not change the dimensions and if you start with a 200x200 image and replace it with a 200x400 image the new image will be squished into the 200x200 box. The only value I have had luck changing is 'scale'.

 

I would not be supersized if the svg is being converted to a png at some point and that is why your animation is not working.

Swapnil_More
14-Alexandrite
(To:jmikesell)

Thanks for reply!!!

I am using 3D Image Widget. 

I am able to get it display but only animation is not working. Capture.PNGPlease find above image for error reference.

Regards,
Swapnil More

So if you read that last error saying "anime is not defined" I would start there. I don't see 'anime' defined anywhere in the code you posted, but you try to reference it in the first line.

Swapnil_More
14-Alexandrite
(To:jmikesell)

Could you please tell me that how to define anime? because I tried number of ways but it's not working.

Regards,
Swapnil More
Top Tags