Saya memiliki beberapa ikon yang memiliki animasi intro [0,20] tempat mereka digambar dan animasi loop [21, 100] ketika Anda mengarahkan kursor ke ikon. Mengatur loop ke true akan membuat semua segmen saya loop yang bukan yang saya inginkan, saya hanya perlu satu segmen untuk loop. Pokoknya lakukan ini?

Berikut adalah contoh bagaimana saya mengatur kode saya:

var data = {
          container: el,
          renderer: 'svg',
          loop: false,
          autoplay: false,
          path: 'data.json'
        };

var anim = bodymovin.loadAnimation(data);

anim.addEventListener('DOMLoaded', function(e) {
        anim.playSegments([0,20], true); // run intro animation
});

el.addEventListener('mouseover', function(e) {
        anim.playSegments([21,100], true); // run loop animation
});

Edit Jawaban Akhir:

Implementasi saya terinspirasi oleh tetapi sedikit berbeda dari jawaban yang benar jadi saya pikir itu layak disebutkan. Saya pada dasarnya memuat animasi yang sama menjadi dua elemen yang ditempatkan di atas satu sama lain. Kedua elemen DOM diaktifkan melalui CSS untuk mode default dan hover. Satu-satunya perbedaan adalah saya memanipulasi objek data dan mengubah loop menjadi true untuk efek hover! Jadi saya merasa tidak perlu kembali ke animator saya dan meminta mereka untuk membagi animasi menjadi file yang berbeda.

3
user3376065 14 Agustus 2017, 17:01

2 jawaban

Jawaban Terbaik

Anda perlu membagi animasi menjadi 2 file, katakan intro dan arahkan kursor. Ini memberi Anda kemampuan untuk mengontrol bagian mana yang akan diulang.

Jadi file intronya bisa jadi:

var dataIntro = {
      container: el,
      renderer: 'svg',
      loop: false,
      autoplay: false,
      path: 'dataintro.json'
    };

var animIntro = bodymovin.loadAnimation(dataIntro);

animIntro.addEventListener('DOMLoaded', function(e) {
    animIntro.playSegments([0,20], true); // run intro animation
});

Dan ulangi untuk file dataHover:

var dataHover = {
      container: el,
      renderer: 'svg',
      loop: true,
      autoplay: false,
      path: 'datahover.json'
    };

var animHover = bodymovin.loadAnimation(dataHover);

el.addEventListener('mouseover', function(e) {
    animHover.playSegments([0,79], true); // run loop animation
});
3
JMP 14 Agustus 2017, 16:00

Saya pikir ini adalah pengaturan yang memungkinkan Anda untuk membagi animasi:

SCREENSHOT

0
Mohammad Kanan 4 Juli 2018, 02:17