网页学习——DJMAX RESPECT
目前(2019/02/18)官网早已进行了更新,网站中不再有本文所重点介绍的背景特效了。目前网站主页的逻辑主要是写在home.js中,引用的库并没有变。我把原来的teaser.js
备份在这里了,下次会记得保存效果图的。
前不久(2017/07/28),DJMAX RESPECT发售。查找资料时发现它在日本的宣传网站看起来简单而酷炫,因此决定研究一下其效果是如何实现的。
动效实现
实现
查看引用的js,可以看到网站使用了jQuery Scrollify这个滑动动画的库,CreateJS,Velocity.js这两个动画库,以及Ease+ for Velocity.js,jQuery easing这两个缓动(easing)库。1
其中,Velocity.js
采用了和jQuery
中animate()相同的API,在性能优化的同时还加入了循环、滚动、变换等效果。
Ease+ for Velocity.js
借鉴TweenJS(CreateJS)
,实现了Velocity.js
未实现的Back, Elastic, Bounce这三个缓动效果。
页面的逻辑都写在teaser.js里。
通过代码可以看出:
- 加载的进度条是根据
PreloadJS(CreateJS)
实现的 - 中间旋转的logo是使用了gif图片
- 背景使用
CreateJS
做了两个定时动画 - 中间的三行文字用的是背景图,文字的滑动通过
Velocity.js
实现 - 滚动的效果是利用
jQuery Scrollify
实现的 - 其他小动效都是使用
Velocity.js
实现的
分析
值得仔细说的是背景的动效,好在注释写的很清楚(虽然有点问题),看起来轻松不少。
网站的背景色为#fcf0b0
,同时维护了两个canvas作为容器(Stage),执行了相同的白色斜线(particle)滑动的效果。两个canvas的z-index
分别为1,3,透明度为0.5,而中间文字的z-index
为2,借此实现立体的效果。旋转logo的z-index
为4。
粒子滑动实现的主要思想是借助CreateJS
提供的Ticker定时,在每个周期中生成斜线、设定斜线的动画,删除斜线。
- 定时使用的是requestAnimationFrame的频率。
createjs.Ticker.addEventListener("tick", particle_tick); createjs.Ticker.timingMode = createjs.Ticker.RAF;
- 前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++;
- 斜线的宽度随机生成,高度为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);
- 斜线的动画有两段,前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
其他
- 这种需要加载很多资源才能显示效果的网站还是提供进度条,等待资源全部加载完时再显示比较友好
- 对于不支持某些动画效果的浏览器,需要做降级处理