现代 CSS

Web动画

CSS Houdini自定义属性@property给动效带来的扩展

Web中制作动效姿势有很多种,比如说纯CSS制作动效,JavaScript制作动效等。但话又说回来,如果你使用CSS来制作动效的时候会有不少的限制,虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化,但还是有一定的缺陷在这里面。不过,CSS Houdini的到来,不说其自身的Animation API,就说他的自定义属性的出现,就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说,CSS Houdini的自定义属性 @property 可以扩展CSS的动效,也可以帮助我们提高CSS开发动效的能力。这篇文章,主要就是和大家一起来探讨,CSS Houdini的自定义属性是如何扩展动效开发的能力。

纯CSS实现随机效果

最近在Codepen上看到了@Adir写的随机翻牌找蛋蛋(可以想象是砸金蛋)效果,让我再次刷新了对CSS的认知。看到这两个效果之后我才知道,在CSS中除了可以实现 动态计算逻辑运算状态切换 之外,也可以使用纯CSS实现随机效果。你是否和我一样,听到纯CSS实现随机效果有点不可思议,但这是事实,在CSS中,我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话,那阅读这篇文章你将知道其中的原委。

Lottie Web动效基本原理

前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中,聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通,并从AE导出动效相关的JSON文件。这些都是最基本的操作链路,但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。

Lottie Web动效在React中的构建

时至今日Web动效已经不是什么新鲜事了,在很多Web页面或Web应用上都有Web动效的身影。承载Web动效的方式也很多种,比如早期的Gif动效,也有人用视频来表示动效,也有使用JavaScript构建动效(比如Canvas,WebGL构建),还有一些JavaScript库构建动效以及CSS构建Web动效等。不过,近几年更多的是在探讨如何快速生产,并且还原动效。针对于这方面,在业内Lottie动效算是流行的一种,也是口碑很好的一种。今天我们就来看看,如何在React中借助Lottie的能力,快速还原Web动效。

使用React Hooks构建CSS的transition和animation

Web动效在Web应用中所起的作用就不说了。有人说,Web动效可以给Web起到锦上添花效果,也有人说,Web动效可以增加用户的粘性和吸引力。就目前来说,在Vue框架体系下,可以使用<transition>组件来构建Web动画效果,其实在React体系下,也可以使用类似的方式来给Web元素添加动画效果。接下来,就和大家一起探讨,在React框架如何将CSS的trasitionanimation运用到元素中,让Web元素动起来。如果你对这方面知识感兴趣的话,欢迎继续往下阅读。

如何创建变形动效

变开动效他有一个专业名词,叫作 Morphing Animation,简单地说从一种图形平滑过渡到另一张图形,也就是把两个(或多个)图形在变化时间上作线性的内插。而这种动画效果在Web上的使用也越来越频繁,比如说,两个状态下图标变形有一个动画效果。既然变形动效越来越受青眯,那么今天就来和大家聊聊如何创建变形动效的效果。

使用clip-path制作Web动效

clip-path是CSS属性之一,只不过很多同学都担心浏览器对他的兼容性,因此不怎么使用该属性。其实clip-path已经得到很好的支持,可以说现在主流浏览器对他的支持已经很好了。事实也是这样,就我自己而言,早在去年中开发的项目就已经有clip-path的身影了。在CSS的世界中,clip-path是一个很有意思的属性,他可以帮助我们绘制很多不同规则的图形(除了常见的圆形,椭圆形,矩形,三角形等),而且结合CSS的transitionanimation的话,clip-path能帮助我们实现一些很有意思的动画效果。接下来,就和大家聊聊使用clip-path制作Web动效的一些事情。

在React中使用个性化SVG图标

前段时间和大家一起探讨了在React框架体系下如何使用SVG构建SVG图标系统。不管是引入.svg文件当作React组件,还是通过工程能力将.svg文件转换成React组件,它们之间都有一定的共性,比如说无法修改SVG部分的外观特性等。但在SVG的内联使用中,我们是可以通过CSS的特性或调整SVG元素标签的属性,可以自定义SVG外观,甚至还可以添加动效。因此,今天想和大家探讨如何在React中使用自定义(个性化)的SVG。

GSAP中的timeline

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

初探GSAP

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

页面

返回顶部