javascript画面を自動で切り替えながら拡大

Question

javascriptを始めたばかりの初心者です。

javascriptを使用し、
画像を切り替えながら動きをつけて拡大表示させる、
という事を自動で行いたい(繰り返し動作で表示させたい)のですが、
可能でしょうか？

又、同じ画面の中で、そういった画像を4つか5つ表示させ、
個々の画像は別々の動かし方(弧を描く、斜め、下から上、右から左等)
をさせる事は可能でしょうか？

fujillin · Accepted Answer

＞機能は追加可能でしょうか？　何度か回答しているように可能です。もうひとつ別にタイマーを入れるとか。とりあえずのサンプルに・・・引数なしで、同じ指定だけれど。（サンプルなのでご勘弁）＞Firefoxだと表示されません fx3.6にて動作確認していますが…　画像のアドレスが違っているとかはないですか？文字数制限があるので、内容のみ。（ほとんど#4と同じですが）

fujillin · Answer

#1～#4です。リサージュ曲線とかみたいに連続しているものなら、違う動作をつなげたりしなくても、ずっと動かしっぱなしにできますね。そんなサンプル。オブジェクト化して複数に対応したもの。 sample

以前の質問Q6119506も沢山を動かす例かな。

fujillin · Answer

#1～#3です。

＞、再度その動作が可能かどうか御質問出来ますでしょうか？
「その動作」というのがどのような動作なのかわかりませんので、断言はできませんが…
想像するところ、画像の変更や拡大/縮小および移動の組合せということだと思いますので、可能だと思われます。

＞あと、<おまけ>は、こちら海外の所為か見れませんでした。
うん？　海外サイトにアクセス制限でもかけているのでしょうか？
同じものを利用した別のＵＲＬ （こちらは画像ではなくテキストですが…）
（#3で挙げたオリジナルのものは、太陽系の惑星画像を回転させているものです）
　http://www.skuare.net/test/j3DRotator.html
どちらも、jquery.ｊｓとrotator.jsを利用しています。

fujillin · Answer

#1、#2です。

＞更に指定した時間で切り替えて表示する事は可能でしょうか？
何を切り替えたいのかわかりませんが、多分可能です。
ひとつの動作が終わったら、移動の方向や拡大（縮小）率を替えてまた動作するみたいな意味であるのなら、コールバック関数的なものを付加するか、あるいは全体を統括する部分をつくるなどすればできるでしょう。

＞ボタン等を使わずに、画面が表示されたら
ボタンは単なるきっかけとしての例なので、画面表示をきっかけにするならonloadなどを利用すればよろしいかと。
前回回答の例では、function test()をはずして、Animator.define(～～を直接実行させればそのようになります。
（動作は1回ですが…）

＞ずっと繰り返しで動かしたいのですが、可能でしょうか？
可能ですが、上例の場合はまったく同じ動きを繰返すのでは連続性がなくなるので、何種類かの動きをループさせて実行するようなことになるのではないでしょうか。
対象が複数あるということなので、オブジェクト化してしまったほうがよさそう。
#1で挙げた「うろちょろ」の後の方の例がオブジェクト化して、object.start()、object.stop()みたいな形で制御できるようになっています。ただし、このときは「うろちょろ」がテーマだったので、移動は質問者様のイメージとは違ってウロチョロですけど…（拡大/縮小もしてないし）

どのようなものを作りたいのかのイメージは質問者様にはわかっているのでしょうから、まずは、それぞれを分解して個別に作ってみるのがよいかも。それができれば全体を統合したものも作成できるかと思います。

＜おまけ＞
画像が拡大/縮小しながら動き続けていて、かつ、マウスに反応するスクリプトの例（jqueryを使っているらしい）
　http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html

fujillin · Answer

//つづき

animation: function(e, p, cnt) {
　var c = 0, i, s = e.style;
　var tId = setInterval(function() {
　　for (i in p) s[i] = (p[i](c) | 0) + "px";
　　if (++c > cnt) {
　　　clearInterval(tId);
　　　e = p = s = tId = null;
　　}
　}, 30);
},

setParam: function(p, opt, arg) {
　var start, end, t;
　start = this.getStyle(arg.element, p);
　if (start===null) return; else start = parseInt(start);
　end = start * opt.rate || +opt.value;
　if (end===undefined || isNaN(end)) return;
　t = opt.transition;
　if (!this.trans[t]) t = "linear";
　arg.param[p] = this.trans[t](start, end, arg.count);
},

trans: {
　linear: function(s, e, cnt) {
　　var d = e-s;
　　return function(c) {return c*d/cnt+s;}
　},
　sin: function(s, e, cnt) {
　　var d = e-s, pi=Math.PI/2;
　　return function(c) {return d*Math.sin(c*pi/cnt)+s;}
　},
　cos: function(s, e, cnt) {
　　var d = e-s, pi=Math.PI/2;
　　return function(c) {return e-d*Math.cos(c*pi/cnt);}
　}
},

define: function(id, option, time) {
　var elm = document.getElementById(id);
　if (!elm) return;
　var opt, p, arg = {};
　var i = 0, cnt = time/30 | 0;
　if (cnt <= 0) cnt = 1;
　arg.element = elm, arg.count = cnt, arg.param = {};

　for (p in option) {
　opt = option[p];
　switch (this.propertys[p]) {
　　case 1:
　　　this.setParam("width", opt, arg);
　　　this.setParam("height", opt, arg);
　　　break;
　　case 2:
　　　this.setParam(p, opt, arg);
　　　break;
　　default:
　　}
　}
　p = arg.param, arg = null;
　this.animation(elm, p, cnt);
}
}

// defineの引数
// id, { property:{rate/value:value, [transition:type]}, ・・・}, 時間(msec)
//
function test() {
　Animator.define("imageA", {
　size:{rate:4, transition:"linear"},
　left:{value:600, transition:"sin"},
　top:{value:500, transition:"cos"}
　}, 5000);

　Animator.define("imageB", {
　width:{value:300, transition:"sin"},
　left:{value:0},
　top:{value:600}
　}, 2500);
　test = new Function;
}
//-->
</script>
</body>
</html>

fujillin · Answer

回答がないようなので…

ご質問のようなことは基本的に可能ですが、全体を一般化して作るとなると、それなりのものになりそうです。
通常、画像の拡大縮小は画像サイズ（width/height）を、移動は表示位置（left/top）を連続的に変えることで実現しています。
拡大や移動の動作のパターンに応じて、計算処理を用意しておくような感じになるでしょうか。

＞javascriptを始めたばかりの初心者です
とのことなので、いきなり全部をやろうとするとちょっとハードルが高いかも…
最初に、個々のアニメーションの仕組みを理解して、拡大や単純移動のものを作成してみるのがよろしいかと。
それから、複数のものを同時に処理するように一般化したり、動作のバリエーションを追加できる仕組みを考えるなど…

一から作るのが面倒であれば、jqueryなどのanimateやeasingを利用するのも一法かと。
　http://semooh.jp/jquery/api/effects/animate/para …
　http://semooh.jp/jquery/cont/doc/easing/

一様ではない動きに関しては、以前の「うろちょろ」という質問が参考になるかも（ならないかも？）。
　http://oshiete.goo.ne.jp/qa/6168456.html
回答者達のその後の追加が、babu_babu_babooさんのところで行われているので、そちらも…
　http://d.hatena.ne.jp/babu_babu_baboo/20100911
　http://d.hatena.ne.jp/babu_babu_baboo/20100914

これだけだと回答にならないので、ごく簡単なそれっぽいものを作ったのでとっかかりのご参考にでも…
（書きっぱなしで、かなりいい加減です。なので実使用は無理。入力チェックも適当だし）
スタートボタンのクリックで一応動作しますが、連続クリックのチェックも省いているので、一回のみの動作にしています。
実際に使うには全体構成をちゃんとする必要があるし、要素が動作中に次の動作指示がきたときの仕組みなども考えておく必要がありそう。（ストックしておくとかキャンセルするとか）

指定する値やtransition（linear、sin、cos）を変えれば動きも変わります。一応、違う動きを新しく追加できるようにはなっています。
（多分、文字数制限にかかるので2分割になります。全角空白は半角にしてください）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#box { position:relative; }
#box img { position:absolute; width:50px; height:50px; }
#box #imageA { left:0; top:0; }
#box #imageB { left:650px; top:0; }
</style>
</head>

<body>
<div style="padding:20px;">
<button type="button" onclick="test()">START</button>
</div>
<div id="box">
<img id="imageA" src="A.jpg">
<img id="imageB" src="B.jpg">
</div>

<script type="text/javascript">
<!--
var Animator = {
propertys: {size:1, width:2, height:2, left:2, top:2},

getStyle: function(e, a) {
　return (e.currentStyle)? e.currentStyle[a]:
　getComputedStyle?document.defaultView.getComputedStyle(e, '').getPropertyValue(a):null;
},

javascript画面を自動で切り替えながら拡大

＞機能は追加可能でしょうか？

#1～#4です。

#1～#3です。

#1、#2です。

//つづき

回答がないようなので…

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

＞機能は追加可能でしょうか？　