Web中多种实现动画的方案

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

Web中多种实现动画的方案

前一段时间在做圣诞节运营活动页面的时候,UI给了各种酷炫的动画,看是好看,但是实现起来,头发就得遭殃了。
为此,总结了几种Web中多种实现动画的方案。

1.css3-transform

作为一名优秀的前端开发工程师(切图仔),能自己手动实现的动画绝不依赖于UI,为此css3提供了transform这一工具,其中的多个属性能满足我们的部分功能。

1.1 旋转rotate

rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
如:transform:rotate(30deg):

1.2 移动translate

移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动),具体使用方法如下:

1.translate(<translation-value>[, <translation-value>]) :通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果 未被提供,则ty以 0 作为其值。也就是translate(x,y),它表示对象进行平移,按照设定的x,y参数值,当值为负数时,反方向移动物体,其基点默认为元素 中心点,也可以根据transform-origin进行改变基点。如transform:translate(100px,20px):

2.translateX(<translation-value>) : 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素,同样其基点是元素中心点,也可以根据transform-origin改变基点位置。如:transform:translateX(100px):

3.translateY(<translation-value>) :通过给定Y方向的数目指定一个translation。只向Y轴进行移动,基点在元素心点,可以通过transform-origin改变基点位置。如:transform:translateY(20px):

1.3 缩放scale

缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。下面我们具体来看看这三种情况具体使用方法:

1.scale(<number>[, <number>]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。如:transform:scale(2,1.5):

2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点。如:transform:scaleX(2):

3.scaleY(<number>) : 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素,其基点同样是在元素中心位置,可以通过transform-origin来改变元素的基点。如transform:scaleY(2):

1.4 扭曲skew

扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形),具体使用如下:

1.skew(<angle> [, <angle>]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。skew是用来对元素进行扭曲变行,第一个参数是水平方向扭曲角度,第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数,如果没有设置第二个参数,那么Y轴为0deg。同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。如:transform:skew(30deg,10deg):

2.skewX(<angle>) : 按给定的角度沿X轴指定一个skew transformation(斜切变换)。skewX是使元素以其中心为基点,并在水平方向(X轴)进行扭曲变行,同样可以通过transform-origin来改变元素的基点。如:transform:skewX(30deg)

3.skewY(<angle>) : 按给定的角度沿Y轴指定一个skew transformation(斜切变换)。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向(Y轴)扭曲变形。同样我们可以通过transform-origin来改变元素的基点。如:transform:skewY(10deg)

2.序列帧动画

当基本的transform无法满足比较复杂的动画时,我们可以考虑才用序列帧动画的形式来实现。
原理很简单,就是将一张动图截成若干帧的静态图,然后利用程序在短时间内切换图片,来达到视觉上的动画。实现也很简单,就是每隔一段时间切换一次展示区域所能看见的图片即可。
由于可视区域中图片的变换不是渐变,而是瞬变的,因此我们需要借助于css中的animation-timing-function中的steps()来实现。
steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end
工作机制如图:
这里写图片描述
因此,我们需要像使用雪碧图一样,将多张静态图片合成一张,然后当做动画区域的背景图,利用animation来改变background-position便能实现序列帧动画。
提供一个demo代码:

div{
    background-image: url('image/image.jpeg');
    background-repeat: no-repeat;
    height: 345px;
    width: 235px;
    animation: move  1s  steps(1,end) infinite;
}

@keyframes  move{
    0%{
        background-position: 0px  0;
    }
    14.285%{
        background-position: -180px  0;
    }
    28.571%{
        background-position: -369px  0;
    }
    42.857%{
        background-position: -609px  0;
    }
    57.143%{
        background-position: -35px  -424px;
    }
    71.429%{
        background-position: -235px  -424px;
    }
    85.714%{
        background-position: -435px  -424px;
    }
    100%{
    }
}

3.gif、apng、webp

当css动画无法实现UI要求的动画时,我们又懒于用更复杂的方式去实现,那么让UI直接导出一张动图最好不过了。
那么,多种动图格式,才用哪种呢?莫急,且听我娓娓道来。

1.GIF 是一个非常古老的格式,1987 年诞生,最后一个版本是 1989 年。

2.APNG 格式是 PNG 的扩展,第一帧储存方式和普通的 PNG 一样在 IDAT 区段中,APNG 只是新增了三种区段,所以如果一个软件只支持 PNG 而不支持 APNG 的话,依旧可以显示出图片的第一帧,只是不能动罢了。APNG 新增的三种区段分别为:

3.WebP,Google 在 2010 年推出的全部通吃的图片格式,为什么叫全部通吃呢?因为他既可以有损(替代 JPEG)也可以无损(替代 PNG),还可以动(替代 GIF),并且在压缩率上全面超越了这三种常用的格式。

压缩率

GIF 采用的是 LZW,而 APNG 采用的是 Deflate,再加上 APNG 继承了 PNG 的 filter,利用相邻像素的相似性使压缩率大大提高

颜色

GIF 每个像素只有 8 bit,也就是说只有 256 种颜色,于是很多人误以为 GIF 不支持 24 bit RGB,但实际上,GIF 的限制是每一帧最多只能有 256 种颜色,但是每种颜色可以是 24 bit 的。不过即使是这样,256 种颜色还是太少了,这就导致了 GIF 的画质都比较差。

而 APNG 和 WebP 则完全没有这方面的限制。

透明

GIF 虽然也支持透明,但是他只支持将某个颜色标记成透明,也就是说他不支持半透明,只支持完全透明或者完全不透明。如果把一个边缘是半透明的图片转换成 GIF,就会出现另一个答案中提到的杂边问题。

而 APNG 和 WebP 都支持 8 bit alpha channel,透明度可以有 256 级。

兼容性

可能是 GIF 唯一的优势了吧。

几乎所有的浏览器都支持 GIF,而支持 APNG 的浏览器有 Chrome、Firefox、Safari 和 Opera,支持 WebP 的有 Chrome、Firefox、Edge 和 Opera

4.canvas、svga

canvas先是创建一个画板,然后在画板中通过操作点、线、面、图片以及dom元素的样式来实现变幻,在变幻过程中添加一些过渡态,便能得到我们想要的效果。
而svga与canvas类似,通过不断修改g这个dom节点的样式来实现变幻。
canvas和svga实现动画有一个好处,就是完全交由开发实现,并且h5提供了丰富的api供大家使用,理论上来说,只要代码足够优秀,什么动画都能实现。
在这,就不逐一介绍canvas和svga的api了,大家有兴趣的话可自行查阅文档。
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
https://developer.mozilla.org/zh-CN/docs/Web/API/SVGAElement

5.lottie动画

lottie动画在浏览器中渲染的原理其实跟svga相似,也是通过不断地更改元素的样式来实现动画效果,但是lottie动画有一个很大的好处就是:不需要开发去手撕动画,由UI通过制图软件制作好动画,然后导出一个文件,里面包含有一个json文件(用于描述素材的运动轨迹)、一个html文件(用于预览该lottie动画)以及必要的素材,而开发只需要导入json和素材即可实现动画。

Lottie可以解决的问题:
1> 开发人员无需编写动画,只需加载
2> 多平台支持,一次设计多端使用
3> 解决设计提供的动效与实现不一致问题
4> 因为只是加载json文件,占用空间更小
5> 专业的人做专业的事,设计师安心做酷炫动画,开发者专心写逻辑

在业内,已经有很多基于web加载lottie的库,大家可以安心使用,并且兼容性也非常的好。

本文参考:
https://www.cnblogs.com/qianduanjingying/p/4937574.html
https://www.jayxon.com/gif-apng-webp/

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看