Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/10/17 (火)

スライドショー

| 10:28 | スライドショー - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - スライドショー - 雪乃☆雫のなでしこ日和 スライドショー - 雪乃☆雫のなでしこ日和 のブックマークコメント

 通りすがりさまから貴重な教えを頂いて、ナゾが一つ解明し、また少し賢くなったので、早速やってみます☆

 プログラムとしては、単に複数の画像を勝手に延々ループ再生するスライドショーです。


 CSSで二枚のcanvasを重ねて配置するのは同じです。

 まず行うのは、表画面となる「cv_1」をっ黒に塗りつぶすこと!

 別に色は何でもいいんだけど、とりあえず最初の状態は透明なので、塗りつぶすかダミーの画像を表示するかしておかないと、裏画面に画像を読んだらそれが全部透けて見えてしまうんです~;

(重ね合わせの実験の時には白で塗りつぶして、まだ何も起こってないフリをこき、フェードインの実験の時にはcv_1の方から先に画像描画をしています)


 次に、裏画面となる「cv_2」に画像をロード。

 ロードしたイメージに名前をつけて使うことが出来るので、何度も同じ画像をファイルから読み直す必要は無いし、画像の枚数分canvasを用意する必要も無いワケですね。すばらしい!

 連番で名前をつけながら、同じcv_2に必要の画像を全て、どんどこロードしてしまいます。

 imageの名称に変数を使って連番にするのは、「ナデシコする」でできました☆

 imageを画像描画する場合でも、やっぱりウェイトは入れる必要がありました。

 でも、HDD上ではあまりが出なかったのですが、web上ではファイルからの画像描画はだいぶ遅くなり、0.1秒のウェイトではダメでした。結構が出るようで、imageは使っていかなければ!

 だけど、枚数が増えるとそれだけ最初にまとめてロードするのに時がかかるよね。

 画像描画が伴わなければずっと早いはずだし、何より裏でロードしながら、描画を始めることが出来るような気がするので、のほうが確かに使い勝手が良さそうな気がします。


 スライドショーの本体ですけど、基本は前のフェードインの実験を、マウスクリックでは無く、時で自動的に変更していくようにしただけで、まず「cv_2」に画像を描画し、「cv_1」の透明度をトランジョンで0に変化させて画像が入れ替わったように見せかけるのは、まったく同じです。

 前のフェードインの実験では、の後「z-index」を変えて実際に二枚の画像を入れ替えていましたが、は「cv_1」に同じ画像を画像描画して透明度を1に戻しています。

 して最初に戻って「cv_2」に次の画像を描画・・・で、無限ループ

 はマウスのイベントを使ってませんが、それもこのようにすればcv_1のイベントだけで全部出来たハズでしたね(^▽^;


 でっ、こんな感じ~。

<script type="なでしこ">
#-----------------------------------------------------------------------
画像枚数=5。
ウェイト=0.3。  //画像ロード時のウェイト。長めに取ってます。
画像読待=画像枚数*ウェイト。
表示=4。   //画像表示。
C=0。S=「.」
説明=["片栗(かたくり)","蝦夷延胡索(エゾエンゴサク)","延齢草(エンレイソウ)","蝦夷立金花(エゾノリュウキンカ)","水芭蕉(みずばしょう)"]

#まず表画面を塗りつぶして、裏画面が見えないようにする。
「#cv_1」へ描画開始。
黒色塗り色設定。
[0,0,480,360]へ四角描画。

#メイン
0.1秒後には、
  「#cv_2」へ描画開始。画像ロード。       //裏画面に画像読み込み
  (画像読待)秒後には
    「#mes」に「 」をDOMテキスト設定。    //画像読み込み中の表示を消し
    スライドショー。             //無限ループ
  ここまで。
ここまで。

●画像ロード
  「画像{C}は[0,0]に{カッコ}http://www.geocities.jp/snowdrops890/image/hana_{C}.jpg{カッコ閉じ}の画像描画。」をナデシコする。
  「#mes」に「Loading」SをDOMテキスト設定。
  C=C+1。S=S&「.」。
  もし、(C<画像枚数)ならば、「画像ロード」を(ウェイト)秒後。
  違えば、C=0。
ここまで。

●スライドショー
  「#cv_2」へ描画開始。
  「[0,0]に画像{C}の画像描画。」をナデシコする。
  0.1秒後には
   「#cv_1」の「transition」に「opacity 2s」をDOMスタイル設定。
   「#cv_1」の「opacity」に「0」をDOMスタイル設定。
   「#mes」に「北国の五月 ~ 」説明[C]をDOMテキスト設定。
   2.1秒後には
    「#cv_1」へ描画開始。
    「[0,0]に画像{C}の画像描画。」をナデシコする。
    「#cv_1」の「transition」に「opacity 0s」をDOMスタイル設定。
    「#cv_1」の「opacity」に「1」をDOMスタイル設定。
    もし、(C≧画像枚数-1)ならば、C=0。
    違えば、C=C+1。
    「スライドショー」を(表示)秒後。
   ここまで。
  ここまで。
ここまで。
#-----------------------------------------------------------------------
</script>

<H1>スライドショー</H1>
<HR>
<style type="text/css">
#base {
  margin:auto;
  width:480px;
  height:380px;
}
#main {
  position:absolute;
}
#cv_1 {
  position:absolute;
  z-index:1;
}
#cv_2 {
  position:absolute;
  z-index:0;
}
</style>
<div id="base">
  <span id="mes">Loading</span>
  <div id="main">
    <canvas id="cv_1" width="480px" height="360px"></canvas>
    <canvas id="cv_2" width="480px" height="360px"></canvas>
  </div>
</div>
<HR>

http://www.geocities.jp/snowdrops890/wnako3_test/08_slideShow.html

 北海道土産の定番、六花亭の袋っぽい?www

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171017