PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
背景
新的一年即将到来，远在他乡的孩子们马上可以回家和父母一起吃团圆饭，看春晚，放烟花，聊聊工作、谈谈理想，想想还挺惬意。
大人们忙着打牌，聊天，而我们小孩子最喜欢的是放鞭炮，所以你是否想用svg来实现放鞭炮？ 来吧，这篇文章会从零和你一起学习如果画一个鞭炮，如何实现鞭炮动画、如何实现鞭炮动画控制
元素
- 一个鞭炮
- 一个进度条
- 一个火星
- 一个鞭炮引线
技术
实现
html
先画一个鞭炮
<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="motion-path" fill="none" d="m0,0l0,5a10,10 0 0 1 -20,0a18,18 0 0 0 -36,0l0,30" />
<path stroke="null" fill="#E7402E"
d="m149.17433,213.24695c0,11.83309 -7.94387,21.51372 -17.65204,21.51372l-58.69101,0c-9.70908,0 -17.65295,-9.68062 -17.65295,-21.51372l0,-108.80346c0,-11.83309 7.94387,-21.51482 17.65295,-21.51482l58.69101,0c9.70817,0 17.65204,9.68173 17.65204,21.51482l0,108.80346z"
id="svg_1" />
<path stroke="null" fill="#F4DD50"
d="m131.1467,234.76267c9.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.53l0,2.806c0,10.742 8.1129,19.531 18.02856,19.531l59.93981,0z"
id="svg_2" />
<path stroke="null" fill="#3D100B"
d="m131.48444,237.69167l-59.61522,0c-11.37036,0 -20.62089,-10.076 -20.62089,-22.461l0,-2.807c0,-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 0.23227,-1.498c0.56921,-2.496 2.42831,-2.622 2.79462,-2.622l93.64185,0c0.36631,0 2.22541,0.126 2.79554,2.622c0.08814,0.385 0.16158,0.861 0.23135,1.498c0.1166,1.055 0.21942,2.533 0.30664,4.396c0.17627,3.748 0.2745,8.699 0.2745,13.943l0,2.807c-0.00092,12.385 -9.25145,22.461 -20.62089,22.461l0,0zm-74.41551,-41.868c-0.22126,2.823 -0.44068,8.557 -0.44068,16.602l0,2.806c0,9.154 6.83691,16.603 15.24189,16.603l59.6143,0c8.40406,0 15.2428,-7.447 15.2428,-16.603l0,-2.806c0,-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.69167l-59.02419,0c-11.25764,0 -20.41645,-11.31481 -20.41645,-25.22252l0,-110.91463c0,-13.90771 9.15882,-25.22252 20.41645,-25.22252l59.02419,0c11.25764,0 20.41645,11.31481 20.41645,25.22252l0,38.0477c0,1.81581 -1.19348,3.29136 -2.6642,3.29136s-2.66329,-1.47443 -2.66329,-3.29136l0,-38.0477c0,-10.27946 -6.76913,-18.64317 -15.09169,-18.64317l-59.02146,0c-8.32074,0 -15.09078,8.36259 -15.09078,18.64317l0,110.91463c0,10.27833 6.76913,18.64317 15.09078,18.64317l59.02419,0c8.31983,0 15.09078,-8.36259 15.09078,-18.64317l0,-35.36161c0,-1.81693 1.19348,-3.29024 2.66329,-3.29024c1.47072,0 2.66329,1.47331 2.66329,3.29024l0,35.36161c-0.00182,13.90771 -9.16063,25.22252 -20.41736,25.22252z"
id="svg_4" />
<path fill="#3D100B"
d="m149.17433,176.31867c-1.618,0 -2.93,-1.313 -2.93,-2.93l0,-12.109c0,-1.619 1.312,-2.93 2.93,-2.93s2.931,1.311 2.931,2.93l0,12.109c-0.001,1.618 -1.313,2.93 -2.931,2.93z"
id="svg_5" />
<path fill="#FFFFFF"
d="m112.045,91.86l-7.031,0c-1.618,0 -2.93,-1.312 -2.93,-2.93c0,-1.618 1.312,-2.93 2.93,-2.93l7.031,0c1.618,0 2.93,1.312 2.93,2.93c0,1.618 -1.312,2.93 -2.93,2.93zm-47.115,32.125c-1.618,0 -2.93,-1.312 -2.93,-2.93l0,-16.062c0,-10.473 7.107,-18.992 15.842,-18.992l12.913,0c1.618,0 2.93,1.312 2.93,2.93c0,1.618 -1.312,2.93 -2.93,2.93l-12.912,0c-2.529,0 -4.957,1.287 -6.836,3.624c-2.029,2.524 -3.147,5.901 -3.147,9.509l0,16.063c0,1.616 -1.311,2.928 -2.93,2.928z"
id="svg_6" />
<g stroke="null" id="svg_7">
<path stroke="#3D100B" id="fuse" fill="none" stroke-width="5"
d="m174.004,43.03652l0,5.51568c0,6.09305 -6.09177,11.03271 -13.59835,11.03271c-7.51559,0 -13.59835,-4.93965 -13.59835,-11.03271c0,-10.96721 -10.96441,-19.85888 -24.48423,-19.85888s-24.47908,8.89299 -24.47908,19.85888l0,33.09945" />
</g>
<circle fill="#F4DD50" cx="102" cy="141.97467" r="33.982" id="svg_10" />
<rect x="120.36745" y="125.38426" transform="matrix(0.7071 0.7071 -0.7071 0.7071 101.112 -39.4959)"
fill="#F4DD50" width="23.614" height="23.615" id="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.5l3,0l1.5,-3l1.5,3l3,0l-2.5,2.5l1.5,3.25l-3.5,-2l-3.5,2l1.5,-3.25l-2.5,-2.5z"
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(13 0)" 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>
复制代码css
* {
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;
}
复制代码静态效果
通过上面的代码，我们得到一个红红的鞭炮，接下来实现怎么它动起来
鞭炮动画
话不多说，上代码
- 首先要引入animejs
<script src="https://cdn.bootcdn.net/ajax/libs/animejs/3.2.1/anime.min.js"></script>
复制代码- 创建时间轴
const timeline = anime.timeline();
复制代码3.引线动画
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',
});
复制代码效果如下
4.火星动画
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',
});
复制代码5.鞭炮消失
timeline.add({
targets: '#bomb',
opacity: 0,
duration: 250,
easing: 'easeInOutSine',
});
复制代码加入了js 我们的鞭炮就可以动起来了！
实现进度控制
怎么实现进度控制了？额。。。。我思考了半天， 决定加入进度条
进度html
引入进度条
<input type="range" min="0" max="100" value="0" />
复制代码进度css
进度条样式
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;
}
复制代码进度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());
复制代码最终效果如下
结语
爆竹声中辞旧岁，欢乐声中迎新年，祝大家：春节快乐，万事如意，财运滚滚，一生平安！