　スライドを作ったらトランジションアニメーションも入れたいところです。とりあえず基本のフェードイン/フェードアウトを入れてみます。どんどんメソッドチェーンが長くなるので、一つ一つ区切って理解していくと良いと思います。

フェードイン/フェードアウト

　前回のコードを元に追加していきましょう。
　ふわっと出したり消したい場合は reveal() を使います。 present.slide().reveal().interval() のように適当な位置に差し込みます。スライド開始でフェードインさせたいので、 slide() の後ろに reveal() を入れています。ここで一つ注意が必要で、トランジションの単位でも end() を入れる必要があるということです。ここではスライドが切り替わるタイミングでフェードアウトさせたいので、スライド区切りの end() の手前にもう一つ end() を入れています。

　以下のコードでは一枚目のスライドのみにフェードイン/フェードアウトを適用しています。 end() を削除してみて動作の違いを確認してみて下さい。

　また、同じようにして二枚目もフェードイン/フェードアウトさせるようにしてみて下さい。

present.slide().reveal().interval({
  width: 2,
  expr: function (emit, x, i, time) {
    emit(x, 0);
  },
  items: 1,
  channels: 2,
}).line({
  color: 0x3090FF,
  width: 10,
}).end().end()
  .slide().interval({
    width: 128,
    expr: function (emit, x, i, time) {
      var d = Math.sin((x + time) * 2);
      emit(x, d * .5);
    },
    items: 1,
    channels: 2,
  }).line({
    color: 0xFF3090,
    width: 10,
  });

パラメータの指定

　遷移の期間を少し短くしてみましょう。 reveal({ duration: 0.1 }) のようにパラメータを渡してみましょう。 duration のデフォルト値は 0.3 なので三倍早くなるはずです。他にも色々なパラメータがあるので、ドキュメントを見ながら試してみて下さい。

コード全体

　二枚目のスライドにも reveal() を適用したコード全体は下記の通りです。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>MathBox - XYZW Test</title>
    <script src="../../build/mathbox-bundle.js"></script>
    <link rel="stylesheet" href="../../build/mathbox.css">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    </head>
    <body>
    <script>
     mathbox = mathBox({
         plugins: ['core', 'controls', 'cursor'],
         controls: {
         klass: THREE.OrbitControls
         },
     });
     three = mathbox.three;

     three.camera.position.set(2.3, 1, 2);
     three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);

     view = mathbox.cartesian({
         range: [[-6, 6], [-1, 1], [-1, 1]],
         scale: [6, 1, 1],
     });

     present = view.present({
         index: 1
     })

     function prevSlide () {
         present.set('index', present.get('index') - 1);
     }

     function nextSlide () {
         present.set('index', present.get('index') + 1);
     }

     present.slide().reveal({
         duration: 0.1,
     }).interval({
         width: 2,
         expr: function (emit, x, i, time) {
         emit(x, 0);
         },
         items: 1,
         channels: 2,
     }).line({
         color: 0x3090FF,
         width: 10,
     }).end().end()
        .slide().reveal({
            duration: 0.1,
        }).interval({
            width: 128,
            expr: function (emit, x, i, time) {
            var d = Math.sin((x + time) * 2);
            emit(x, d * .5);
            },
            items: 1,
            channels: 2,
        }).line({
            color: 0xFF3090,
            width: 10,
        });

     present.grid({
         stroke: 'dashed',
     });
    </script>
    </body>
</html>

See the Pen fade in and out by Yuichi Sato (@satoyuichi) on CodePen.

MathBox でトランジションアニメーション（フェードイン/フェードアウト）を作る

フェードイン/フェードアウト

パラメータの指定

コード全体