js 动画

作者: 阿凯_8b27 | 来源:发表于2019-11-25 09:18 被阅读0次

通过计时器实现,坏处:动画未加载,计时器启动,影响性能

SVG 实现动画
画布实现动画
css3 transition   
<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

-moz-transition:width 2s; /* Firefox 4 */

-webkit-transition:width 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>
使用animation

!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove 5s infinite;

-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/

}

@keyframes mymove

{

from {left:0px;}

to {left:200px;}

}

@-webkit-keyframes mymove /*Safari and Chrome*/

{

from {left:0px;}

to {left:200px;}

}

</style>

</head>

<body>

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>

<div></div>

</body>

</html>

采用window.requestAnimationFrame去处理动画由系统决定回调函数的执行时机。60Hz的刷新频率,那么每次刷新的间隔中会执行一次回调函数,不会引起丢帧,不会卡顿

相关文章

网友评论

      本文标题:js 动画

      本文链接:https://www.haomeiwen.com/subject/qqmdvctx.html