animation属性之纯css3实现曲线运动——贝塞尔曲线(cubic-bezier)

最新推荐文章于 2024-05-03 14:52:30 发布

小方一身坦荡

最新推荐文章于 2024-05-03 14:52:30 发布

阅读量1.6k

点赞数

文章标签： css3 动画前端

animation属性之纯css3实现曲线运动——贝塞尔曲线【cubic-bezier】

animation: name duration timing-function delay iteration-count direction fill-mode play-state;(关键帧名称,持续时间,速度曲线,延迟时间,动画次数,是否反向,完成状态,运行|暂停)
css3圆形轨迹动画

animation: name duration timing-function delay iteration-count direction fill-mode play-state;(关键帧名称,持续时间,速度曲线,延迟时间,动画次数,是否反向,完成状态,运行|暂停)

animation-name 关键帧名称
@keyframes name { }
(1)关键帧的声明只有两种：(from/to)和(%)
(2)0 (%)从0%开始至100%，0%～100%中间任意数字都可以
animation-duration 动画持续时间（默认为0，值可以设置成秒[s]或毫秒[ms]）
animation-timing-function 动画速度曲线（默认值ease）

在这里插入图片描述

animation-delay 动画播放延迟时间设置（s/ms）
animation-iteration-count 动画播放次数,默认值1，值：n/infinite）
animation-direction 规定是否应该轮流反向播放动画。
animation-direction: normal|alternate;
normal:默认值。动画应该正常播放。
alternate:动画应该轮流反向播放。动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
animation-fill-mode: backwards/forwards; 动画播放完之后的状态（默认值none，值:none;backwards;forwards;both.）
(1)backwards应用在第一个关键帧的状态,即定格在0%时候的样子
(2) forwards动画完成保持最后一帧的状态,即定格在最后100%的样子
animation-play-state:running|paused; //运行|暂停（默认运行）
注意：始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>贝塞尔曲线动画调研</title>
    <style>
        html {
            background: #ad4e24;
        }

        /* //定义球的初始值，位置是绝对定位； */
        .ball {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            position: absolute;
            bottom: 40px;
            z-index: 10;
            left: 40px;
            background: greenyellow;
        }

        /* //定义动画的流程 */
        .run_top_right {
            display: block;
            animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 cubic-bezier(.66, .1, 1, .41);
            /* animation: run-right-right 3s 0.4s 1 linear, run-right-top 3s 0.4s 1 ease-out; */
            animation-fill-mode: forwards;
        }

        /* //向上走的动画初始及结尾值 */
        @keyframes run-right-top {
            0% {
                bottom: 40px;
            }

            100% {
                bottom: 500px;
            }
        }

        /* //向上右的动画初始及结尾值 */
        @keyframes run-right-right {
            0% {
                left: 40px;
            }

            100% {
                left: 600px;
            }
        }
    </style>
</head>

<body>
    <div class="ball run_top_right"></div>
</body>

</html>

第一、分解运动

上图的曲线运动进行分解
向右：匀速运动；
向上：加速运动；（因为向上的线越来越陡，意味着速度越来越快，所以在做加速运动）

第二、实现代码解释

——@keyframes 是css3的一个规则，用来定义一个运动的每个桢的位置，大小颜色等；
——这段代码的意思是动画animation用run-right-right动画和 run-right-top动画，注意我们是同时引用的两个动画；
就是@keyframes 所定义的，然后我们又设置了一些参数，逐一解释：
一.第一个参数就是引用的动画名字；
二，动画持续时间3s；
三、0.4s是延迟时间为0.4s，以run_top_right加到ball上面的时间为准，延后0.4s;
四、1是动画的执行次数是1次；
五、cubic-bezier(.66,.1,1,.41) 就是重要的贝塞尔曲线(cubic-bezier)；

实际上是设置animation-timing-function的属性；就是设置运动速度的特性属性；

1.linear，就是线性运动，也就是匀速运动；
2 ease，默认。动画以低速开始，然后加快，在结束前变慢。
3.ease-in，ease-out,ease-in-out,就很好记，ease就是慢的意思，ease-in就是慢速开始，就是做加速运动，ease-out就是减速运动，ease-in-out就是先加速后减速；当然我们也可以设置成cubic-bezier()值；

因为这里我只需要向上的运动做变速运动所以run-right-right 我设置的是linear，匀速运动，然后 run-right-top设置的是cubic-bezier(.66,.1,1,.41)，这样的加速运动，这样得到的运动路径就是一条曲线！！曲线的轨迹又run-right-top的cubic-bezier值决定！

animation-fill-mode: forwards;

animation-fill-mode设置动画完成后的状态；
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。简单说就是定格在最后100%的样子；
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。就是定格在0%时候的样子

css3圆形轨迹动画

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title> css3圆形轨迹动画 </title>
    <style type="text/css">
    @keyframes animX{
          0% {left: 0px;}
        100% {left: 500px;}
    }
    @keyframes animY{
          0% {top: 0px;}
        100% {top: 500px;}
    }

    #ball {
        width: 20px;
        height: 20px;
        background-color: #f66;
        border-radius: 50%;
        position: absolute;
        animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;
    }

    #lopp {
        width: 500px;
        height: 500px;
        border: 2px solid #999;
        border-radius: 50%;
        box-sizing: border-box;
    }

    </style>
    </head>
    <body>
    <div id="lopp"></div>
    <div id="ball"></div>
    </body>
    </html>