微信小程序动画课程-通过wxss(css)来实现-animation-timing-function属性

àì夳堔傛蜴生んèń 2024-02-19 16:11 38阅读 0赞

### animation-timing-function属性 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

定义和用法  
animation-timing-function 规定动画的速度曲线，默认是 “ease”  
速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。  
速度曲线用于使变化更为平滑。  
默认值： ease  
继承性： no  
版本： CSS3  
JavaScript 语法： object.style.animationTimingFunction=“linear”  
语法

animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值 描述  
linear 动画从头到尾的速度是相同的。  
ease 默认。动画以低速开始，然后加快，在结束前变慢。  
ease-in 动画以低速开始。  
ease-out 动画以低速结束。  
ease-in-out 动画以低速开始和结束。  
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

### 小程序应用 ###

> Wxml代码

<view>linear	动画从头到尾的速度是相同的。</view>
    <view>ease	默认。动画以低速开始，然后加快，在结束前变慢。</view>
    <view>ease-in	动画以低速开始。</view>
    <view>ease-out	动画以低速结束。</view>
    <view>ease-in-out	动画以低速开始和结束。</view>
    <view>cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</view>
    <view class='c01'>01</view>
    <view class='c02'>02</view>

> Wxss代码

.c01{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    animation-timing-function:linear;
    }
    @keyframes mymove
    {
    from {left:0px;}
    to {left:200px;}
    }
    
    
    .c02{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove2 5s infinite;
    animation-timing-function: ease;
    }
    @keyframes mymove2
    {
    from {left:0px;}
    to {left:200px;}
    }

效果图  
![微信小程序动画课程-通过wxss(css)来实现-animation-timing-function属性][-_wxss_css_-animation-timing-function]

[欢迎大家收看我的视频课程：微信小程序动画课程-通过wxss(css)来实现][-_wxss_css]  
![微信小程序动画课程-通过wxss(css)来实现-animation-timing-function属性][-_wxss_css_-animation-timing-function 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[-_wxss_css_-animation-timing-function]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/75dec28b446f4f4cb1aaa6b4c11a6901.png
[-_wxss_css]: https://ke.qq.com/course/370983?tuin=2b10d56
[-_wxss_css_-animation-timing-function 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5da78f80473b4eeda0a12bd567e4154c.png