Skip to content

Commit 7bd91cf

Browse files
jiyuujinjiyuujin
authored
Merge pull request #341 from vuejs-jp/enhance/brushup-animation
fix: アニメーションロジックを修正
2 parents 5f0b43f + f1f5e6a commit 7bd91cf

File tree

8 files changed

+46
-46
lines changed

8 files changed

+46
-46
lines changed

‎app/components/shapes/HeadCircle.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,20 +35,20 @@ export default defineComponent({
3535
3636
setup(props, setupContext) {
3737
const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
38-
const shape = ref()
38+
const refs = setupContext.refs
3939
4040
const KEY_FRAME = [0, 60]
4141
4242
const transform = transformPosition(props)
4343
4444
const createAnimations = () => {
4545
setTimeout(() => {
46-
createAnimation(shape.value, { r: KEY_FRAME[1] })
46+
createAnimation(refs.value, { r: KEY_FRAME[1] })
4747
}, 0)
4848
}
4949
5050
const fadeAnimations = () => {
51-
fadeAnimation(shape.value, { r: KEY_FRAME[0] })
51+
fadeAnimation(refs.value, { r: KEY_FRAME[0] })
5252
}
5353
5454
onMounted(() => {

‎app/components/shapes/HeadCross.vue

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,7 @@ export default defineComponent({
4949
5050
setup(props, setupContext) {
5151
const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
52-
const shape1 = ref()
53-
const shape2 = ref()
54-
const shape3 = ref()
55-
const shape4 = ref()
52+
const refs = setupContext.refs
5653
5754
const KEY_FRAME1 = ['0 -60 0 -60 0 -60', '-54 -60 54 -60 0 -6']
5855
const KEY_FRAME2 = ['-60 0 -60 0 -60 0', '-60 -54 -60 54 -6 0']
@@ -63,18 +60,18 @@ export default defineComponent({
6360
6461
const createAnimations = () => {
6562
setTimeout(() => {
66-
createAnimation(shape1.value, { points: KEY_FRAME1[1] })
67-
createAnimation(shape2.value, { points: KEY_FRAME2[1] })
68-
createAnimation(shape3.value, { points: KEY_FRAME3[1] })
69-
createAnimation(shape4.value, { points: KEY_FRAME4[1] })
63+
createAnimation(refs.shape1, { points: KEY_FRAME1[1] })
64+
createAnimation(refs.shape2, { points: KEY_FRAME2[1] })
65+
createAnimation(refs.shape3, { points: KEY_FRAME3[1] })
66+
createAnimation(refs.shape4, { points: KEY_FRAME4[1] })
7067
}, 0)
7168
}
7269
7370
const fadeAnimations = () => {
74-
fadeAnimation(shape1.value, { points:KEY_FRAME1[0] })
75-
fadeAnimation(shape2.value, { points:KEY_FRAME2[0] })
76-
fadeAnimation(shape3.value, { points:KEY_FRAME3[0] })
77-
fadeAnimation(shape4.value, { points:KEY_FRAME4[0] })
71+
fadeAnimation(refs.shape1, { points:KEY_FRAME1[0] })
72+
fadeAnimation(refs.shape2, { points:KEY_FRAME2[0] })
73+
fadeAnimation(refs.shape3, { points:KEY_FRAME3[0] })
74+
fadeAnimation(refs.shape4, { points:KEY_FRAME4[0] })
7875
}
7976
8077
onMounted(() => {

‎app/components/shapes/HeadHorizontal.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,22 +44,21 @@ export default defineComponent({
4444
},
4545
setup(props, setupContext) {
4646
const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
47-
const shape1 = ref()
48-
const shape2 = ref()
47+
const refs = setupContext.refs
4948
5049
const transform = transformPosition(props)
5150
5251
5352
const createAnimations = () => {
5453
setTimeout(() => {
55-
createAnimation(shape1.value, { height: 55 })
56-
createAnimation(shape2.value, { y: 5, height: 55 })
54+
createAnimation(refs.shape1, { height: 55 })
55+
createAnimation(refs.shape2, { y: 5, height: 55 })
5756
}, 0)
5857
}
5958
6059
const fadeAnimations = () => {
61-
fadeAnimation(shape1.value, { y: -60, height: 0 })
62-
fadeAnimation(shape2.value, { y: 60, height: 0 })
60+
fadeAnimation(refs.shape1, { y: -60, height: 0 })
61+
fadeAnimation(refs.shape2, { y: 60, height: 0 })
6362
}
6463
6564
onMounted(() => {

‎app/components/shapes/HeadPhoto.vue

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@
1414
cx="0"
1515
cy="0"
1616
r="0"
17-
:clip-path="`url(${urlBasePath}#clip-boundary)`"
17+
clip-path="url(#clip-boundary)"
1818
/>
1919
</clipPath>
2020
<image
2121
key="1"
22-
:href="`${urlBasePath}/${imageSrc}`"
22+
:href="imageSrc"
2323
x="-60"
2424
y="-60"
2525
width="120"
2626
height="120"
27-
:clip-path="`url(${urlBasePath}#${CLIP_ID})`"
27+
:clip-path="`url(#${CLIP_ID})`"
2828
/>
2929
</g>
3030
</template>
@@ -33,12 +33,12 @@ import { urlBasePath } from '~/utils/constants'
3333
import type { CustomPropType } from '~/types/shims-vue'
3434
import { useAnimationParts } from '~/composables/useAnimationParts'
3535
36-
import Image01 from '!url-loader!~/assets/img/animation/image01.png'
37-
import Image02 from '!url-loader!~/assets/img/animation/image02.png'
38-
import Image03 from '!url-loader!~/assets/img/animation/image03.png'
39-
import Image04 from '!url-loader!~/assets/img/animation/image04.png'
40-
import Image05 from '!url-loader!~/assets/img/animation/image05.png'
41-
import Image06 from '!url-loader!~/assets/img/animation/image06.png'
36+
import Image01 from '~/assets/img/animation/image01.png'
37+
import Image02 from '~/assets/img/animation/image02.png'
38+
import Image03 from '~/assets/img/animation/image03.png'
39+
import Image04 from '~/assets/img/animation/image04.png'
40+
import Image05 from '~/assets/img/animation/image05.png'
41+
import Image06 from '~/assets/img/animation/image06.png'
4242
4343
interface IPropParts {
4444
type: string
@@ -69,12 +69,12 @@ export default defineComponent({
6969
7070
const imageSrc = computed(() => {
7171
const images = {
72-
'image01.png': Image01,
73-
'image02.png': Image02,
74-
'image03.png': Image03,
75-
'image04.png': Image04,
76-
'image05.png': Image05,
77-
'image06.png': Image06,
72+
'image01.png': Image01.default || Image01,
73+
'image02.png': Image02.default || Image02,
74+
'image03.png': Image03.default || Image03,
75+
'image04.png': Image04.default || Image04,
76+
'image05.png': Image05.default || Image05,
77+
'image06.png': Image06.default || Image06,
7878
}
7979
return images[props.parts.src]
8080
})

‎app/components/shapes/HeadSlash.vue

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ export default defineComponent({
3939
4040
setup(props, setupContext) {
4141
const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
42-
const shape1 = ref()
43-
const shape2 = ref()
42+
const refs = setupContext.refs
4443
4544
const KEY_FRAME1 = ['-60 -60 -60 -60 -60 -60', '-60 -60 54 -60 -60 54']
4645
const KEY_FRAME2 = ['60 60 60 60 60 60', '60 60 -54 60 60 -54']
@@ -59,14 +58,14 @@ export default defineComponent({
5958
6059
const createAnimations = () => {
6160
setTimeout(() => {
62-
createAnimation(shape1.value, { points: KEY_FRAME1[1] })
63-
createAnimation(shape2.value, { points: KEY_FRAME2[1] })
61+
createAnimation(refs.shape1, { points: KEY_FRAME1[1] })
62+
createAnimation(refs.shape2, { points: KEY_FRAME2[1] })
6463
}, 0)
6564
}
6665
6766
const fadeAnimations = () => {
68-
fadeAnimation(shape1.value, { points: KEY_FRAME1[0] })
69-
fadeAnimation(shape2.value, { points: KEY_FRAME2[0] })
67+
fadeAnimation(refs.shape1, { points: KEY_FRAME1[0] })
68+
fadeAnimation(refs.shape2, { points: KEY_FRAME2[0] })
7069
}
7170
7271
onMounted(() => {

‎app/components/shapes/HeadTriangle.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,20 +33,20 @@ export default defineComponent({
3333
3434
setup(props, setupContext) {
3535
const { createAnimation, fadeAnimation, transformPosition } = useAnimationParts()
36-
const shape = ref()
36+
const refs = setupContext.refs
3737
3838
const KEY_FRAME = ['60 60 60 60 60 60', '60 60 -52 60 60 -52']
3939
4040
const transform = transformPosition(props)
4141
4242
const createAnimations = () => {
4343
setTimeout(() => {
44-
createAnimation(shape.value, { points: KEY_FRAME[1] })
44+
createAnimation(refs.shape, { points: KEY_FRAME[1] })
4545
}, 0)
4646
}
4747
4848
const fadeAnimations = () => {
49-
fadeAnimation(shape.value, { points: KEY_FRAME[0] })
49+
fadeAnimation(refs.shape, { points: KEY_FRAME[0] })
5050
}
5151
5252
onMounted(() => {

‎app/utils/feature.constants.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export const SHOW_ANIMATION = false
1+
export const SHOW_ANIMATION = true
22
export const SHOW_TICKET = true
33
export const SHOW_TEAM = true
44
export const SHOW_SPEAKER_LIST = true

‎nuxt.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,5 +60,10 @@ export default defineNuxtConfig({
6060
},
6161
build: {
6262
extractCSS: true,
63+
loaders: {
64+
imgUrl: {
65+
esModule: false,
66+
},
67+
},
6368
},
6469
})

0 commit comments

Comments
 (0)