实现web前端动画的方法有哪些-创新互联

这篇文章主要介绍实现web前端动画的方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的桓台网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

1、javascript直接实现

主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

<div id="rect"></div>
 
    <script>
 
        let elem = document.getElementById('rect');
 
        let left = 0;
 
        let timer = setInterval(function(){
 
            if(left<window.innerWidth-200){
 
                elem.style.marginLeft = left+'px';
 
                left ++;
 
            }else {
 
                clearInterval(timer);
 
            }
 
        },16);
 
</script>

缺点:javascript 实现动画通常会导致页面频繁性重排重绘,消耗性能,一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿。

2、SVG(可伸缩矢量图形);

3、CSS3 transition;

4、CSS3 animation;

5、Canvas动画;

6、requestAnimationFrame;

requestAnimationFrame是另一种Web API,原理与setTimeout和setInterval类似,都是通过javascript持续循环的方法调用来触发动画动作。但是requestAnimationFrame是浏览器针对动画专门优化形成的APi,在性能上比另两者要好。

<div id="rect"></div>
 
 <script type="text/javascript">
 
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
 
    let elem = document.getElementById("rect");
 
    let left = 0;
 
    //自动执行持续性回调
 
    requestAnimationFrame(step);
 
    //持续该改变元素位置
 
    function step() {
 
        if(left<window.innerWidth-200){
 
            left+=1;
 
            elem.style.marginLeft = left+"px";
 
            requestAnimationFrame(step);
 
        }
 
    }
 
</script>

7、jq动画

1)显示隐藏:

.show(ms) .hide(ms) .toggle(ms) 不带参数时默认瞬间显示隐藏,不带动画,原理: display属性实现的,带毫秒数参数: 会有动画效果。

toggle显示被隐藏的元素,并隐藏已显示的元素

2)上滑下滑: .slideUp(ms) .slideDown(ms) .slideToggle(ms)

3)淡入淡出: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

2.万能动画:

$(…).animate(params,speed,callback)

params:一个包含样式属性及值的映射

speed:速度参数[可选]

callback:在动画完成时执行的函数[可选],回调函数中的this,指正在播放动画的当前DOM元素

以上是实现web前端动画的方法有哪些的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站制作公司行业资讯频道!

文章名称:实现web前端动画的方法有哪些-创新互联
当前路径:https://www.cdcxhl.com/article16/cspjdg.html

成都网站建设公司_创新互联,为您提供外贸网站建设云服务器企业建站App设计外贸建站网站排名

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网页设计公司