理解动画中的线性插值

在传统(手绘)一个高级动画或者动画艺术家都喜欢绘制关键帧来定义一个动画。现场传递给助理,一般是实习生或者初级艺术家在此基础上做一些其他性的工作,具体的说,他们就是在关键帧动画之间添加一些中间片段让动画看起来更流畅,更自然。还记得在小学的时候,老师告诉你电脑是笨蛋吗?电脑需要被告知一系列的确切步骤,他们才知道需要做什么。今天我们来看看这一序列的步骤或算法,帮助计算机绘制动画关键帧之间必要的中间画。

线性插值

最近在看Canvas的一些动画实例当中,时常看到lerp()这个函数,一直以来并不知道这个函数起什么作用,有什么特性。今天花了一些时间,Google了一下,才知道这个函数是线性插值。那么线性插值是个什么鬼?他在一些程序中又起啥作用?这就是这篇文章要探讨和学习的。

Canvas学习:渐变

通过前面的Canvas学习,了解到在Canvas中绘制图形时,使用strokeStylefillStyle来设置绘制图形的边框颜色和填充颜色。前面的教程我们看到的都是给这两个属性设置具体的颜色值,比如#fffred之类。其实在Canvas中,除了给strokeStylefillStyle设置颜色之外,还可以设置渐变色。今天我们要学习的就是Canvas中的渐变知识。

如何使用CSS Grid布局实现限宽容器全屏效果

在Web的布局设计中时常会碰到全屏的效果,而且很多时候会碰到在限制宽度的容器中实现全屏效果。到写这篇文章的这个时候,前端有关于布局方面的技术又得到了新的突破,比如CSS Grid布局方案,到现在已经得到了主流的浏览器支持。在这里提到CSS Grid布局方案,其实就是想说一点,通过现在的CSS Grid布局效果,也可以实现在限宽容器中实现全屏布局效果。这也是接下来要介绍的内容。

Web中如何实现纵横比

Web发展到现在,已经有很大的变化,特别在当前这样的时代,我们面对的设备种类繁多。言外之意,这样的环境之下,Web的页面布局时常会碰到一些缩放比例的控制,特别是针对imgiframeobjectvideoembed等元素的比例缩放。当然,就img元素而言,要实现纵横比例的布局已有多种方案,而且实战性也特别的强,并且在Responsive设计中已使用广泛。

CSS Animations vs Web Animations API

上周,我写了一篇关于如何使用CSS制作bitsofcode logo的动画效果。之后收到一些建议,尝试比较一下CSS动画和Web Animations API。所以今天写了这篇文章。

Canvas学习:裁切clip()

上一节中学习了Canvas的图像合成,通过图像合成的技术可以轻易的实现类似于刮刮卡的效果,其实除了实现刮刮卡的效果之外,还可以使用这种技术制作类似于探照灯的效果。

Canvas学习:图像合成

合成是指如何精细控制画布上对象的透明度和分层效果。在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。事实上,它和CSS中的混合模式非常的类似。简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的globalCompositeOperation操作,可以得到不同的效果。

实现精准的流体排版原理

流体排版这一词似乎看上去有点陌生,在英文中常把他称之为Fluid Typography,当然也有很多朋友称之为流体字号(Fluid Size)。大概的意思就是Web排版中的font-size会根据浏览器窗口的大小自动改为。

如何美化下划线

2014年@Marcin Wichary在Medium分享了如何更好的突出链接的下划线效果@Mary Lou更疯狂的制作出了一个Demo,这个Demo展示了多种突出链接的效果,有些是使用的背景色,有些是使用不同的下划线方式。那么,接下来我们一起看看在Web中,如何更好的美化下划线的效果。

页面

返回顶部