jsのコードを変数に入れて時間差の挙動を実装させる方法

Question

ストロークアニメーションを下記のコードで、画面が表示されてから実装したいのですがうまくいきません、、
vivus.jsを使用、ストロークアニメーションのみはうまくいっています。

<script>
            $(function(){
                $("body").hide();
            $.when(
          
        $("body").fadeIn(2000)
    
      ).done(function() { 
       
          console.log("stroke");
         
      });

      });
        </script>

ストロークアニメーションは適用するsvgの直下に下記を記載しています。

var stroke;
stroke = new Vivus('svg-animation', {type: 'scenario-sync',duration: 8, forceRender: false ,animTimingFunction:Vivus.EASE})

jsに疎く知識不足で申し訳ないのですがご教授いただけると幸いです。

Comments

[cerfweb]

「うまくいきません」というのがどういうことなのか具体的に書いていただけますか。

[m.ts10806]

インデントは揃えてください。
どこが始まりでどこが終わりかわからないコードはバグの温床です。
慣れないうちはフォーマット機能のついたエディタか、整形サービスを利用してください。

[yambejp]

fadeIn後にconsole.logするのはできているような気がしますが？

[yourai]

cerfweb様>>
fadeInしながらすでにストロークの処理も始まってしまっているのが問題になります。
mts10806様>>
失礼しました、以後気をつけます。。
yambejp様>>
fadeInと同時に始まってストローク処理が始まってしまっています、、console.logで動きを呼び出す方法はあっているのでしょうか？

[m.ts10806]

質問は編集できますので適宜ご対応いただければと。

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

まずnew Vivus()でアニメーションを実行しているコードを関数化します。
そして、console.log("stroke")しているところで定義した関数を呼び出せばOKです。

こんな感じです。
https://jsfiddle.net/so87rkh/c180ywuo/27/

蛇足ですが気になった点がひとつ、最初に$('body').hide()というやり方は後でちょっと問題になるかもです。htmlやcss構成によりますが、最初に隠す前のbody内容がちらっと一瞬だけ表示されるかもです。
hideで隠すのではなく、cssでbodyを隠しましょう。

自分ならこんな感じで、cssで最初に透明度を0にしておいて、透明度をアニメーションさせるかな。
https://jsfiddle.net/so87rkh/c180ywuo/20/

追記

jsのコードを変数に入れて

タイトルの意味がわかりました。
最初はアニメーションさせずに待機、あとでstroke変数をつかって再生したいということですね。
Vivusにパラメータ追加です。アニメーションの自動再生止めます。

stroke = new Vivus('svg-animation', {type: 'scenario-sync',duration: 8, forceRender: false ,animTimingFunction:Vivus.EASE,start:'manual'})

とした上で、console.logしているブロックにvivusインスタンスのplayメソッド実行です。

console.log("stroke");
stroke.play();

先の回答の通り、関数化でも良いと思いますが、求められている回答はこっちですかね

Comments

[so87]

関数化せずに`console.log("stroke")`しているブロックに書いてもいいですが、関数化しておいたほうが、描画の順番変更があった場合に対処しやすいです。

[yourai]

so87様
ご丁寧にサンプルまでご教示いただきありがとうございます。
職場から離れてしまったのですぐの確認ができませんが、おそらく提示いただいたもの、いずれでもできそうな気がします、、が、やはり問題は私自身のjs理解不足です。。変数定義といっても、今まではウィンドウの横幅だったり、せいぜい取得くらいまでしかやってこなかったものなので、そもそも挙動自体を変数にいれることができるのか？というところからつまづいてました。これをやったらこれ、これをやったらこれ、、、みたいなものはjsのみで制御できるものなのでしょうか？　cssのanimation-durationで遅延させるのではなく完全に順番づけをしていきたいのです、、質問の論点とズレてしまい申し訳ありませんがご助言いただけますと幸いです。

[so87]

完全なアニメーション制御は可能ですよ。以前はflashとそこで動くtween系ライブラリの仕事でしたが、flashが非推奨となり、HTML5の発展とともにjsのライブラリも充実してきました。まだ使ったことはないのですが、次の案件ではanime.jsで色々実装していきたいなーなんて妄想しております。

[yourai]

so87様
ご教示いただいたコードで一つ質問なのですが、function runAnim() {~~~)で~~~の動きを変数runAnimに格納しているという解釈でよろしいでしょうか？　~~~にnew Vivus('svg-animation', {type: 'scenario-sync',duration: 8, forceRender: false ,animTimingFunction:Vivus.EASE,start:'manual'})を記述して試してみましたが動きませんでした、、
ただ、cerfweb様にも返答させていただいた通り、svgタグ直下にjQueryと分けて記載すると、思った通りの動きになりました。。ただ調べてみても直下じゃなくても良いっぽいですね、、

[so87]

function runAnim(){~~~}の回答例ではVivusのオプションは start:'manual' では駄目ですよ。jsfiddleでの回答例は２つとも'autostart'を想定したものです。

昨晩、追記で回答したstart:'manual'はyouraiさんのコードを修正する場合の話です。
作例を一応示します。
https://jsfiddle.net/so87rkh/c180ywuo/51/

> function runAnim() {~~~)で~~~の動きを変数runAnimに格納

厳密にはrunAnim関数というものです。ただjsは変数に関数つっこむこともできるので、解釈としてはOKです。

> 直下じゃなくても良い

これに関しては「直下か直下じゃないか」という考え方が危ういです。
記述する場所がsvgタグより前でも、jsの実行順序的に後で実行されるならば大丈夫なのです。
実行する順番を簡単に約束してくれているのがjQueryの$(function(){})という書き方だったりするのですが、ここは勉強して理解を深めるしかないです。

svgより前に　stroke = new Vivus()　を書いた例
https://jsfiddle.net/so87rkh/c180ywuo/52/

[yourai]

so86様
ご回答ありがとうございます。
かなりの凡ミスをしてしまっており動かなかったみたいですがcerfweb様のと組み合わせて下記でうまくいきました。
$(function(){

var stroke;
stroke = new Vivus('svg-animation', {
type: 'scenario-sync',
duration: 8,
forceRender: false,
animTimingFunction:Vivus.EASE,
start: 'manual',
});

$("body").hide();
$("body").fadeIn(2000, function(){
stroke.play();
});

});

varをfunction(下記)に書き換えたら動きませんがもうキリがないので、、笑
function stroke(){
new Vivus('svg-animation', {
type: 'scenario-sync',
duration: 8,
forceRender: false,
animTimingFunction:Vivus.EASE,
start: 'manual',
});

[so87]

start:'manual' は自動再生ではないので、上記のパターンならば start:'autostart' ですよ！
start:'manual' は任意のタイミングで変数にいれたvivusインスタンスのplay()メソッドをコールする場合です。jsfiddleの作例４つは、すべてのパターンを示しているので、理解を深める参考になさってくださいませ。

Answer 2

以下のような書き方でいかがでしょうか。

var stroke;
stroke = new Vivus('svg-animation', {type: 'scenario-sync', duration: 8, forceRender: false, animTimingFunction:Vivus.EASE, start:'manual'});  // start:'manual'を追加

$(function(){
  $("body").hide();
  $("body").fadeIn(2000, function(){
    stroke.play();
    console.log("stroke");
  });
});

Comments

[yourai]

cerweb様>> 返答ありがとうございます。
記載いただいたスクリプトでもフェードインしながらスクロール処理が行われてしまいます、、

[cerfweb]

追記しましたのでご確認ください。
「ストロークアニメーションは適用するsvgの直下に下記を記載しています。」というのが問題ですね。
表示箇所をクラスかIDで指定して、コードは上記コード内に書いてみてください。

[yourai]

cerfweb様
ご回答ありがとうございます。ストロークアニメーションは適用するsvgの直下が問題、こちら私も疑いまして、普通に$(function(){});内にnew Vivus('svg-animation', {type: 'scenario-sync',duration: 8, forceRender: false ,animTimingFunction:Vivus.EASE,start:'manual'})を記載したところ、動きませんでした、、

[cerfweb]

追記しました。so87さんの書かれたコードと同じですね。すみません。

[cerfweb]

コールバック関数を使ってうまく繋いで行けばあれが終わったらこれ、これが終わったらそれというようにタイミングの調整もできます。

[yourai]

cerfeb様
色々とご回答ありがとうございます。
やはりVivis.jsのの特性なのか、SVGタグ直下にvar stroke〜を書かないと動きません、、
コールバック関数、勉強してみます。

[cerfweb]

私の環境では、body閉じタグ</body>直前に上記コードをまとめて書いても動作しましたが。