实现一个svg扫描动画小图标

前言

封装了一个扫描样子的vue组件,使用svg标签,放大缩小不失真,可以设定组件大小,颜色以及控制动画的播放和停止.

实现过程

组件使用svg标签实现,任意放大和缩小图像都不会失真.配合css3动画,特别灵活,能做出各种矢量图动画效果.
svg的代码是用绘图软件实现的,只要会用软件,十分简单.有需求的可以直接拿去用,源码如下:

<template>
	<view>
		<svg :width="width" :height="height" viewBox="0 0 200 200">
		 <g>
		  <path :style="{fill: color}" d="M0 0l45 0 0 15 -30 0 0 30 -15 0 0 -45zm15 155l0 30 30 0 0 15 -45 0 0 -45 15 0zm140 30l30 0 0 -30 15 0 0 45 -45 0 0 -15zm30 -140l0 -30 -30 0 0 -15 45 0 0 45 -15 0z"/>
		  <rect :class="rectClass" :style="{fill: color}" x="36" y="91" width="130" height="16"/>
		 </g>
		</svg>
	</view>
</template>

<script>
	export default {
		props: {
			width: {
				type: Number,
				default: 200
			},
			height: {
				type: Number,
				default: 200
			},
			color: {
				type: String,
				default: '#999'
			},
			stop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return { 
				
			}
		},
		computed: {
			rectClass() {
				return this.stop ? 'off' : 'on'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.on {
		y: 20;
		animation: scan 2s infinite;
	}
	.off {
		y: 91;
	}
	@keyframes scan {
	    50% {y: 160;}
	}
</style>

调用

<scan :stop="stop" :height="50" :width="50" color="#55aaff"></scan>

width和height参数都要传,不然元素位置会不正确.
stop属性控制动画的播放和停止.