Hai, jumpa lagi dengan saya 🙂 apa kabar nya ? semoga baik yah, amin.
Masih mengenai animasi pada artikel kali ini akan menjelaskan bagaimana Membuat Animasi Komputer Dengan SVG, Nah nantinya akan ada animasi berupa sekumpulan perangkat komputer berupa icon, bagaimana cara membuat nya, langsung aja simak langkah nya berikut ini.
1. Buka teks editor nya terlebih dahulu, kemudian ketikan kode berikut.
<div class="container">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
<clipPath id="monitorEdgeMask">
<path class="monitorEdgeMask" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>
</clipPath>
<clipPath id="laptopBaseMask">
<path class="laptopBaseMask" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>
</clipPath>
<clipPath id="monitorStandMask">
<rect class="monitorStandMask" x="23" y="455" fill="#EA2877" width="550" height="102"/>
</clipPath>
<clipPath id="tabletContentGroupMask">
<path class="tabletContentGroupMask" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
C220.8,391.5,218.5,389.3,218.5,386.5z"/>
</clipPath>
</defs>
<g class="monitorGroup" opacity="1">
<g class="monitorStandGroup" clip-path="url(#monitorStandMask)">
<path class="monitorStand" fill="#FFFAEB" d="M386.3,512H374l-20.7-57h-106L226,512h-12.3c-2.6,0-4.7,1.9-4.7,4.5s2.1,4.5,4.7,4.5
h172.7c2.6,0,4.7-1.9,4.7-4.5S388.9,512,386.3,512z"/>
</g>
<polygon class="monitorStandShadow" fill="#D9D7D3" points="357.4,467 242.6,467 247.1,455 353.1,455 "/>
<g class="monitorEdgeGroup" clip-path="url(#monitorEdgeMask)">
<path class="monitorEdge" fill="#494D5D" d="M559.7,79h-520C32.5,79,27,84.6,27,91.8V403h546V91.8C573,84.6,566.9,79,559.7,79z"/>
<path class="monitorScreen" fill="#BDCCD4" d="M544.5,383.3h-489c-3.8,0-7-3.1-7-7v-271c0-3.8,3.2-7,7-7h489c3.8,0,7,3.2,7,7v271
C551.5,380.1,548.3,383.3,544.5,383.3z"/>
<g class="monitorContentGroup" opacity="0.6">
<path fill="#E5EBEE" d="M526.8,145H73.2c-3.2,0-5.7-2.6-5.7-5.7v-15.5c0-3.2,2.6-5.7,5.7-5.7h453.5c3.2,0,5.7,2.6,5.7,5.7v15.5
C532.5,142.4,529.9,145,526.8,145z"/>
<path fill="#8CA5B2" d="M157.9,364.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-58.7c0-3.1,2.5-5.6,5.6-5.6h84.7c3.1,0,5.6,2.5,5.6,5.6v58.7
C163.5,362,161,364.5,157.9,364.5z"/>
<path fill="#8CA5B2" d="M526.9,272.5H73.1c-3.1,0-5.6-2.5-5.6-5.6v-93.7c0-3.1,2.5-5.6,5.6-5.6h453.7c3.1,0,5.6,2.5,5.6,5.6v93.7
C532.5,270,530,272.5,526.9,272.5z"/>
<path fill="#E5EBEE" d="M530.5,306H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
C532.5,305.1,531.6,306,530.5,306z"/>
<path fill="#E5EBEE" d="M530.5,334.3H190.2c-1.1,0-2-0.9-2-2v-7.5c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
C532.5,333.4,531.6,334.3,530.5,334.3z"/>
<path fill="#E5EBEE" d="M530.5,364.5H190.2c-1.1,0-2-0.9-2-2V355c0-1.1,0.9-2,2-2h340.3c1.1,0,2,0.9,2,2v7.5
C532.5,363.6,531.6,364.5,530.5,364.5z"/>
</g>
</g>
<path class="monitorBottom" fill="#FFFAEB" d="M573,403v39c0,7.1-6.1,13-13.3,13h-520c-7.2,0-12.7-5.9-12.7-13v-39H573z"/>
<circle class="monitorLogo" fill="#A4ACBB" cx="300" cy="426" r="10"/>
</g>
<g class="laptopGroup" opacity="1">
<!--path class="laptopEdge" fill="#FFFAEB" d="M468.5,175.5v226h-337v-226c0-3.9,3.2-7,7-7h323C465.3,168.5,468.5,171.6,468.5,175.5z"
/-->
<path class="laptopEdgeLeft" fill="#FFFAEB" d="M310,401.5H131.5v-226c0-3.9,3.2-7,7-7H310"/>
<path class="laptopEdgeRight" fill="#FFFAEB" d="M290,168.5h171.5c3.8,0,7,3.1,7,7v226H290"/>
<g class="laptopBaseGroup" clip-path="url(#laptopBaseMask)">
<path class="laptopBase" fill="#FFFAEB" d="M487,409v15.5c0,3.8-3.2,7.5-7,7.5H120c-3.8,0-7-3.7-7-7.5V409H487z"/>
</g>
<polygon class="laptopTrackpad" fill="#A4ACBB" points="326.7,421.8 273.3,421.8 268.3,414.2 331.7,414.2 "/>
<path class="laptopScreen" fill="#BDCCD4" d="M452.7,391.9H147.3c-3.8,0-7-3.1-7-7V185.6c0-3.8,3.2-7,7-7h305.3c3.9,0,7,3.2,7,7
v199.3C459.7,388.8,456.5,391.9,452.7,391.9z"/>
<g class="laptopContentGroup" opacity="0.6">
<path fill="#E5EBEE" d="M437.8,212.3H164.1c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h273.7c1.9,0,3.5,1.6,3.5,3.5v9.4
C441.2,210.7,439.7,212.3,437.8,212.3z"/>
<path fill="#8CA5B2" d="M215.1,363.8H164c-1.9,0-3.4-1.5-3.4-3.4V325c0-1.9,1.5-3.4,3.4-3.4h51.1c1.9,0,3.4,1.5,3.4,3.4v35.4
C218.5,362.3,217,363.8,215.1,363.8z"/>
<path fill="#8CA5B2" d="M437.8,307.3H164c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h273.8c1.9,0,3.4,1.5,3.4,3.4v74.6
C441.2,305.8,439.7,307.3,437.8,307.3z"/>
<path fill="#E5EBEE" d="M440,328.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
C441.2,327.9,440.7,328.5,440,328.5z"/>
<path fill="#E5EBEE" d="M440,345.5H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
C441.2,345,440.7,345.5,440,345.5z"/>
<path fill="#E5EBEE" d="M440,363.8H234.6c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2H440c0.7,0,1.2,0.5,1.2,1.2v4.5
C441.2,363.3,440.7,363.8,440,363.8z"/>
</g>
</g>
<g class="phoneGroup" opacity="0">
<path class="phoneEdge" fill="#FFFAEB" d="M255.2,371.4V198.6c0-3.2,2.7-5.9,5.9-5.9h77.9c3.2,0,5.9,2.7,5.9,5.9v172.9
c0,3.2-2.7,5.9-5.9,5.9h-77.9C257.8,377.3,255.2,374.7,255.2,371.4z"/>
<circle class="phoneButton" fill="#9AA3B2" cx="300" cy="363.1" r="6"/>
<circle class="phoneCamera" fill="#A4ACBB" cx="284.3" cy="203.6" r="1.5"/>
<rect class="phoneScreen" x="262.1" y="214.3" fill="#BDCCD4" width="75.7" height="135.3"/>
<line class="phoneSpeaker" fill="none" stroke="#9AA3B2" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="292.5" y1="203" x2="307.5" y2="203"/>
<g class="phoneContentGroup" opacity="0.6">
<path fill="#E5EBEE" d="M327.8,235.6h-55.3c-1,0-1.9-0.9-1.9-1.9v-7.3c0-1,0.9-1.9,1.9-1.9h55.3c1,0,1.9,0.9,1.9,1.9v7.3
C329.7,234.8,328.8,235.6,327.8,235.6z"/>
<path fill="#8CA5B2" d="M294.3,338.7h-21.9c-1,0-1.9-0.8-1.9-1.9v-25c0-1,0.8-1.9,1.9-1.9h21.9c1,0,1.9,0.8,1.9,1.9v25
C296.2,337.8,295.3,338.7,294.3,338.7z"/>
<path fill="#8CA5B2" d="M327.8,300.3h-55.4c-1,0-1.9-0.8-1.9-1.9v-51.7c0-1,0.8-1.9,1.9-1.9h55.4c1,0,1.9,0.8,1.9,1.9v51.7
C329.7,299.4,328.8,300.3,327.8,300.3z"/>
<path fill="#E5EBEE" d="M329,314.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
C329.7,314.4,329.4,314.7,329,314.7z"/>
<path fill="#E5EBEE" d="M329,338.7h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
C329.7,338.4,329.4,338.7,329,338.7z"/>
<path fill="#E5EBEE" d="M329,326.3h-25.6c-0.4,0-0.7-0.3-0.7-0.7v-3.4c0-0.4,0.3-0.7,0.7-0.7H329c0.4,0,0.7,0.3,0.7,0.7v3.4
C329.7,326,329.4,326.3,329,326.3z"/>
</g>
</g>
<g class="tabletGroup" opacity="1">
<path class="tabletEdge" fill="#FFFAEB" d="M198.5,404.5v-239c0-7.7,6.3-14,14-14h175c7.7,0,14,6.3,14,14v239c0,7.7-6.3,14-14,14
h-175C204.8,418.5,198.5,412.2,198.5,404.5z"/>
<path class="tabletScreen" fill="#BDCCD4" d="M218.5,386.5v-203c0-2.8,2.3-5,5-5h153c2.8,0,5,2.3,5,5v203c0,2.8-2.3,5-5,5h-153
C220.8,391.5,218.5,389.3,218.5,386.5z"/>
<circle class="tabletButton" fill="#A4ACBB" cx="300" cy="406" r="6"/>
<circle class="tabletCamera" fill="#A4ACBB" cx="300" cy="168" r="2"/>
<g class="maskedTabletContentGroup" clip-path="url(#tabletContentGroupMask)">
<g class="tabletContentGroup" opacity="0.6" >
<path fill="#E5EBEE" d="M363.6,217.4H236.9c-1.9,0-3.5-1.6-3.5-3.5v-9.4c0-1.9,1.6-3.5,3.5-3.5h126.7c1.9,0,3.5,1.6,3.5,3.5v9.4
C367,215.8,365.5,217.4,363.6,217.4z"/>
<path fill="#8CA5B2" d="M288,368.9h-51.1c-1.9,0-3.4-1.5-3.4-3.4v-35.4c0-1.9,1.5-3.4,3.4-3.4H288c1.9,0,3.4,1.5,3.4,3.4v35.4
C291.4,367.4,289.8,368.9,288,368.9z"/>
<path fill="#8CA5B2" d="M363.6,312.4H236.8c-1.9,0-3.4-1.5-3.4-3.4v-74.6c0-1.9,1.5-3.4,3.4-3.4h126.8c1.9,0,3.4,1.5,3.4,3.4V309
C367,310.9,365.5,312.4,363.6,312.4z"/>
<path fill="#E5EBEE" d="M365.8,333.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
C367,333.1,366.5,333.6,365.8,333.6z"/>
<path fill="#E5EBEE" d="M365.8,368.9h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
C367,368.4,366.5,368.9,365.8,368.9z"/>
<path fill="#E5EBEE" d="M365.8,350.6h-58.4c-0.7,0-1.2-0.5-1.2-1.2v-4.5c0-0.7,0.5-1.2,1.2-1.2h58.4c0.7,0,1.2,0.5,1.2,1.2v4.5
C367,350.1,366.5,350.6,365.8,350.6z"/>
</g>
</g>
</g>
</svg>
</div>
2. Setelah itu lanjutkan untuk kode CSS berikut ini.
body{
background-color:#7E82AB;
overflow:hidden;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
max-width:600px;
height:600px;
}
svg{
max-width:100%;
visibility:hidden;
}
3. Kalo sudah, ketikan lagi kode javascript berikut.
var xmlns="http://www.w3.org/2000/svg", select = function(s) {
return document.querySelector(s);
}, selectAll = function(s) {
return document.querySelectorAll(s);
}, container = select('.container'),
monitorContent = selectAll('.monitorContentGroup path'),
monitorGroup = select('.monitorGroup'),
monitorScreen = select('.monitorScreen'),
monitorLogo = select('.monitorLogo'),
monitorStand = select('.monitorStand'),
monitorStandShadow = select('.monitorStandShadow'),
monitorBottom = select('.monitorBottom'), monitorEdge = select('.monitorEdge'),
laptopContent = selectAll('.laptopContentGroup path'),
laptopContentGroup = select('.laptopContentGroup'),
laptopGroup = select('.laptopGroup'), laptopScreen = select('.laptopScreen'), laptopEdgeLeft = select('.laptopEdgeLeft'), laptopEdgeRight = select('.laptopEdgeRight'), laptopTrackpad = select('.laptopTrackpad'), laptopBase = select('.laptopBase'),
tabletContent = selectAll('.tabletContentGroup path'),
tabletContentGroup = select('.tabletContentGroup'), tabletGroup = select('.tabletGroup'), tabletButton = select('.tabletButton'), tabletCamera = select('.tabletCamera'), tabletScreen = select('.tabletScreen'),
phoneGroup = select('.phoneGroup'),phoneButton = select('.phoneButton'),phoneCamera = select('.phoneCamera'),phoneSpeaker = select('.phoneSpeaker')
//center the container cos it's pretty an' that
TweenMax.set(container, {
position:'absolute',
top:'50%',
left:'50%',
xPercent:-50,
yPercent:-50
})
TweenMax.set([ monitorBottom], {
transformOrigin:'50% 100%'
})
TweenMax.set([monitorStand, laptopBase,tabletScreen], {
transformOrigin:'50% 0%'
})
TweenMax.set([monitorLogo,monitorScreen, laptopScreen, laptopTrackpad, tabletGroup, laptopGroup, tabletButton, tabletCamera, tabletContentGroup,phoneButton, phoneCamera,phoneSpeaker, laptopContentGroup,phoneGroup], {
transformOrigin:'50% 50%'
})
TweenMax.set([ laptopEdgeLeft,laptopEdgeRight ], {
transformOrigin:'0% 100%'
})
TweenMax.set(tabletGroup, {
rotation:-90
})
var tl = new TimelineMax({repeat:-1, delay:1, yoyo:false,paused:false});
tl.timeScale(3)
tl.from(monitorBottom,1, {
scaleY:0,
ease:Power1.easeOut
})
.from(monitorStand, 1, {
y:-70,
ease:Power1.easeOut
}, '-=1')
.from(monitorStandShadow, 0.5, {
alpha:0,
ease:Power1.easeIn
},'-=0.5')
.from(monitorEdge, 1, {
y:330
},'-=0.25')
.from(monitorScreen, 2, {
y:330,
ease:Power1.easeOut
},'-=1')
.staggerFrom(monitorContent, 1, {
scaleX:0
},0.1,'-=0.51')
.from(monitorLogo, 1, {
scale:0,
ease:Back.easeOut.config(2)
})
.staggerTo(monitorContent, 1, {
alpha:0,
delay:2
}, 0.1)
.to(monitorScreen, 1, {
y:330,
ease:Power1.easeIn
},'-=1')
.to(monitorEdge, 1, {
y:330,
ease:Power1.easeIn
},'-=0.75')
.to(monitorBottom,1, {
scaleX:0.69,
y:-23
})
.to(monitorBottom,1, {
scaleY:0.45,
alpha:1
}, '-=1')
.set(monitorBottom, {
alpha:0
})
.to(monitorLogo, 0.5, {
scale:0,
ease:Back.easeIn
},'-=1')
.to(monitorStand, 1, {
//scaleY:0
y:-120
},'-=1.5')
.to(monitorStandShadow, 0.5, {
alpha:0
},'-=1.5')
.from(laptopBase, 1, {
alpha:0
}, '-=1')
.from(laptopTrackpad, 1, {
scaleX:0
}, '-=1')
.from(laptopScreen, 1, {
scale:0,
ease:Back.easeOut.config(0.5)
})
.from(laptopEdgeLeft, 2, {
skewX:-40,
scaleY:0,
ease:Power3.easeOut
},'-=2')
.from(laptopEdgeRight, 2, {
skewX:40,
scaleY:0,
ease:Power3.easeOut
},'-=2')
.staggerFrom(laptopContent, 1, {
scaleX:0
},0.1)
/*
.to(laptopBase, 1, {
y:-60,
scaleX:0
})
*/
.to(laptopTrackpad, 0.3, {
alpha:0,
delay:2
})
.to(laptopScreen, 1, {
scaleX:0.67
})
.to(laptopScreen, 1, {
scaleY:0.8
},'-=1')
.to(laptopContentGroup, 1,{
alpha:0,
scale:0.5
},'-=1')
.to(laptopBase, 1, {
y:-20,
scaleX:0
},'-=1')
.to(laptopEdgeLeft, 1, {
x:40,
transformOrigin:'50% 50%',
scaleY:0.85
},'-=1')
.to(laptopEdgeRight, 1, {
x:-40,
transformOrigin:'50% 50%',
scaleY:0.85
}, '-=1')
.set(laptopGroup,{
alpha:0
})
.from(tabletGroup, 1,{
scale:1.1,
//y:20,
alpha:0
}, '-=1')
.to(tabletGroup, 2, {
rotation:0,
delay:2,
ease:Anticipate.easeOut.config(0.3)
})
.staggerFrom([tabletButton, tabletCamera], 0.5, {
scale:0,
ease:Back.easeOut
},0.1,"-=1")
.from(tabletContentGroup, 2, {
rotation:90,
scaleX:1.33,
scaleY:0.8,
ease:Power3.easeInOut
},'-=0')
.to([tabletButton, tabletCamera], 0.5, {
scale:0,
delay:2
})
.to(tabletGroup, 1, {
scaleX:0.45
})
.to(tabletGroup, 1, {
scaleY:0.7
},'-=1')
.to(tabletContentGroup, 1, {
y:-5
},'-=1')
.to(tabletScreen, 0.5,{
scaleY:0.92,
y:4
},'-=0.5')
.set(phoneGroup,{
alpha:1
})
.set([tabletGroup, tabletContentGroup], {
alpha:0
})
.staggerFrom([phoneButton, phoneCamera, phoneSpeaker], 1,{
scale:0,
ease:Back.easeOut
},0.1)
.to(phoneGroup,2, {
y:80,
//alpha:0,
delay:2,
//scaleX:0.51,
ease:Back.easeIn.config(2)
})
TweenMax.set('svg',{
visibility:'visible'
})
4. Kalo sudah jangan lupa disimpan, kemudian jalankan dibrowser nya masing-masing dan lihat hasilnya. Selesai
Nah itulah Animasi Komputer Dengan SVG, menarik yah ?
Sampai disini artikel mengenai bagaimana Animasi Komputer Dengan SVG, semoga bermanfaat, amin.
Selamat mencoba.