网页学习——DJMAX RESPECT

  • 网页学习
  • DJMAX RESPECT
  • 动画
  • animate

:disappointed:目前(2019/02/18)官网早已进行了更新,网站中不再有本文所重点介绍的背景特效了。目前网站主页的逻辑主要是写在home.js中,引用的库并没有变。我把原来的teaser.js备份在这里了,下次会记得保存效果图的。


前不久(2017/07/28),DJMAX RESPECT发售。查找资料时发现它在日本的宣传网站看起来简单而酷炫,因此决定研究一下其效果是如何实现的。

动效实现

实现

查看引用的js,可以看到网站使用了jQuery Scrollify这个滑动动画的库,CreateJSVelocity.js这两个动画库,以及Ease+ for Velocity.jsjQuery easing这两个缓动(easing)库。1

其中,Velocity.js采用了和jQueryanimate()相同的API,在性能优化的同时还加入了循环、滚动、变换等效果。

Ease+ for Velocity.js借鉴TweenJS(CreateJS),实现了Velocity.js未实现的Back, Elastic, Bounce这三个缓动效果。

页面的逻辑都写在teaser.js里。

通过代码可以看出:

  1. 加载的进度条是根据PreloadJS(CreateJS)实现的
  2. 中间旋转的logo是使用了gif图片
  3. 背景使用CreateJS做了两个定时动画
  4. 中间的三行文字用的是背景图,文字的滑动通过Velocity.js实现
  5. 滚动的效果是利用jQuery Scrollify实现的
  6. 其他小动效都是使用Velocity.js实现的

分析

值得仔细说的是背景的动效,好在注释写的很清楚(虽然有点问题),看起来轻松不少。

网站的背景色为#fcf0b0,同时维护了两个canvas作为容器(Stage),执行了相同的白色斜线(particle)滑动的效果。两个canvas的z-index分别为1,3,透明度为0.5,而中间文字的z-index为2,借此实现立体的效果。旋转logo的z-index为4。

粒子滑动实现的主要思想是借助CreateJS提供的Ticker定时,在每个周期中生成斜线、设定斜线的动画,删除斜线。

  1. 定时使用的是requestAnimationFrame的频率。
     createjs.Ticker.addEventListener("tick", particle_tick);
     createjs.Ticker.timingMode = createjs.Ticker.RAF;
    
  2. 前10个周期,每个周期生成1个斜线。之后每5个周期生成一个斜线。
     //20回ごとに1回発生。ただし最初の10回は1回ごとに発生。
     if(emit_cnt > 15) emit_cnt = 10;
     if(emit_cnt <= 10){
         particle_emit_lo();
         particle_emit_up();
     }
     emit_cnt++;
    
  3. 斜线的宽度随机生成,高度为x偏移量未屏幕的宽度。注意这里的坐标是以(particle.x, particle.y)(0, 0)的。2
     //オブジェクトの作成
     var particle = new createjs.Shape();
     ...
     //発生する場所をランダムで決定
     particle.x = ( lo_stage.canvas.width * 2 ) * ( Math.random() );
     particle.y = window_h;
     //画面に表示され続ける時間
     particle.delay = 60 * ( 1 - Math.random());
     //サイズをランダムで決定
     particle.size = base_size * (1.3-Math.random());
     //形を指定
     particle.graphics.f(particle.color)
         .lt(particle.size,0)
         .lt(window_h+particle.size,0-window_h)
         .lt(window_h,0-window_h)
         .lt(0,0);
    
  4. 斜线的动画有两段,前70个周期向左下移动,经过particle.delay个周期不动后,后70个周期向右下移动。
     //進行度カウントが100まで = 全体を表示するのにかける時間
     if(particle.life < 70){
         var now_progress = jQuery.easing.easeOutExpo(null, particle.life, 0, 1, 69);
         particle.x = particle.start_x - (window_h * now_progress);
         particle.y = window_h * now_progress;
     }
     if(particle.life >= particle.delay + 70){
         var lastlife = particle.life - particle.delay - 70;
         var now_progress = jQuery.easing.easeOutExpo(null, lastlife, 0, 1, 69);
         particle.x = ( particle.start_x - window_h ) - (window_h * now_progress);
         particle.y = window_h + ( window_h * now_progress);
     }
     // 表示時間+表示までにかかる時間+消えるまでにかかる時間の合計を越えたら寿命
     if (particle.life >= particle.delay + 140) {
         ...
     }
    

总结

环境判断

该网站使用了Modernizr,根据是否支持touchevents,来区别执行一些相关的函数。

需要注意的是,根据Modernizr的文档,支持touchevents的设备并不一定是移动设备,反之亦然。3

其他

  1. 这种需要加载很多资源才能显示效果的网站还是提供进度条,等待资源全部加载完时再显示比较友好
  2. 对于不支持某些动画效果的浏览器,需要做降级处理

参考链接

  1. 若对缓动有疑问,请参考这个网站 

  2. 可参考ShapeGraphics的文档 

  3. You Can’t Detect A Touchscreen