PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest
background
The New Year is coming, far away from home children can immediately go home with their parents to eat dinner, watch the Spring Festival Gala, fireworks, talk about work, talk about the ideal, think also very comfortable.
Adults are busy playing cards and chatting, but what we kids like most is setting off firecrackers, so would you like to use SVG to set off firecrackers? Come on, this article will learn from zero with you if you draw a firecracker, how to achieve firecracker animation, how to achieve firecracker animation control
The element
- A firecracker
- A progress bar
- A Mars
- A firecracker fuse
technology
animejs
implementation
html
First draw a firecracker
< SVG width = "200" height = "250" XMLNS = "http://www.w3.org/2000/svg" version = "1.1" enable - background = "new 0 0 200 200" XML :space="preserve"> <g> <title>Layer 1</title> <g id="bomb"> <path ID =" mode-path "fill="none" D ="m0, 0L0,5a10,10 0 0 1 to 20, 0 a18, 36, 0 0 0 0 to 18 l0, 30 "/ > < path stroke =" null "fill = # E7402E d =" m149.17433, c0, 213.24695 11.83309 21.51372 17.65204, 7.94387, 21.51372 l - 58.69101, 0 c - 9.70908, 0-17.65295, 9.68062 C0-17.65295, 21.51372 l0, 108.80346, 11.83309, 7.94387, 21.51482, 17.65295, 21.51482 l58.69101, 0 c9. 70817, 0, 17.65204, 9.68173 17.65204, 21.51482 l0, 108.80346 z svg_1 "id =" "/ > < path stroke =" null "fill = # F4DD50 d =" m131.1467, 234.76267 c9.91474, 0 18.02763,-8.789 18.02763, -19.531L0, -2.806C0, -10.741-0.41538, -19.53-0.92215, -19.53L -94.1517, 0C-0.50769, 0-0.92215,8.789 - 0.92215, 19.53 l0, c0 2.806, 10.742, 8.1129, 19.531, 18.02856, 19.531 l59.93981, 0 z svg_2 "id =" "/ > < path stroke =" null" The fill = "# 3 d100b" d = "m131.48444, 237.69167 l - 59.61522, 0 c - 11.37036, 0-20.62089, 10.076-20.62089, 22.461 l0, 2.807 c0, 5.244 0.0964,-10.195 0.27267,-13.943c0.08814,-1.863 0.19096,-3.344 0.30756,-4.396c0.07069,-0.637 0.14414,-1.113 C0.56921 0.23227, 1.498, 2.496, 2.42831, 2.622, 2.79462-2.622 l93.64185, 0 c0. 36631, 0, 2.22541, 0.126 2.79554, 2.622 c0.08814, 0.385, 0.16158, 0.861, 0.23135, 1.498 c0.1166, 1.055, 0.21942, 2.533, 0.30664, 4.396 c0.17627, 3.748 0.2745, 8.699, 0.2745, 13.943 l0, 2.807-0.00092 c, 12.385-9.25145, 22.461 Zm - 20.62089, 22.461 l0, 0-74.41551, - 41.868 - c - 0.22126, 2.823-0.44068, 8.557, 0.44068, 16.602 l0, c0 2.806, 9.154, 6.83691, 16.603 C8 (15.24189, 16.603 l59.6143, 0. 40406, 0, 15.2428, 7.447, 15.2428-16.603 l0, 2.806 c0, 8.045-0.21942, 13.778 -0.43976, -16.602L-89.21856,0l0.00001,0z" id="svg_3" /> <path stroke="null" fill="#3D100B" D = "m131.68897, 237.69167 l - 59.02419, 0 c - 11.25764, 0-20.41645-11.31481-20.41645, 25.22252 l0, 110.91463 c0, 13.90771 9.15882, 25.22252, 20.41645, 25.22252 l59.02419, 0 c11. 25764, 0, 20.41645, 11.31481, 20.41645, 25.22252 l0, c0 38.0477, 1.81581 3.29136 2.6642, 1.19348, 3.29136 s to 2.66329-1.47443-2.66329, 3.29136 l0, 38.0477 c0, 10.27946-6.76913, 18.64317 15.09169, 18.64317 l - 59.02146, 0 c - 8.32074, 0-15.09078, 8.36259-15.09078, 18.64317 l0, c0 110.91463, 10.27833, 6.76913, 18.64317 C8 (15.09078, 18.64317 l59.02419, 0. 31983, 0, 15.09078, 8.36259, 15.09078-18.64317 l0, 35.36161 c0, 1.81693, 1.19348-3.29024 2.66329, 3.29024 c1.47072, 0, 2.66329, 1.47331, 2.66329, 3.29024 l0, 35.36161-0.00182 c, 13.90771-9.16063, 25.22252 /> <path fill="#3D100B" d="m149.17433,176.31867c-1.618, 0-2.93,-1.313 C0-2.93, 2.93 l0, 12.109, 1.619, 1.312, 2.93, 2.93, 2.93 s2.931, 1.311, 2.931, 2.93 l0, c - 0.001-12.109, 1.618-1.313, 2.93 2.931, 2.93 z svg_5 "id =" "/ > < path the fill =" # FFFFFF "d =" m112.045, 91.86 l - 7.031, 0 c - 1.618, 0-2.93, 1.312-2.93, 2.93 c0, 1.618 1.312, 2.93, 2.93, 2.93 l7.031, 0 c1. 618, 0, 2.93, 1.312, 2.93, 2.93 c0, 1.618-1.312, 2.93-2.93, 2.93 zm - 47.115, 32.125-1.618 c, 0 2.93, 1.312-2.93, 2.93 l0, 16.062 c0, 10.473 7.107, 18.992, 15.842-18.992 l12.913, 0 c1. 618, 0, 2.93, 1.312, 2.93, 2.93 c0, 1.618 2.93 2.93, 1.312, 2.93 l - 12.912, 0 c - 2.529, 0-4.957, 1.287-6.836, 3.624-2.029 c, 2.524-3.147, 5.901 C0, 16.063-3.147, 9.509 l0, 1.616-1.311, 2.928, 2.93, 2.928 z svg_6 "id =" "/ > < g stroke =" null "id =" svg_7 "> < path The stroke = "# 3 d100b" id = "fuse" fill = "none" stroke - width = "5" d = "m174.004, 43.03652 l0, 5.51568 c0, 6.09305-6.09177, 11.03271 C - 7.51559-13.59835, 11.03271, 0-13.59835-4.93965-13.59835, 11.03271 c0, 10.96721-10.96441, 19.85888 24.48423, 19.85888 s - 24.47908, 8.89299-24.47908, 19.85888 l0, 33.09945 "/ > < / g > < circle the fill =" # F4DD50 cx "=" 102" <rect x=" 120.36445 "y="125.38426" transform="matrix(0.7071 0.7071-0.7071 0.7071 101.112-39.4959)" fill="#F4DD50" width="23.614" height=" svg_11" /> <g id="spark"> <path ID ="ember" Transform ="scale(2.1 2.1) translate(83 20)" stroke="#F3A37C" stroke-width="1.25" D = "m - 4.5-1.5 l3, 0 l1. 5-3 l1. 5, 3 l3, 0 l - 2.5, 2.5 l1.5, 3.25 l - 3.5, - 3.5-2 l, l1. 2, 5-3.25 l - 2.5-2.5 - z" fill = "# FFF9EE" / > < g id="sparkles" transform="scale(0)"> <g fill="#F3A37C"> <circle transform="rotate(10) translate(12 0)" cx="0" cy="0" r="2"> </circle> <circle transform="rotate(170) translate(12 0)" cx="0" cy="0" r="2"> </circle> <circle transform="rotate(90) translate(12 0)" cx="0" cy="0" r="2"> </circle> <circle transform="rotate(-60) translate(13 0)" Cx = "0" cy = "0" r = "2" > < / circle > < circle transform = "rotate (120) translate (0) 13" cx = "0" cy = "0" r = "1.75" > < / circle > > < / g </g> </g> <text transform="rotate(180 105.781 146.791) matrix(1.14815 0 0 1.23535 89.2675 95.9221)" fill="# e7402E" Font-family: 'MicrosoftYaHei'" font-size="29" id="svg_13" x="2" y="54" stroke-width="3" font-weight="bold"> </text> </g> </g> </svg>Copy the codecss
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* display the svg and input in a centered column */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fffaf0;
}
svg {
display: block;
width: 200px;
height: auto;
}
Copy the codeThe static effect
With the code above, we get a red firecracker. How does it move
Firecrackers animation
Without further ado, go to the code
- First, introduce animejs
<script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
Copy the code- Create a timeline
const timeline = anime.timeline();
Copy the code3. Lead animation
timeline.add({
targets: '#fuse'.strokeDashoffset: (target) = > -target.getTotalLength(),
duration: 5000.begin: (animation) = > {
const target = animation.animatables[0].target;
const length = target.getTotalLength();
target.setAttribute('stroke-dasharray', length);
},
easing: 'linear'});Copy the codeResults the following
const motionPath = document.querySelector('#fuse');
const path = anime.path(motionPath);
timeline.add({
targets: '#spark'.translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
duration: 5000.easing: 'linear',},'- = 5000');
timeline.add({
targets: '#ember'.transform: Array(21).fill('scale (2.5)').map((scale, index) = > index % 2= = =0 ? 'scale (1.4)' : scale),
duration: 5000.easing: 'easeInOutSine'.direction: 'alternate',},'- = 5000');
timeline.add({
targets: '#sparkles'.transform: Array(21).fill('scale (1.5)').map((scale, index) = > index % 2= = =0 ? 'scale(0)' : scale),
duration: 5000.easing: 'easeInOutSine'.direction: 'alternate',},'- = 5000');
timeline.add({
targets: '#spark'.scale: 4.5.opacity: 0.duration: 250.easing: 'easeInOutSine'});Copy the code5. Firecrackers disappear
timeline.add({
targets: '#bomb'.opacity: 0.duration: 250.easing: 'easeInOutSine'});Copy the codeJoin js our firecrackers can move up!
Achieve schedule control
How to achieve progress control? Uh… I thought about it for a while and decided to add the progress bar
The progress of the HTML
Introducing a progress bar
<input type="range" min="0" max="100" value="0" />
Copy the codeThe progress of CSS
Progress bar Style
input[type="range"] {
margin-top: 2.5rem;
width: 300px;
-webkit-appearance: none;
height: 1rem;
background: transparent;
color: #0d3730;
position: relative;
cursor: e-resize;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #0d3730;
}
input[type="range"]:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #0d3730;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: -5;
}
input[type="range"]:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-left: 2px solid #0d3730;
border-right: 2px solid #0d3730;
z-index: -5;
}
Copy the codeThe progress of js
const input = document.querySelector('input');
const timeline = anime.timeline({
update: ({ progress }) = > {
input.value = progress
}
});
function handleInput() {
const { value } = this;
timeline.seek(timeline.duration * value / 100);
}
input.addEventListener('input', handleInput);
input.addEventListener('mousedown'.() = > timeline.pause());
input.addEventListener('mouseup'.() = > timeline.play());
Copy the codeThe end result is as follows
conclusion
Firecrackers in the old year, the sound of joy in the New Year, I wish you all: happy Spring Festival, good luck in everything, money rolling, life peace!