質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

4450閲覧

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

yourai

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/02/28 09:45

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

JS

1<script> 2 $(function(){ 3 $("body").hide(); 4 $.when( 5 6 $("body").fadeIn(2000) 7 8 ).done(function() { 9 10 console.log("stroke"); 11 12 }); 13 14 }); 15 </script>

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

js

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cerfweb

2019/02/28 09:48

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

2019/02/28 09:49

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

2019/02/28 10:02

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

2019/02/28 10:48

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

2019/02/28 10:50

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

2019/03/01 16:17

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

回答2

0

ベストアンサー

まず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にパラメータ追加です。アニメーションの自動再生止めます。

js

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

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

js

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

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

投稿2019/02/28 11:04

編集2019/02/28 13:02
so87

総合スコア764

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

so87

2019/02/28 11:11

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

2019/02/28 14:47

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

2019/02/28 17:18

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

2019/03/01 01:49

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

2019/03/01 02:40 編集

function runAnim(){~~~}の回答例ではVivusのオプションは start:'manual' では駄目ですよ。jsfiddleでの回答例は2つとも'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

2019/03/01 06:27

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

2019/03/01 16:08

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

0

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

JavaScript

1var stroke; 2stroke = new Vivus('svg-animation', {type: 'scenario-sync', duration: 8, forceRender: false, animTimingFunction:Vivus.EASE, start:'manual'}); // start:'manual'を追加 3 4$(function(){ 5 $("body").hide(); 6 $("body").fadeIn(2000, function(){ 7 stroke.play(); 8 console.log("stroke"); 9 }); 10});

投稿2019/02/28 10:54

編集2019/02/28 15:53
cerfweb

総合スコア1899

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yourai

2019/02/28 10:59

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

2019/02/28 11:06

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

2019/02/28 14:52

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

2019/02/28 15:52

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

2019/02/28 15:56

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

2019/03/01 01:42

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

2019/03/01 07:43

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問