会员专栏

使用React创建SVG图标系统

Icon图标在Web应用或Web页面中起着至关重要的作用。它除了起到一定装饰作用之外,还可以在不添加任何文本信息的情况之下向用户传达正确的含义。在当今的Web开发中,有许多不同的方式将图标运用于Web应用或Web页面上。同样,在社区中也有很多介绍Icon图标系统构建的方法,比如早期的雪碧图字体图标以及SVG Sprites等。但是今天我想从不同的角度来和大家聊聊,如何基于React框架下构建属于自己的SVG图标系统。感兴趣的同学,欢迎继续往下阅读。

SVG在React中的运用

在Web的世界当中,SVG并不是什么新的语言,只不过早年前SVG在Web的应用并不太广泛。不过近年来,它在Web的应用越来越广泛。最为常见的就是一些Icon图标,复杂一点是一些矢量图(比如不规则的图形),甚至还可以使用SVG的滤镜、动效等功能,实现一些复杂的UI效果。不过这些并不是今天要和大家聊的主题,今天想和大家聊的是 SVG在前端框架中的应用,比如React框架。

通过Sketch设计软件学习SVG基础知识

在《图解SVG的核心概念》一文中,花了很长的篇幅和大家深入的探讨了SVG中的几个核心概念。有了这些基础概念之后,对于学习和理解SVG方面的知识会变得更容易。时至今日,设计SVG的应用软件也越来越多,比如我们熟悉的Adobe Illustrator以及近几年较为流行的SketchFigma等。不过今天,我想结合Sketch软件帮助大家更好的理解SVG的一些基础知识。如果您感兴趣的话,请继续往下阅读。

图解SVG的核心概念

在SVG中,对于很多初学者或者使用SVG有一段时间的同学来说,有几个概念总是会相互混淆。比如,SVG的画布视窗(Viewport)ViewBox等。这几个概念对于学习或掌握SVG来说是非常必要的。在此我们一起来学习和了解这几个概念。

CSS中百分比单位计算方式

CSS中的单位有很多类型,不同类型单位计算方式也有所不同,特别是百分比(%单位,它的计算和使用的属性有着直接关系。其中最为重要的是:百分比是一定要有其对应的参照值,也就是说,百分比值是一种相对值,任何时候要分析它的计算值,都需要正确的找到它的参照值。言外之意,CSS中的百分比单位值最终计算出来的值是可变的。在这篇文章中,我们主要来看看百分比单位在不同使用场景中计算方式。在CSS中能运用%值的属性很多,为了能让大家更好的理解使用%的规则,我们从最熟悉和最简单地属性开始。

GSAP中的timeline

如果你阅读过上一篇《初探GSAP》文章,我想你对GSAP有了一个初步的认识。而且文章中也提到过,使用gsap.timeline()这个API可以帮助我们轻易的控制动画的时序。换句话说,让我们控制动画变得更简单,效果更好。今天这篇文章,我想花更多的时间和大家一起来探讨GSAP中的Timeline,即 gsap.timeline()的使用。

CSS Grid中的auto-fill和auto-fit

Web布局相关的话题一直以来都是一个永恒的话题,不管发展到什么时候,都不会缺这样的话题。一直以来,我都非常推崇CSS Grid的布局模块,在我的认知中,CSS Grid布局是一个强大的布局,它将灵活的解决我们以往在Web中碰到的大多数问题。正因为CSS Grid布局很强大,因此它的体系也很庞大。比如@Juan Martín García就用CSS Grid向大家展示了如何通过一行CSS代码实现特定环境下的响应式布局效果。

初探GSAP

时至今日在Web中开发动效有很多种方式,有纯CSS的方式(AnimationsTransitions),也有Web Animation APISVG Animation,还有很多优秀的JavaScript库(比如,Anime.jsKUTE.jsMo.js等)。在WebGL方面有Three.jsPixiJSBabylon.jsPlayCanvas等。除此之外,业内还有一个制作动画非常出色的平台,那就是GSAPGreenSock Animation Platform的简称)。在接下来的日子中,将会不间断的发布一些关于GSAP制作动效相关的教程,今天这篇文章,主要和大家先探讨一些GSAP的基础知识。

使用React Hooks和WAAPI创建动效

早期在Web页面或Web应用中实现 Web动画 通常是使用JavaScript来完成。使用JavaScript创建动画非常灵活,但不能轻易地让浏览器通过硬件加速来优化动画,也不能将其连接到 布局渲染 管道中。值得庆幸的是,自2007年Webkit团队引入的 CSS AnimationCSS Transition 克服了早期JavaScript动画实现的挑战。但是,CSS Animation和Transition也有很多的限制,特别是在 动态创建动画、控制动画的回放和监视动画生命周期方面等。不过,Web Animation API的出现,让开发者(特别是Web动画方面的开发者)看到了曙光。因为,Web Animation API引入了一种新的解决方案,它提供了CSS Animation和Transition的优化能力,同时还提供了早期基于JavaScript制作动画的API的灵活性。Web Animation API通过 计时模型(Timing Mode)动画模型(Animation Model)提供对Web动画开发和控制。

你可能不太熟知的布局技巧

随着Web技术不断的革新,CSS近几年也变得多年前要更强大。在Web开发中,CSS是不可或缺的一部分,对于很多Web开发者来说,有很多CSS属性不知道,或者说他们知道,但忘记在最恰当的时候使用最适合的CSS属性。而且时至今日,其中有一些CSS的属性可以让开发者能节约更多的时间。比如说,在Web布局中,现代CSS特性就可以更好的帮助我们快速实现,例如等高布局水平垂直居中,经典的圣杯布局、宽高比例页脚保持在底部等。在本文中,我将会介绍一些不同的CSS属性来实现这些效果,希望大家会感兴趣。更希望对大家今后的工作有所帮助。

页面

返回顶部