88 < script src ="../polyfill-loader.js "> </ script >
99</ head >
1010< body >
11- < div id ="target "> </ div >
12- < div id ="visual-parent "> </ div >
13- < script src ="main.js "> </ script >
11+ < div id ="target "> </ div >
12+ < div id ="visual-parent "> </ div >
13+ < script >
14+
15+ var target = document . querySelector ( '#target' ) ;
16+ var visualParent = document . querySelector ( '#visual-parent' ) ;
17+
18+ target . addEventListener ( 'touchstart' , function ( e ) {
19+ e . preventDefault ( ) ;
20+ target . textContent = e . touches . length ;
21+ if ( e . touches . length == e . changedTouches . length ) {
22+ onFirstTouchStart ( e ) ;
23+ }
24+ } ) ;
25+
26+ target . addEventListener ( 'touchmove' , function ( e ) {
27+ onTouchMove ( e ) ;
28+ } ) ;
29+
30+ target . addEventListener ( 'touchend' , function ( e ) {
31+ onTouchEnd ( e ) ;
32+ if ( e . touches . length == 0 ) {
33+ target . textContent = '' ;
34+ } else {
35+ target . textContent = e . touches . length ;
36+ }
37+ } ) ;
38+
39+ var fadeTime = 125 ; // ms
40+ var visible = [ { opacity : 1 } , { opacity : 1 } ] ;
41+ var fadeIn = [ { opacity : 0 } , { opacity : 1 } ] ;
42+ var fadeOut = [ { opacity : 1 } , { opacity : 0 } ] ;
43+
44+ var playbackRate = 0.5 ;
45+
46+ var touchStart ;
47+ var visuals ;
48+ var recordedTouches ;
49+ var groups ;
50+ var player ;
51+
52+ function onFirstTouchStart ( e ) {
53+ touchStart = e . timeStamp ;
54+ recordedTouches = { } ;
55+ player && player . cancel ( ) ;
56+ visualParent . textContent = '' ; // clear visuals
57+ visuals = [ ] ;
58+ groups = [ ] ;
59+ onTouchMove ( e ) ;
60+ }
61+
62+ function onTouchMove ( e ) {
63+ for ( var i = 0 ; i < e . changedTouches . length ; i ++ ) {
64+ var touch = e . changedTouches [ i ] ;
65+ if ( ! recordedTouches [ touch . identifier ] ) {
66+ var start = e . timeStamp - touchStart ;
67+ recordedTouches [ touch . identifier ] = [ ] ;
68+ }
69+ recordedTouches [ touch . identifier ] . push ( {
70+ x : touch . clientX ,
71+ y : touch . clientY ,
72+ time : e . timeStamp - touchStart ,
73+ } ) ;
74+ }
75+ }
76+
77+ function onTouchEnd ( e ) {
78+ for ( var i = 0 ; i < e . changedTouches . length ; i ++ ) {
79+ var id = e . changedTouches [ i ] . identifier ;
80+ if ( ! recordedTouches [ id ] || recordedTouches [ id ] . length <= 1 ) {
81+ continue ;
82+ }
83+ var startTime = recordedTouches [ id ] [ 0 ] . time ;
84+ var duration =
85+ ( recordedTouches [ id ] [ recordedTouches [ id ] . length - 1 ] . time - startTime ) ;
86+ var endTime = startTime + duration ;
87+ var frames = recordedTouches [ id ] . map ( function ( touch ) {
88+ return {
89+ transform : 'translateZ(0) translate(' + touch . x + 'px, ' + touch . y + 'px)' ,
90+ offset : ( touch . time - startTime ) / duration ,
91+ } ;
92+ } ) ;
93+ recordedTouches [ id ] = null ;
94+
95+ var visual ;
96+ for ( var i = 0 ; i < visuals . length ; i ++ ) {
97+ if ( visuals [ i ] . endTime < startTime ) {
98+ visual = visuals [ i ] ;
99+ break ;
100+ }
101+ }
102+ if ( ! visual ) {
103+ visual = document . createElement ( 'div' ) ;
104+ visual . endTime = endTime ;
105+ visual . classList . add ( 'visual' ) ;
106+ visuals . push ( visual ) ;
107+ visualParent . appendChild ( visual ) ;
108+ }
109+
110+ groups . push ( new GroupEffect ( [
111+ new KeyframeEffect ( visual , visible , { duration : duration } ) ,
112+ new KeyframeEffect ( visual , fadeIn , { duration : fadeTime } ) ,
113+ new KeyframeEffect ( visual , fadeOut , { duration : fadeTime , delay : duration - fadeTime } ) ,
114+ new KeyframeEffect ( visual , frames , { duration : duration } ) ,
115+ ] , { duration : duration , delay : startTime } ) ) ;
116+ }
117+ if ( e . touches . length == 0 ) {
118+ player = document . timeline . play ( new GroupEffect ( groups , { } ) ) ;
119+ player . playbackRate = playbackRate ;
120+ player . onfinish = function ( ) {
121+ player . reverse ( ) ;
122+ } ;
123+ }
124+ } ;
125+
126+ </ script >
14127</ body >
15128</ html >
0 commit comments