前端能力模型-动画类型及动画库的介绍

最新推荐文章于 2024-04-18 11:06:27 发布

VIP文章 zqjflash

最新推荐文章于 2024-04-18 11:06:27 发布

阅读量4.6k

点赞数 3

文章标签：动画 canvas animation gpu css3

本文链接：https://blog.csdn.net/zqjflash/article/details/44903859

版权

一、背景：

合适的动画不仅更能吸引人们的眼球，也能让你的应用体验更为流畅，而将动画的效果做到极致，才能让用户感到使用你的应用是一种享受，而不是觉得生硬和枯燥。

二、动画技术分类：

按技术类型来进行分类，分为三类：JS动画，CSS3动画，html5动画，接下来分别对三类动画进行讲解。

1）JS动画

通过一个定时器setInterval间隔来改变元素样式，动画结束时clearInterval即可。（早期类库：jquery、prototype、mootools）

优缺点：

优点：可控性很强，兼容性较好

缺点：

1、性能不佳：因为需要不断获取和修改dom布局，所以导致了大量页面重排（repaint）；

2、缺乏标准：不同的库使用了不同的API，导致即使是简单的动画也有各不相同的实现方式，调整起来比较耗时；

3、带宽消耗：相对丰富的动画库代码量都很大，结果就是增加了http请求的大小，降低了页面的载入时间。

2）css3动画

css3两种动画实现方式：一种是transition，一种是animation，animation相比transition使用起来更为复杂。

transition包含4种属性：transition-delay、transition-duration、transition-property、transition-timing-function，对应动画的4种属性：延迟、持续时间、对应CSS属性和缓动函数。

transform包含7种属性：animation-name、animation-duration、animation-timing-function、animation-delay、animation-direction、animation-iteration-count、animation-fill-mode、animation-play-state，对应动画名称、持续时间、缓动函数、动画延迟、动画方向、重复次数、填充模式。

优点：

1、css3动画相比JS更轻量，性能更好，更易于实现。

2、不必担心缺乏标准和增加带宽消耗的问题。

3、不依赖于主线程，采用硬件加速（GPU）

4、move.js是一个封装了css3动画效果的轻量级js动画库。

缺点：

1、不能动态的修改或定义动画内容

2、不同的动画无法实现同步

3、多个动画彼此无法堆叠

示例：2-1 Transitions动画（过渡动画）

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8" />
          <style type="text/css">
               .animate {
                    width: 200px;
                    height: 200px;
                    margin: 0 auto;
                    border-radius: 50%;
                    background-color: #f00;
                    line-height: 200px;
                    border-radius: 50%;
                    text-align: center;
                    color: #fff;
                    font-size: 20px;
               }
               .animate-transition {
                    transition: transform 2s linear;
                    -moz-transition: -moz-transform 2s linear;
                    -webkit-transition: -webkit-transform 2s linear;
                    -o-transition: -o-transform 2s linear;
               }
               .animate-transition:hover {
                    cursor: pointer;
                    transform: rotate(360deg);
                    -moz-transform: rotate(360deg);
                    -webkit-transform: rotate(360deg);
                    -o-transform: rotate(360deg);
               }
          </style>
     </head>
     <body>
          <div class="animate animate-transition">Transition Animation</div>
     </body>
</html>

示例2-2：keyframes animation（关键帧动画）

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8" />
          <style type="text/css">
               .animate {
                    width: 200px;
                    height: 200px;
                    margin: 0 auto;
                    border-radius: 50%;
                    background-color: #f00;
                    line-height: 200px;
                    border-radius: 50%;
                    text-align: center;
                    color: #fff;
                    font-size: 20px;
               }
               .animate-keyframes {
                    -webkit-animation: none;
               }
               .animate-keyframes:hover {
                    cursor: pointer;
                    -webkit-animation: frames 2s linear infinite;
               }
               @-webkit-keyframes frames {
                    0% {
                         background-color: #f00;
                         -webkit-transform: rotate(0deg);
                    }
                    100% {
                         background-color: #f00;
                         -webkit-transform: ro

最低0.47元/天解锁文章

zqjflash

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前端能力模型-动画类型及动画库的介绍

一、背景：合适的动画不仅更能吸引人们的眼球，也能让你的应用体验更为流畅，而将动画的效果做到极致，才能让用户感到使用你的应用是一种享受，而不是觉得生硬和枯燥。二、动画技术分类：按技术类型来进行分类，分为三类：JS动画，CSS3动画，html5动画，接下来分别对三类动画进行讲解。 1）JS动画通过一个定时器setInte
复制链接

扫一扫