Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Feb 26, 2020. It is now read-only.

Commit 6e401ca

Browse files
committed
work in progress
1 parent 3957e0a commit 6e401ca

File tree

3 files changed

+179
-40
lines changed

3 files changed

+179
-40
lines changed

‎src/components/logo.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@
1414

1515
<template>
1616
<div class="logo">
17-
<div id="canvasLogo" style="border: solid 1px #cccccc;"></div>
17+
<div id="canvasLogo" style="border: solid 1px #cccccc;margin: 0auto;"></div>
1818
</div>
1919
</template>

‎src/helpers/logo.js

Lines changed: 174 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,76 @@
11
import 'pixi.js'
2-
import 'tween.js'
3-
/* globals PIXI,TWEEN */
2+
import {TweenMax,Power3,RoughEase,Linear}from'gsap'
3+
/* globals PIXI */
44

55
// Create class - needed something that was effected by vue
66
export default class VueBuildLogo {
77
constructor (height, width) {
88
this.height = height
99
this.width = width
1010
this.canvas = document.getElementById('canvasLogo')
11-
12-
var app = new PIXI.Application(height, width, {
11+
this.app = new PIXI.Application(height, width, {
1312
antialias: true,
1413
backgroundColor: 0xffffff
1514
})
16-
this.canvas.appendChild(app.view) // Add to div
15+
this.canvas.appendChild(this.app.view)
16+
this.all = new PIXI.Container() // Container for all v's
1717

1818
// Make a container to hold all v's
19-
var all = new PIXI.Container()
20-
app.stage.addChild(all) // Add to state
19+
this.app.stage.addChild(this.all) // Add to state
20+
21+
// Add v's to container
22+
for (var i = 0; i < 3; i++) {
23+
this.all.addChild(this.v())
24+
}
25+
26+
// Center and scale
27+
this.allCenter()
28+
29+
// Animate
30+
this.spreadOut(2)
31+
.then(() => {
32+
this.animate()
33+
setInterval(() => {
34+
this.animate()
35+
}, 3000)
36+
})
37+
}
38+
39+
allCenter () {
40+
// Set pivot location
41+
this.all.pivot.x = this.width / 2
42+
this.all.pivot.y = this.height / 2
2143

22-
// Add top and bottom v to container
44+
// Set x and y
45+
this.all.x = this.width / 2
46+
this.all.y = this.height / 2
47+
48+
// Scale to size - must be dont after setting pivot
49+
this.all.scale.set(0.3)
50+
}
51+
52+
// Create V container and center
53+
v (info = {}) {
2354
var v = new PIXI.Container()
2455
let vTop = this.vTop()
2556
let vBottom = this.vBottom()
2657
v.addChild(vTop)
2758
v.addChild(vBottom)
2859

29-
all.addChild(v)
60+
// Set pivot
61+
v.pivot.x = v.width / 2
62+
v.pivot.y = -115
63+
v.x += this.width / 2
64+
v.y += this.height / 2
3065

31-
// Set pivot location
32-
all.pivot.x = all.width / 2
33-
all.pivot.y = 0
34-
35-
// Scale to size - must be dont after settin pivot
36-
all.scale.set(0.4)
37-
38-
all.x = app.screen.width / 2
39-
all.y = app.screen.height / 2
40-
41-
setInterval(() => {
42-
this.animateVLock(v)
43-
}, 2000)
44-
45-
// Listen for animate update
46-
app.ticker.add(function (delta) {
47-
// rotate the container!
48-
// use delta to create frame-independent tranform
49-
all.rotation += 0.01 * delta
50-
})
66+
return v
5167
}
5268

69+
// Create top #35495E of V
5370
vTop () {
5471
var v = new PIXI.Graphics()
5572

56-
v.beginFill(parseInt('35495E', 16))// #35495E
73+
v.beginFill(parseInt('35495E', 16))
5774
v.moveTo(80, 0)
5875
v.lineTo(200, 205)
5976
v.lineTo(320, 0)
@@ -66,10 +83,11 @@ export default class VueBuildLogo {
6683
return v
6784
}
6885

86+
// Create bottom #41B883 of V
6987
vBottom () {
7088
var v = new PIXI.Graphics()
7189

72-
v.beginFill(parseInt('41B883', 16))// #41B883
90+
v.beginFill(parseInt('41B883', 16))
7391
v.moveTo(0, 0)
7492
v.lineTo(200, 345)
7593
v.lineTo(400, 0)
@@ -82,17 +100,134 @@ export default class VueBuildLogo {
82100
return v
83101
}
84102

85-
animateVLock (v) {
103+
// Animate is responsible for calling animations in order and timing
104+
animate () {
105+
this.spin(1)
106+
this.scaleOutAll(0.7)
107+
.then(() => {
108+
this.scaleInAll(0.3)
109+
})
110+
this.openV(0.7)
111+
.then(() => {
112+
this.closeV(0.3)
113+
.then(() => {
114+
this.shakeAll(0.3)
115+
})
116+
})
117+
}
118+
119+
// Animate v letters spreading out
120+
spreadOut (timing, delay = 0.5) {
121+
return new Promise((resolve, reject) => {
122+
// Rotate top left
123+
TweenMax.to(this.all.children[1], timing, {
124+
delay: 0.5,
125+
rotation: 120 * PIXI.DEG_TO_RAD,
126+
ease: Power3.easeInOut
127+
})
128+
129+
// Rotate top right
130+
TweenMax.to(this.all.children[2], timing, {
131+
delay: 0.5,
132+
rotation: 240 * PIXI.DEG_TO_RAD,
133+
ease: Power3.easeInOut,
134+
onComplete: function () {
135+
resolve()
136+
}
137+
})
138+
})
139+
}
140+
141+
// Animate a sweet spin
142+
spin (timing) {
143+
return new Promise((resolve, reject) => {
144+
// Rotate top left
145+
TweenMax.to(this.all, timing, {
146+
rotation: 2880 * PIXI.DEG_TO_RAD,
147+
ease: Power3.easeInOut,
148+
onComplete: () => {
149+
TweenMax.to(this.all, 0, {rotation: 0})
150+
resolve()
151+
}
152+
})
153+
})
154+
}
155+
156+
// Open all the V's
157+
openV (timing) {
158+
return new Promise((resolve, reject) => {
159+
// Open v and slam sh
160+
for (let v of this.all.children) {
161+
TweenMax.to(v.children[1], timing, {
162+
y: 100,
163+
onComplete: function () {
164+
resolve()
165+
}
166+
})
167+
}
168+
})
169+
}
170+
171+
// Close all V's
172+
closeV (timing) {
173+
return new Promise((resolve, reject) => {
174+
// Open v and slam sh
175+
for (let v of this.all.children) {
176+
TweenMax.to(v.children[1], timing, {
177+
y: 0,
178+
ease: Power3.easeIn,
179+
onComplete: function () {
180+
resolve()
181+
}
182+
})
183+
}
184+
})
185+
}
86186

187+
// Scale all container out as if its rising
188+
scaleOutAll (timing) {
189+
return new Promise((resolve, reject) => {
190+
// Open v and slam sh
191+
TweenMax.to(this.all.scale, timing, {
192+
x: 0.45,
193+
y: 0.45,
194+
// this.all.scale.set(0.4),
195+
ease: Power3.easeIn,
196+
onComplete: function () {
197+
resolve()
198+
}
199+
})
200+
})
87201
}
88202

89-
render () {
90-
this.v1Angle = (this.v1Angle + 1) % 360
91-
this.v1Context.translate(this.height / 2, this.width / 2)
92-
this.v1Context.rotate(this.v1Angle * Math.PI / 180)
93-
this.v(this.v1Context)
94-
// this.v1Context.drawImage(this.v(this.v1Context), 2, 2, 50, 50)
203+
scaleInAll (timing) {
204+
return new Promise((resolve, reject) => {
205+
// Open v and slam sh
206+
TweenMax.to(this.all.scale, timing, {
207+
x: 0.3,
208+
y: 0.3,
209+
// this.all.scale.set(0.4),
210+
ease: Power3.easeIn,
211+
onComplete: function () {
212+
resolve()
213+
}
214+
})
215+
})
216+
}
95217

96-
requestAnimationFrame(() => { this.render() })
218+
// Shake all container
219+
shakeAll (timing) {
220+
TweenMax.fromTo(this.all, timing,
221+
{ x: this.width / 2, y: this.height / 2 },
222+
{ x: '+=3',
223+
y: '+=3',
224+
ease: RoughEase.ease.config({
225+
strength: 8, points: 20, template: Linear.easeNone, randomize: false
226+
})
227+
}
228+
)
229+
230+
// Make sure you are back to center again
231+
TweenMax.to(this.all, 0, {delay: timing, x: this.width / 2, y: this.height / 2})
97232
}
98233
}

‎yarn.lock

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2785,6 +2785,10 @@ growl@1.9.2:
27852785
version "1.9.2"
27862786
resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
27872787

2788+
gsap@^1.19.1:
2789+
version "1.19.1"
2790+
resolved "https://registry.yarnpkg.com/gsap/-/gsap-1.19.1.tgz#480d320c662337c2663f836baf45e91ea024b553"
2791+
27882792
gzip-size@^3.0.0:
27892793
version "3.0.0"
27902794
resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /