css vs js动画及requestAnimationFrame优化动画

最新推荐文章于 2023-02-03 10:21:06 发布

我就是陈星烨

最新推荐文章于 2023-02-03 10:21:06 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： css JavaScript

本文链接：https://blog.csdn.net/u012657197/article/details/73504079

版权

javascript 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

transition

transition存在的问题：

只能设置动画的起始状态，不能设置中间状态
必须明确开始状态和结束状态的具体值，不能识别0到auto，none到block，background中URL的变化
必须触发才执行，且只执行1此
IE10以上已经不需要ms前缀
对某些参数不起作用，如index

.trans {
    transition: all 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

transition参数介绍

transition-property :* //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier，其中，ease-in表示先快后慢。ease-in-out表示先快后慢再快。

transform加上transition一起使用效果更佳

.trans_effect {
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    transform:rotate(720deg) scale(2,2);        
}
还有属性transform：skew(倾斜),translate

animation

animation解决了transition存在的问题

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

css控制动画优势

实现简单动画容易且代码量少
浏览器使用类似requestAnimationFrame的机制优化动画

js操作动画优势

容易控制，比如在两个动画之间执行其他操作，且能添加回调函数
基本无兼容性问题
能用requestAnimationFrame将动画集中在浏览器下次刷新页面时执行

js操作动画缺点

js在浏览器主线程中运行，若主线程中还要运行其他脚本，则可能造成丢帧的情况
复杂度高

css动画比js动画流畅的前提

js在执行费时的操作
css不出发reflow

下面属性不会触发reflow

opacity
transform
backface-visiblity
perspective
perspective-origin

requestAnimationFrame使用举例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #ele{
            width:100px;
            height:100px;
            background-color: #00b3ee;
        }
    </style>
</head>
<body>
<div id="ele"></div>
<script type="text/javascript">
    var ele = document.getElementById('ele');
    function changeSquare() {
        ele.style.width = parseInt(getComputedStyle(ele).width)+1+'px';
        ele.style.height = parseInt(getComputedStyle(ele).width)+1+'px';
    }
    (function start() {
        changeSquare();
        if(ele.offsetWidth < 400){
            requestAnimationFrame(start);
        }
    })();
</script>
</body>
</html>

我就是陈星烨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css vs js动画及requestAnimationFrame优化动画

transitiontransition存在的问题：只能设置动画的起始状态，不能设置中间状态必须明确开始状态和结束状态的具体值，不能识别0到auto，none到block，background中URL的变化必须触发才执行，且只执行1此IE10以上已经不需要ms前缀对某些参数不起作用，如index.trans { transition: all 0.3s ease;}.tran
复制链接

扫一扫