@@ -9,6 +9,7 @@ export default class VueBuildIntro {
99 this . width = window . innerWidth
1010 this . primaryColor = parseInt ( '41B883' , 16 ) // #41B883
1111 this . secondaryColor = parseInt ( '35495E' , 16 ) // #35495E
12+ this . whiteColor = parseInt ( 'ffffff' , 16 ) // #ffffff
1213 this . canvas = document . getElementById ( 'canvasIntro' )
1314 this . app = new PIXI . Application ( this . height , this . width , {
1415 antialias : true ,
@@ -119,6 +120,22 @@ export default class VueBuildIntro {
119120 return v
120121 }
121122
123+ zoomLine ( color = this . primaryColor ) {
124+ // Create trailing zoom left
125+ var rect = new PIXI . Graphics ( )
126+ rect . beginFill ( color , 1 )
127+ rect . drawRect ( 0 , 0 , 1 , 2 )
128+ rect . endFill ( )
129+ this . app . stage . addChildAt ( rect , this . app . stage . length - 1 )
130+ 131+ rect . pivot . x = rect . width / 2
132+ rect . pivot . y = 0
133+ rect . x = this . width / 2
134+ rect . y = 0
135+ 136+ return rect
137+ }
138+ 122139 // Animate is responsible for calling animations in order and timing
123140 animate ( ) {
124141 // Zoom v in
@@ -130,13 +147,13 @@ export default class VueBuildIntro {
130147 return this . spreadOut ( 0.5 , 1 )
131148 } )
132149 . then ( ( ) => {
133- this . spin ( 1 )
134- this . scaleOutAll ( 0.7 )
150+ this . spin ( 1.3 )
151+ this . scaleOutAll ( 1 )
135152 . then ( ( ) => {
136153 return this . scaleInAll ( 0.3 )
137154 } )
138155
139- return this . openV ( 0.7 )
156+ return this . openV ( 1 )
140157 . then ( ( ) => {
141158 return this . closeV ( 0.3 )
142159 . then ( ( ) => {
@@ -145,10 +162,13 @@ export default class VueBuildIntro {
145162 } )
146163 } )
147164 } )
165+ . then ( ( ) => {
166+ this . slideAllUp ( )
167+ } )
148168 }
149169
150170 // Take all container and zoom into positionY
151- // Also create
171+ // Also create zoom line for spread animation
152172 zoomIn ( timing = 0.75 ) {
153173 return new Promise ( ( resolve , reject ) => {
154174 TweenMax . fromTo ( this . all , timing ,
@@ -160,37 +180,24 @@ export default class VueBuildIntro {
160180 }
161181 } )
162182
163- // Create trailing zoom
164- var rect = new PIXI . Graphics ( )
165- rect . beginFill ( this . primaryColor , 1 )
166- rect . drawRect ( 0 , 0 , 1 , 2 )
167- rect . endFill ( )
168- this . app . stage . addChild ( rect )
169- 170- rect . pivot . x = rect . width / 2
171- rect . pivot . y = 0
172- rect . x = this . width / 2
173- rect . y = 0
174- 175- TweenMax . to ( rect , timing ,
176- {
177- delay : 0.1 ,
178- height : this . height ,
179- ease : Power4 . easeOut ,
180- onComplete : ( ) => {
181- TweenMax . to ( rect , 0.3 , {
182- alpha : 0 ,
183- width : this . width ,
184- ease : Power4 . easeIn ,
185- onComplete : ( ) => {
186- setTimeout ( ( ) => {
187- rect . destroy ( )
188- } , 1000 )
189- }
190- } )
191- }
192- }
193- )
183+ // Create trailing zoom left
184+ var rectWhite = this . zoomLine ( this . whiteColor )
185+ var rectGreen = this . zoomLine ( )
186+ 187+ TweenMax . to ( rectGreen , timing , { height : this . height , ease : Power4 . easeOut , onComplete : ( ) => { this . lineSpread ( rectGreen ) } } )
188+ TweenMax . to ( rectWhite , timing / 2 , { delay : 0.5 , height : this . height , ease : Power4 . easeOut , onComplete : ( ) => { this . lineSpread ( rectWhite ) } } )
189+ } )
190+ }
191+ 192+ lineSpread ( rect ) {
193+ TweenMax . to ( rect , 0.3 , {
194+ width : this . width ,
195+ ease : Power4 . easeIn ,
196+ onComplete : ( ) => {
197+ setTimeout ( ( ) => {
198+ rect . destroy ( )
199+ } , 1000 )
200+ }
194201 } )
195202 }
196203
@@ -250,14 +257,15 @@ export default class VueBuildIntro {
250257 alpha : 0.1 ,
251258 x : toX ,
252259 y : toY ,
260+ rotation : this . getRandomNum ( 0 , 360 ) * PIXI . DEG_TO_RAD ,
253261 onComplete : ( ) => {
254- // vMini.destroy()
255- TweenMax . to ( vMini , 1 , {
262+ TweenMax . to ( vMini , 30 , {
256263 alpha : 0 ,
257264 x : this . getRandomNum ( toX - 150 , toX + 150 ) ,
258- y : this . height ,
265+ y : this . getRandomNum ( toY - 150 , toY + 150 ) ,
266+ rotation : this . getRandomNum ( 0 , 360 ) * PIXI . DEG_TO_RAD ,
259267 onComplete : ( ) => {
260- 268+ vMini . destroy ( )
261269 }
262270 } )
263271 }
@@ -383,6 +391,16 @@ export default class VueBuildIntro {
383391 TweenMax . to ( this . all , 0 , { delay : timing , x : this . all . positionX , y : this . all . positionY } )
384392 }
385393
394+ slideAllUp ( timing = 2 , delay = 0.5 ) {
395+ return new Promise ( ( resolve , reject ) => {
396+ TweenMax . to ( this . all , timing , {
397+ delay : delay ,
398+ y : 200 ,
399+ ease : Power3 . easeInOut
400+ } )
401+ } )
402+ }
403+ 386404 getRandomNum ( min , max ) {
387405 return Math . random ( ) * ( max - min ) + min
388406 }
0 commit comments