animate.css一些实现原理

最新推荐文章于 2022-05-19 15:03:15 发布

Simple_IDE

最新推荐文章于 2022-05-19 15:03:15 发布

阅读量413

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/simple5960/article/details/116718447

版权

CSS3 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

首先是demo的创建

如下,就可以像官网那样每次点击之后就执行一次动画了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate learn</title>
    <style lang="less">
        @keyframes bounce {
          from,
          20%,
          53%,
          to {
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          }
        
          40%,
          43% {
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -30px, 0) scaleY(1.1);
          }
        
          70% {
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            transform: translate3d(0, -15px, 0) scaleY(1.05);
          }
        
          80% {
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transform: translate3d(0, 0, 0) scaleY(0.95);
          }
        
          90% {
            transform: translate3d(0, -4px, 0) scaleY(1.02);
          }
        }
        .animate
        {
            animation: bounce 2s;
            transform-origin: center bottom;
        }
        #main{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 10%;
            font-size: 40px;
        }
        </style>
</head>
<body>
    <div id="main">animate.css</div>
    <button id="active">test</button>
</body>
<script>
    const animateCSS=(element,animationName)=>{
        new Promise((resolve,reject)=>{
            const node=document.querySelector(element);
            node.classList.add(animationName);
            // When the animation ends, we clean the classes and resolve the Promise
            function handleAnimationEnd(event)
            {
                event.stopPropagation();
                node.classList.remove(animationName);
                resolve('animation end');
            }
            node.addEventListener('animationend', handleAnimationEnd, {once: true});
        })
        
    }
    const acticeButton=document.querySelector("#active");
    acticeButton.addEventListener('click',()=>{
        animateCSS('#main','animate')
    })
</script>
</html>

animation各个属性的具体意思

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation-name 动画名字

animation-duration  动画持续执行的时间

animation-timing-function 定义动画的执行节奏,平缓还是陡峭之类的
有以下几个value
1.cubic-bezier(x1,y1,x2,y2) 定时函数
/*
*cubic-bezier() 定义了一条 立方贝塞尔曲线（cubic Bézier curve）。
这些曲线是连续的，一般用于动画的平滑变换，也被称为缓动函数（easing functions）。
*/
P0 是 (0, 0)，表示初始时间和初始状态。P3 是 (1, 1) ，表示终止时间和终止状态。
贝塞尔曲线的 P1或 P2坐标超出[0, 1] 范围可能会产生弹跳效果。


2.linear
linear=cubic-bezier(0,0,1,1)线性变化的
3.ease
ease=cubic-bezier(0.25, 0.1, 0.25, 1.0) 开始时加速地更快，但在接近中间中，加速已经开始变慢了。
4.ease-in
ease-in=cubic-bezier(0.42, 0.0, 1.0, 1.0)。动画开始时缓慢，然后逐步加速，知道达到最后状态，动画突然停止
5.ease-out
cubic-bezier(0.0, 0.0, 0.58, 1.0)。动画开始很快，然后逐渐减慢，直到最终状态。
6.steps

animation-delay 定义动画延迟执行的时间

animation-iteration-count 定义动画执行的次数
为infinite是无限执行  一般为整数的数字个

animation-dirction 指定动画是否反向播放,默认normal
1.normal
每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
2.alternate
动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
3.reverse
动画反向运行===每周期结束动画由尾到头运行。
4.alternate-reverse
反向交替运行,也就是先反向运行在正向运行

animation-fill-mode 指定动画执行完成之后,执行动画元素的保留状态
注意,如果是事件触发的动画,只有一直执行事件才会让这个元素的状态保持
比如点击事件只执行一次,就不能让元素的状态保持为最后帧的状态
1.none
    目标将保留动画开始之前的css状态
2.forwards
    将保留动画最后一帧的状态
3.backwords
    将保留动画开始帧的状态,也就是会回到初始帧状态
    注意这个状态跟none的状态不一样
4.both

animation-play-state  指定动画的播放状态
running
paused

transform的属性

translate,scale,rorate,skew.martix

一般来说屏幕是绕Z轴旋转,绕XY轴旋转没效果,XY轴的旋转要加perspective才有效果
rotate3d(x, y, z, deg)
x,y,z 的取值是0-1
scale3d(x,y,deg)同理

transform:skew(x,y)
这个skew是斜切属性,它的xy轴与正常的xy轴相反
也就是水平Y轴,竖直X轴
当设置元素为transform:skew（0，30deg）；元素是按照水平方向Y轴顺时针旋转的 只旋转水平
当设置元素为transform:skew（30deg，0）；是按照垂直方向X轴，逆时针旋转的 只旋转竖直

transform:martix(a,b,c,d,e,f)
x,y为当前元素的左上角的坐标
//横列与竖列相乘结果
|a,b,c|     |x|   |ax+cy+e|
|d,e,f| *   |y|=  |bx+dy+e|
|0,0,1|     |z|   |0 + 0+1|
ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。
缩放相关
matrix(sx, 0, 0, sy, 0, 0);，等同于scale(sx, sy);
旋转相关
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

Shake

//左右摇动特效
实现方法  给间隔帧设置相反的移动
10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate3d(-10px, 0, 0);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate3d(10px, 0, 0);
    }

flash

//闪动特效
实现方法
设置opacity 50和100帧为1
其他中间比如25 和75帧为0

heartBeat

//放大缩小特效
实现方法
设置scale

rubberBand

//橡皮筋效果
实现方法
1.X轴放大,Y轴缩小  2.X轴缩小,Y轴放大
3.X轴放大,Y轴缩小  4.X轴缩小,Y轴放大

swing

//摇摆特效
先上下rotate大幅度,然后小幅度,最后变回原来的状态

Back Entrance

backInDown

//从上方进入
初始化的时候translateY为一个很大的负值
最后translateY为0,中间可以加opacity和scale的效果
其他的left,right,up类似

Back Exits

backOutDown

//从上方出去
初始化translateY为0

Simple_IDE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animate.css一些实现原理

首先是demo的创建如下,就可以像官网那样每次点击之后就执行一次动画了<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
复制链接

扫一扫

专栏目录