• FCC---Learn How Bezier Curves Work---定义坐标轴点的值,影响斜率,改变速度。具体调试换值既可以体会


    The last challenge introduced the animation-timing-function property and a few keywords that change the speed of an animation over its duration.

    CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.

    In CSS animations, Bezier curves are used with the cubic-bezier function.

    The shape of the curve represents how the animation plays out.

    The curve lives on a 1 by 1 coordinate system.

    The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.

    The cubic-bezier function consists of four main points that sit on this 1 by 1 grid: p0p1p2, and p3p0 and p3 are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1).

    You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow.

    This is done in CSS by declaring the x and y values of the p1 and p2 "anchor" points in the form: (x1, y1, x2, y2).

    Pulling it all together, here's an example of a Bezier curve in CSS code:

    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);

    In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the linear keyword.

    In other words, it changes at a constant speed.

    练习题目:

    For the element with the id of ball1, change the value of the animation-timing-function property from linear to its equivalent cubic-bezier function value.

    Use the point values given in the example above.

    练习代码:

     1 <style>
     2 
     3   .balls{
     4     border-radius: 50%;
     5     background: linear-gradient(
     6       35deg,
     7       #ccffff,
     8       #ffcccc
     9     );
    10     position: fixed;
    11     width: 50px;
    12     height: 50px;
    13     margin-top: 50px;
    14     animation-name: bounce;
    15     animation-duration: 2s;
    16     animation-iteration-count: infinite;
    17   }
    18   #ball1 {
    19     left: 27%;
    20     animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
    21   }
    22   #ball2 {
    23     left: 56%;
    24     animation-timing-function: ease-out;
    25   }
    26 
    27   @keyframes bounce {
    28     0% {
    29       top: 0px;
    30     }
    31     100% {
    32       top: 249px;
    33     }
    34   }
    35 
    36 </style>
    37 
    38 <div class="balls" id="ball1"></div>
    39 <div class="balls" id="ball2"></div>

    效果如下:

    我的理解,也是2个球掉下,相同循环时间,你定义坐标轴2个点的值,再加上原点和(1,1),形成的曲线。

    X轴是循环时间段,Y轴是变化值。例如,X是0.1,Y是0.9,意味在很少的时间内变化很大的值,速度会比较快。

    具体也是调试数值,可以体会效果

  • 相关阅读:
    iOS 新浪微博-1.0框架搭建
    实体框架 Code First
    Autofac 依赖注入框架 使用
    Python3.4下使用sqlalchemy
    将做好的py文件打包成模块,供别人安装调用
    ORA-12541:TNS:no listener 客户端tnsnames.ora配置,以及服务端listener.ora配置
    ADO 连接数据库,取到VT_DATE型日期转换成 int型
    python中date、datetime、string的相互转换
    VC++6.0 Win32 C2065:SM_XVIRTUALSCREEN
    Navicat Premium连接Oracle 问题汇总
  • 原文地址:https://www.cnblogs.com/jane-panyiyun/p/11757137.html
Copyright © 2020-2023  润新知